Displaying a hierarchy in a dropdown

Question

I have a dropdown in my application that allows users to select a location in a hierarchy.

Currently, I am showing each level in the hierarchy as a tree-type layout, with the lower items intended and with slightly different font styling.

JSFiddle example here: http://jsfiddle.net/uf8235f8/2/

Can anyone provide some ideas about how to make the distinction between the levels more obvious in the dropdown?

Answer 1

Semantically you should be using <optgroup> tag. That is exactly what it is for: http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_optgroup

By default it renders almost identically to what you created with custom classes. And what is more, the optgroup label is not selectable. Thats a welcome behavior.

Now how to style it of course depends on the overall site style, but I'd suggest trying something in the direction of:

• set a top margin for the optgroup label so it is distanced from previous group
• set a bottom border so there's a line bellow it and emphasize that it is the title

Answer 2

I think a clear distinction between levels can come with such a structure. You can provide states, then locations and Alphabetize it.

Also, you can use guides from @Izhaki What's good UX for selecting an item from a list of potentially 20k+ items?

Answer 3

I think this is a reasonable design if the number of items is not huge. The structure is clear, and it allows quick selection of an item. I have tweaked it a little bit to separate the top two levels more.

If there is a large number of items, you should use a collapsing tree structure, so the user can narrow down the item they want without having to see everything.

Answer 4

Using indentation and fonts to separate hierarchy levels has its problems: Why should an italic text signify top level, and boldface signal subordination? If the intermediate levels are not selectable, you may also use space to separate levels:

The first level is shown as

Transportation
---------
Car
Aircraft
---------

Clicking "Car", the next level is displayed:

Car
---------
Ford
Holden
---------

Clicking "Car" again returns you to the top level list, clicking "Ford" takes you to the list of Fords.

The lists can either be shown side by side (if space permits) or sequentially (i.e., the list of cars replaces the list of transportation modes).

Apart from the question of whether intermediate levels must be selectable (i.e., whether "Ford" is a valid selection), another difference is that browsing the entire list is easier if you only have to scroll. Depending on the knowledge of the user of the categories, the scrolling might be more appropriate.

Answer 5

In the JS Fiddle example you could try eliminating one level by replacing the top level with recurring icons on the right. For locations you could maybe use the abbreviation of a country or state (I don't know what your top level is). Since users can't select the top level (at least, I assume thet can't), you could make it more grey.

However, it seems to me that you're gone a bit too fast with picking a solution. Asking a few questions could help determine if a dropdown is the best solution. I've placed a few examples in the comments.