There's always alternatives to using drop-downs

Filtering content with drop-down lists hides your content behind an inconsistent and ambiguous interface. Here is an alternative.

The drop-down list is ubiquitous in mobile UI design despite having usability issues. Luke Wroblewski, Product Director at Google, thinks dropdowns should be the UI of last resort suggesting there are more appropriate form controls. But what about drop-downs outside of forms?

I've noticed another common use case for drop-down lists and want to show you an alternative.

Using drop-downs to filter content

I often see drop-down lists used to filter content or change the content displayed on a screen. This is not to be confused with navigational drop-down menus that navigate to a different screen.

To give an example let's take a look at a common use case for TV and Film apps. On the program details screen you often find a list of all the available episodes for the program. Displaying all the episodes in one long list would make finding episodes at the end of the list difficult, so episodes are grouped chronologically into series or seasons.

Netflix on two Nexus phones displaying the season list of a program.
Netflix use a drop-down list to filter the episodes displayed by season.

By grouping the episodes into seasons, the user can filter the episodes and choose to display a single season's episodes at a time. On the surface this appears to be a good use case for a drop down list to decide which episodes are displayed on the screen. The merits being:

  • Space saving. Their compact form allows a large list to be condensed.
  • Familiarity to users. Drop-down lists have been in use, in some form, since the dawn of the GUI and are widely used. So users should be familiar with their purpose, right?
  • Familiarity to designers and developers. They are available across platforms, cheap and easy to implement.

Looks good, so what's wrong?

Drop-down lists have long known usability issues. Jakob Nielsen recommended to only use drop-down menus sparingly way back in 2000.

Hidden content

How many seasons are there? How many seasons are available? Is the latest season available? Are all seasons available from the start? Some apps only offer limited catch up services and due to licensing reasons some seasons may be unavailable. So these are all pertinent questions a user may ask when viewing the program details.

Using a drop-down list, it is not possible discover additional seasons without first opening the drop down list. Which leads to...

Ambiguous functionality

Drop-down lists have been common place in UI design for a long time now so it would be reasonable to expect users to recognise their functionality, right? Wrong.

They may be common place but their style and functionality is anything but standard. Just by looking at the two aforementioned apps we can see four different styles.

For phones show a comparison of drop-down lists styles on Netflix and Now TV for iPhone and Nexus
The same but different - Drop-down lists can widely vary in style and functionality across different apps and platforms.

As not all drop-downs uniformly look and function the same, familiarity cannot be relied upon. This increases the cognitive load required for users to recognise that a drop-down list can be tapped upon to reveal more options. Leading to hidden content. The user may also be new to the platform, so history is irrelevant.

Multi-tap action

At it's simplest form, actioning the drop-down list requires a tap to open, possible multi-taps to scroll and a tap to select.

OK, What's the alternative?

The recently IMDB mobile app takes an alternative approach to using drop down lists. It displays a list of seasons as tabbed navigation along the top of episode lists.

A Nexus phone and iPhone display the IMDB season list using tabbed filtering
One tap - IMDB uses tabs to filter a season list.

By using tabbed navigation, the total season list (where less than eight) is now instantly visible, answering all questions on availability. The total number of seasons is reiterated at top on Android. The current season is highlighted so the user can see where they are and additional labeling on the iOS app makes it clear that the numbers represent seasons.

Browsing seasons is now a one tap action for programs with less than eight seasons in total.

Another app using tabbed navigation to present their season list is All 4. It's worth highlighting the way they use tab labels to give the tabs context.

Two iPhones display the tabbed navigation used to filter the season list in the All 4 app
Text labels - All 4 displays additional text on their tab filters.

What's the catch?

As with everything in design there is a trade-off. The screen width restricts the number of options that can fit in the view port. Vertical scrolling can be implemented for large lists but one tap then becomes multi-tap and the additional seasons again loose visibility.

iPhone displaying IMDB's tabbed filtering containing over 20 seasons'
Vertical scrolling - IMDB uses vertical scrolling when the season list overflows the view port.

In our example, I think this is acceptable. A large number of programs wont require vertical scrolling and a user may already be familiar with the tabbed navigation before they encounter a scrolling navigation.

Summary

Despite the known user experience issues with drop-down lists they are still widely used when alternatives are more appropriate. Tabbed navigation can offer a better user experience to drop down-lists.

I'm not suggesting that all drop-down lists should be replaced with tabs. I only recommend that next time you're in your favourite prototyping tool, before you reach for that drop-down list, consider the alternatives. As there is always an alternative to improve the user experience.

Main Photo: geldane cc derivative.


Comments

Hire Me

I'm currently availble for contracting and consulting work. Get in touch if you are interested in working together.