Moving items between tabs

Question

I'm designing a template editor for my WPF app. Each template is compromised of multiple child items. Here's a mock up:

enter image description here

The user should be able to move template items between the History, Examination and Plan tabs. I'm having trouble deciding how to achieve this from a UI design point of view. Options I've thought about:

Drag and drop the template items onto the desired tab headers. This functionality may not be immediately apparent to the user.
Inline combo box next to the relevant item.
Button with modal dialog next to the Add item link button already present. Probably the worst option as it disrupts user workflow.

Is my design clear so far and how should I go about implementing this function.

What is the intent of the 3 tabs? My gut reaction is that if they are ways to group the content, and the content needs to easily be moved between them, then tabs aren't the right UI for this. — DA01, Jan 22 '13 at 06:01
@DA01 The purpose of the 3 tabs (History, Exam, Plan) is to group items which are similar. The tabs are also sequential. A doctor will first take a history, then perform an exam and form a plan. Moving items would be rare, but I feel I should allow for it because a user may accidentally create a template item under the wrong category. In place of a tab control, what would you suggest? — Blake Mumford, Jan 22 '13 at 10:08

score 1 · Accepted Answer · answered Jan 22 '13 at 08:33

1

To add to your list, which I think is very good, you could also try the right-click like the following:

mockup

^{download bmml source – Wireframes created with Balsamiq Mockups}

One other option is keyboard shortcuts in the following flow: Ctrl+X > Select tab to move to > Ctrl + V. For Mac users, use the Command key.

From personal preference I would go with Drag-n-drop as number one and Right-click as the second alternative option. The other three can be implemented if your budget is high enough and your project manager likes the idea.

answered Jan 22 '13 at 08:33

Benny Skogberg

54,996
22
140
241

Thanks for your response and encouragement. +1 Your absolutely right, I had thought about right clicking and will implement it. I was also leaning towards drag and drop. Do you have any suggestions about how to make the drag drop function obvious to the user? – Blake Mumford Jan 22 '13 at 10:12
@Angavar You're welcome! Unfortunately there is (to my knowledge) no good metaphor for drag'n'drop. The only thing I can think of is a context help menu or a call-out which shows only once for a first time user. Good luck! – Benny Skogberg Jan 22 '13 at 10:17
@Angavar I was wrong. There is a question How to visualize the possibility of drag'n'drop? which you might refer to! – Benny Skogberg Jan 22 '13 at 10:19

score 1 · Answer 2 · answered Jan 22 '13 at 11:04

Is moving part of the default workflow - i.e. will a typical item move through all three tabs? If so, you need a less cumbersome UI.

e.g. add arrow buttons to the mouseover menu (or for selected items), allowing to move them to the nexttab with a single click.

 History item 1         [/] [%]                               [->]

Do not immediately move on click, but only indicate removal and allow moving it through all tabs:

 --History-item-1--      [/] [%]  [<-]  Move to 'Examination' [->]

Execute delayed / on deselect, or with an explicit "OK".

If this is a uncommon task, I would consider drag&drop OK, but indicate the drop targets clearly. You can also add a "grip" or "four arrow move" icon to the mouseover menu to indicate the item can be shifted.

No, this is an uncommon task. It would only be performed if the item was created under the wrong category/tab. Each item will clearly belong to a particular category. +1 I'll need to think of some way to make it clear that the tab headers are the drop targets. — Blake Mumford, Jan 22 '13 at 11:27

Moving items between tabs

2 Answers2