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.

  • 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, 2013 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? Jan 22, 2013 at 10:08

2 Answers 2


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


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.

  • 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? Jan 22, 2013 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! Jan 22, 2013 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! Jan 22, 2013 at 10:19

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. Jan 22, 2013 at 11:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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