Pros & Cons? - Single dropdown VS double dropdown VS multi level dropdown

Question

I’m working on an application with some complex dropdowns which have selectable main categories and sub categories. Some dropdown lists could have up to 40 options - which is quite intimidating to new users of the app. Users must select a top level category but if they choose they can also select a sub for more detail.

My question is which dropdown format do you think is the most usable? Should take into account new users compared to power users and which would be more user-friendly and efficient.

1. A predictive search and dropdown - user can type the start of a main or sub category which would change the list to only the items beginning with those letters.

2. Double dropdown - User selects a main category from the first dropdown which would activate or change the second dropdown.

3. Multi level dropdown - User only sees one dropdown and can click (or hover) over each item to reveal the sub categories.

^{download bmml source – Wireframes created with Balsamiq Mockups}

Answer 1

Option 2 would be the most straight-forward to implement to keep it usable. It would work for both new users and power users, depending on how you set it up.

As this needs to cater to power users (users whom I assume already know exactly what option they want to select from the form) as well as new users you should still display both the dropdowns (category and sub-category). Sub-category would initially be filled with all the possible available sub-categories because nothing is chosen in the Category field to start with.

• Power users could jump straight into the sub-category field and - providing it is a combobox or similar control that allows typing / autocomplete / jump-to-position - start typing the name of the subcategory they require without the need to pick the initial category up front. (This is assuming that sub-category items are unique).
• New users can start with the Category field which then whittles down the list of options in the sub-category one.

Keeping both fields visible from the start helps the user picture how long it is going to take to complete the form. If new fields keep appearing depending on options selected in previous ones then it's almost a mystery as to how many fields the user is actually going to have to complete - i.e. don't mislead your users.

I would highly suggest you avoid any form of hover control as per option 3. Hovering is particularly fiddly, let alone if you have to select a specific item in a dropdown control before the hover menu displays. Also, that would make it very difficult to use with just a keyboard. (Don't focus purely on mouse pointer users)

Answer 2

In my personal view dropdowns are outdated and quite frankly rather annoying to interact with.

They are

• fiddly when opening/closing,
• most often they don't provide much help when scanning items,
• when combined it is cumbersome to go back a level (e.g. you need to open the Main Heading dropdown again) and
• when holding many items, a lot of scrolling back and forth is required.

If users have a rather good notion of what category to search for, you could "just" have predictive search like Google.

Otherwise, (with the limitation that I don't know the context) I would suggest another organization and widget alltogether: Something resembling a mega menu in combination with Miller columns. The items in the columns could then be ordered in a meaningful way (e.g. alphabetically).

This gives an overview and prevents fiddly interaction. Of course, I you have tough screen real estate constraints, this may not be the way to go.

Here's a mockup:

^{download bmml source – Wireframes created with Balsamiq Mockups}

Answer 3

How about a sliding subnav within the dropdown?
So on click of one heading, sub categories slide in. It probably doesn't even need an animation.