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

3 Answers 3

Key issue for me here the the repeated Group name. i.e. The two "Foo" targets below cause some puzzlement (cognitive dissonance) i.e.

Foo
 --> Foo
 --> A
 --> B

Is not straight forward when compared to

Foo
 --> A
 --> B

If you can't make the section a target, consider not having the same name

Foo
 --> Overview
 --> A
 --> B

Apart from that the Optgroup is not an excellent rending on my browser which could have sown the doubts. However the Optgroup UI should still produce a lower cognitive load (how much does a user need to read & interpret) to understand the organisational structure.

Amateur UX evaluation also "show & tell" feedback can be very knee-jerk, and is driven from a very different mental context than a real user. Key is to manage this input, which can be valuable, without ending up with a "directive". Few common issues:

  • I am the user: "New to me, thus surprise for every one"

  • I must proof-read UI : "Evaluate UI by proofing every element from top-left"

In that sense the Opt-Groups are not as common as straight list. Also the evaluator is happy to carefully read in detail every line in a text heavy drop-down. They do not realise Opt group UI is a help to a real user who is scanning a UI rapidly.

share|improve this answer

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

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

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.