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.

The application I'm working on rewriting has 4 major categories, where 2 of the categories each have 3 subcategories. Any given item can only belong to one of the 8 categories. An optgroup (which is an HTML tag that allows grouping menu items under headings) seemed like the logical choice for presenting this to the user:

http://cssdeck.com/labs/isj6weeb

<select>
  <optgroup label="Foo">
    <option>Foo</option>
    <option>A</option>
    <option>B</option>
  </optgroup>
  <optgroup label="Bar">
    <option>C</option>
    <option>D</option>
    <option>Bar</option>
  </optgroup>
  <option>Random</option>
  <option>Misc.</option>
</select>

This produces:

Hierarchical Drop Down

This grouping is repeated elsewhere within the application when viewing items that belong to those categories. You can only view by the major category (Foo, Random), not by any of the individual subcategories (A, C).

The feedback I've received regarding this control is basically "get rid of the optgroups" with no good reason why. What they want is more like this (optgroup without the optgroup):

<select>
  <option>Foo</option>
  <option>FooA</option>
  <option>FooB</option>
  <option>BarC</option>
  <option>BarD</option>
  <option>Bar</option>
  <option>Random</option>
  <option>Misc.</option>
</select>

This produces:

Flat Drop Down

I'm trying to understand why such a request would be made, since I view the grouping as important. Most web form usability articles point to optgroup as an element that improves usability. Is this just a case of a lack of familiarity with the optgroup element (since it is rare to see it in the wild)? Or are there genuine usability concerns with optgroup?

share|improve this question
1  
"with no good reason why" = the bane of every UX designer. If there aren't reasons for requests, then there's no reason to over-think it. Either go back and try to get to the core issue (sometimes doable) or just do it and walk away (sadly, what we often have to do to stay sane...) –  DA01 Jan 24 at 16:55
    
Have you tried asking the people giving the feedback what their reasons are? That would be an interesting conversation. Don't let them stay with "for no reason" (which, btw, is highly unlikely--it might be "for no GOOD reason" to you, but there's always a reason, and it might be good to the other person). –  Alex Feinman Mar 25 at 19:16
add comment

2 Answers

Like any design choice, there are trade-offs. I can see why you are tempted to use optgroups here, but I can also see why others thought it would be better not to use them.

The advantage of optgroups is that they allow you to introduce organization to a set of items, but the disadvantage is that they add clutter and increase the amount of text that must be scanned to find the desired choice.

Your menu has eight items, which is not a particularly large number of items. If the items can easily stand on their own (i.e., the headings are not required to understand the meaning of the subordinate items), I'd stick with the flat, non-optgroup design. However, if the number of items grows significantly or the headings improve understanding of the items to a great extent, optgroups might make for a good design.

For now, I'd go with the simpler design (no optgroups). Of course, the only way to really know what works best is to put the two designs in front of users and see how they perform.

share|improve this answer
add comment

If text space allows, I would only show the selectable categories with their subcategories in parentheses. Also, maybe I am understanding your description wrong, but I think you are using in the opposite way it is intended. Namely, the groups themselves are not selectable (they are only labels) and only the options are.

Foo (Foo, A, B) Bar (C, D, Bar) Random Misc.

Optgroup itself is conventional. I have never heard of any problems with it. Obviously, visual styling the optgroup and options differently will help identify which items are selectable.

share|improve this answer
add comment

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.