Menu builder suggestions

Question

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.

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.

Answer 1

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
__subitem1
__subitem2
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...

Answer 2

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.

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:

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).