2

We have a UX situation in an enterprise site for a very large customer that has a very deep product list for a support site. We need to indicate that the product field is required, but deeply nested. Some menus go as deep as six levels! The user is required to choose from a product deep within that hierarchy.

We're currently making the menu a bit simpler by using an expand/collapse at the top level. Then, when the user selects an item from the menu, we expand to the next level, etc. But it is not clear to the user that it is required for them select a field that is six levels deep. Many (most) users miss that it is required and get frustrated with the form submission, continually having to go back to select a deeper category. Any ideas on how to indicate that a deeply nested product is REQUIRED?

This example shows only two levels:

Two level example

Imagine in this case that one of those sub items are required. Now, extrapolate that even deeper in the hierarchy.

And unfortunately, there is no chance for restructuring their product catalog to make it more flat.

EDIT: for clarity

Improve this question
2
  • The red star is already indicating that it's a required field. It's sounding like the users are not completing the field because navigating to the leaf nodes is time consuming. Is that the problem - or something else? Try chat.stackexchange.com/rooms/389/user-experience
    – James Crook
    Jun 16, 2011 at 17:29
  • What's not clear is that a sub-sub-sub-sub... item in the hierarchical drop-down is a required. People are just clicking on a top level category and are getting stuck there. I'm wondering about how best to visually indicate that they haven't yet selected something that qualifies as required. One thought I had was maybe a color (red?) that changes (to green?) when the requirement is met. Thoughts?
    – jaxxon
    Jun 16, 2011 at 18:02

3 Answers 3

Reset to default
0

Can you give an idea of how many products there are?

If there is more than 200 you should really look at giving them a search box to find their product.

If you can't change the hierarchy itself, you could still get the effect as if you had by expanding more than one level at a time. Product selection becomes a mega-menu, and you don't just show 'balls' in the top level, but 'balls: Distance|Accuracy|Spin'. Net effect is you can go from six levels (far too deep) to three.

Edit

To stop users thinking they're done when they have selected a non-leaf node you need to:

  • Your menu of options should not close automatically when the user moves away (having failed to select a leaf).
  • Make the non-leaf nodes visually distinct from the leaf nodes. If non-leaves are hyperlink-like it is one indication that they are not selectable for the products box. They should not be the same style as text that appear in the field boxes.
  • You can change text like 'bags' to 'select a bag...' to encourage the user to continue.

The real issue is not that you need to indicate on the leaf nodes that the leaf nodes are 'required' - it's that you need to indicate in the selection hierarchy that the the user isn't done yet.

Improve this answer
5
  • This is a good suggestion for how to display a large amount of stuff in a menu. My question is about how to indicate that something that deep is a required field. Any ideas there?
    – jaxxon
    Jun 16, 2011 at 17:24
  • Oh.. It's a very large gaming company with about 300 titles.
    – jaxxon
    Jun 16, 2011 at 17:46
  • Then that argues for a search box as the title of the game will be well known to them (even if they don't type it exactly right).
    – James Crook
    Jun 16, 2011 at 17:53
  • True. :) This also needs to apply to more generic stuff for other large customers with, say, 200 items. Let's say.. a power tools company with 20 kinds of drills. I agree a search option is worth exploring - we will be trying 3-4 different UIs. For this one, my question is -- is there a good way to indicate that there is a required field in a hierarchical menu? Thanks! :)
    – jaxxon
    Jun 16, 2011 at 17:57
  • Marked as best answer based on "Edit" points. Thanks!
    – jaxxon
    Jun 16, 2011 at 19:33
2

If the menue is 6 levels deep then maybe its time to take it out of that dropdown menue.

Sometimes we try and cram everything in or sum it all up in the best way possible as UI/UX designers but we should be scared of taking the user to a new page, allowing them to focus on that large task with out any distractions in the easiest way possible. Then they will be done with that task quicker than they would have dealing with a finicky dropdown 6 levels deep.

  • You can take them to a "wizard" type, multi-step, page.

  • You could have a column like nav (like that in MacOS) as they click one the rest populate the next column.

  • Skip it all, and have them type in the product and have fields that match that query show up in a drop down. They MUST select one of these preset matches. Then all the options before than will also be selected behind the scenes.

Improve this answer
4
  • Good suggestions, thanks - and yes, we're working on an alternative UI to test that will be columnar. My question is more about how to display that something very deep in a hierarchical menu is a required field. Any ideas? Thanks again.
    – jaxxon
    Jun 16, 2011 at 17:24
  • 1
    Well if you do use the Columnarm then it hides the fact that they are required because you wont see the next group of options until they pick one form the required field. Otherwise, an asterisk works fine I would think.
    – jonshariat
    Jun 16, 2011 at 18:58
  • 1
    +1 I agree with Jon that your problem isn't how to indicate that it's a required field, but to make it understandable how to choose an item. The drop down tree menu has great potential for frustration (i.e. click something -> item isn't selected but you have to choose again... and again...). The wizard could work and I think it doesn't necessarily have to be on a new page. If you do it right, the user will even be thankful for helping him to choose the right item with ease.
    – Phil
    Jun 16, 2011 at 19:02
  • Totally agree.. and we will be exploring other UI options. I'm just trying to make some improvement to this particular implementation prior to a usability test. I'm afraid there may not be much more we can do with this one. Thanks for the help!
    – jaxxon
    Jun 16, 2011 at 20:37
0

If they are manditory then why not list the manditory items as the first items in the list they can also be in the tree. You can also disable the expansion of the tree until they have values for the manditory items. For simplicity I would also make the values for the manditory items ( if you also display them in the menu) readony in the tree; only editable in the top section. For example

M dog->hair->color
M dog->size->weight 
dog
   hair
     color
     length
     nap
   size
     length
     height
     weight
Improve this answer

Your Answer

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

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