Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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:

  1. Drag and drop the template items onto the desired tab headers. This functionality may not be immediately apparent to the user.
  2. Inline combo box next to the relevant item.
  3. 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.

share|improve this question
    
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 6: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? –  Angavar Jan 22 '13 at 10:08

2 Answers 2

up vote 1 down vote accepted

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.

share|improve this answer
    
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? –  Angavar 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
1  
Perfect! Thanks again :) –  Angavar Jan 22 '13 at 11:23

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.

share|improve this answer
    
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. –  Angavar Jan 22 '13 at 11:27

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.