Dropdown menus and alternative approaches for selecting from a choice of options

Home » Blog » Design » Dropdown menus and alternative approaches for selecting from a choice of options

In this post designer Luke Wroblewski outlines why dropdowns should be the UI of last resort.

The problem with dropdown menus – also known as select boxes in HTML lingo – is that they’re something of a general purpose, one-size-fits all solution for dealing with lists of elements. Although dropdown menus accommodate most list-based use cases using them often doesn’t take the specifics of the use case at hand into consideration.

As pointed out by Luke most of the times other, more specific approaches are more suitable for achieving a goal when using a particular user interface. This requires a bit more research as to how a user interface is actually used and what the user’s particular goals might be but it’ll allow for a much better user experience.

For example, radio button groups displaying only the most commonly selected options are much easier to grasp at first glimpse.

Another common use case for dropdown lists used to be selecting a value from a number or date range. Thankfully, nowadays there are many alternatives that lend themselves to these specific use cases, such range sliders, date pickers and of course the HTML5 range, number and date input types.

Moreover, if you have to use a dropdown menu for a certain use case (for example if there are actually more than 5 options the user might reasonably select from), there are components such as Select2 that decorate standard HTML select boxes with features such as searching and filtering that vastly improve the usability of a user interface.

About the author: Bjoern
Independent IT consultant, entrepreneur

Leave a Comment