User Experience Stack Exchange is a question and answer site for user experience researchers and experts. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

I have an online menu system that is used in the food retail business. The difference between a regular cart based store and a food store is the sub options a customer might have. For example you could order a coffee, you would then need the option of milk or sugar. On Mobile sites I have solved this by adding a extra screen for each sub option.

mobile UI

The retailer has the option of having multiple sub options so the milk screen could be followed by a sugar option and so on. This has proven to be the easiest way to do this.

My problem is how to make building the menu as simple as possible for the retailer. At the moment I have multiple drag and drop elements allowing the retailer to position items as they like. They then add sub items through a not too complicated procedure but I can see how it can be confusing.

Youtube video demonstrating adding sub items

Apologies for droll kiwi accent. I am going to abandon this method and start to use two tables side by side where the retailer can swap between a live menu and menu to store unused items, similar to this connected list example. But I am still stuck on how to add sub items simply.

share|improve this question

Two ideas, first:

make a drop-down arrow and on click show submenu-items directly under the main menu item but in the same menu, e.g.

o item 1
o item 2
o item 3

click on "o item 1" ->

o item 1
o item 2
o item 3

Second idea, use modal box dialogs (if not for each item a subitem is available, but for some there is), e.g. for item 1 you have to specify the size/color etc., then use a pop up modal box to choose from the subitems, or a drop-down menu...

share|improve this answer

You can use the same mechanism your users are already used to - drag and drop. Instead of providing just the option to insert items between other items, you can also let them drop items on top of other items, which would create a submenu.

enter image description here

Generally speaking, drag & drop shouldn't be the only way to accomplish things, since it has zero discoverability. So as a menu fallback you could have some buttons controlling each item's position in the list and its level in the tree. E.g. this from Axure RP:

enter image description here

The up-down arrows control the order of the items, and the left-right arrows indent them accordingly to their hierarchy level relative to the item above (child or sibling).

share|improve this answer

Your Answer


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.