What are some alternatives to dropdowns and wizards for multi-level options?

Question

I am trying to design user interface that allows a user to select out of multiple workflow options. The options list is fixed but has more than couple of options. It's important for the user to be able to make the selection quickly.

Group A
- Workflow A1
- SubWorkflow A1.1
- SubWorkflow A1.2
- Workflow A2
- Workflow A3
Group B
- Workflow B1
- Workflow B2
- Workflow B3

I was considering a dropdown but it feels slow. Wizard also feels a bit awkward and not very quick. Having a lit of buttons feels cluttered.

Are there any patterns of dealing with long lists of multiple selections?

Is it possible to make graphical representations of those choices? The graphical representation can correspond to: the workflow itself, or just the inputs (preconditions), or some artwork that helps the user remember the correct choice by associating with the criteria. — rwong, Nov 09 '14 at 21:31
A minimalist question would be: what is the minimum amount of information (1) the user need to receive, and (2) the user need to give, so that the user will make the correct choice? — rwong, Nov 09 '14 at 21:32

score 2 · Accepted Answer · edited Jun 16 '20 at 10:51

Several existing answers on this site offer advice related to this question. One of the problems is that dropdown menus and dropdown selectors just get called "dropdowns", which can make it tricky to find stuff. I've mixed these answers in with a couple of my own suggestions. Links throughout and at the bottom.

Make Sure This is Really a Problem

As with so many issues like this, the primary driver behind the change appears to be your subjective opinion that that this type of selector feels slow.

Research does give us reasons to avoid unnecessary depth in navigation systems, but that doesn't mean that dropdowns are a universally bad choice.

With a robust implementation and a relatively small number of options, a dropdown might work, and you could save yourself a lot time and effort by first testing your hypothesis. You might find that this isn't really a problem at all.

1. Just Show All The Options

Depending on the number of options in your set, it may be viable to just show all the options. Your question included two bullet lists. If you took Group B, moved it up and right, beside Group A, make all the items links, indent sublinks, and have a designer tweak the layout to fit with the style of your page, you've got a usable implementation that's as simple as it gets.

2. Just Use a Dropdown

As mentioned at the top, if your menu is small, a dropdown could work. Just make sure you don't stray too far from conventions and adhere to best practices.

Dropdown Menu Best Practices - Smashing Magazine

2.a. Dropdown Variation - Drilldown Menu

Drilldown menus bridge the gap between standard dropdown functionality and a more wizard-like behavior.

http://www.jque.re/plugins/menu-nav/drill.down/#

3. Make it a Mega Menu

Mega menus get the NNGroup's blessing and are recommended as a solution to the usability problems of regular dropdowns. They provide a way of reducing the depth in a menu, but can become unwieldy if overloaded.

Applied to your case and example data, if a user clicked on the Group A link, they'd see a panel that shows all the workflows under Group A, including the third level items A1.1 and A2.2

4. Filter More, Navigate Less

This falls into the category of 'Show everything and let the user filter out'. It may not be a appropriate given the number and type of items you, but I've included it here to provide food for thought and potential inspiration

There are lots of options to explore for filtering on menus, one, for reference, is Live Filtering.

UI Pattern for Live Filtering
Example of Live Filtering (switch to list view for a more relevant view)

UX.SE References

score 0 · Answer 2 · answered Nov 10 '14 at 18:42

I've done this before by having a sidebar (cf. Word Task Panes, etc) with a list of available "tasks", each having an icon and some text (actually title and subtitle) to describe what the action will be.

In the old days a toolbar would also be an option, but these are considered déclassé.

It may not be the most elegant solution, but I've found that users like it, as they can see immediately what options are available and it is trivial to select.

score 0 · Answer 3 · edited Nov 10 '14 at 21:07

How real are the distinctions between your workflows? How relevant are the boundaries between them TO YOUR USERS? Do they come to your interface saying "Today, I want to do an 'B'!", and then consider which of the 'B' options they are interested in. Or do they come to your interface knowing exactly which choice they want without your having to divide that question into a series of simpler questions.

I'm a strong advocate for what works.
Despite UX gospel, very few users reach cognitive overload when offered a list with seven options. Since speed of choice is important to you, I would consider dropping both the drop-down and the wizard, opting instead for seven distinctly labeled buttons. Then once the choice has been made, clear the screen and get started on the selected workflow.