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.

Leave a Comment

* Checkbox GDPR is required

*

I agree

By continuing to browse the site you agree to our use of cookies. Privacy Policy

Privacy Preference Center

Strictly necessary

These cookies are necessary for the site to function.

PHPSESSID: Preserves user session state across page requests.

__cfduid: Used by the content network, Cloudflare, to identify trusted web traffic.

PHPSESSID
__cfduid

Preferences

Remembers the user's submitted data when a comment is submitted in a blog post. The purpose is to aut o-populate form fields for subsequent comments, in order to save time for the user.

wfvt_#

Statistics

Statistic cookies help us to understand how visitors interact with our websites by collecting and reporting information anonymously.

_ga: Registers a unique ID that is used to generate statistical data on how the visitor uses the website.

_gat: Used by Google Analytics to throttle request rate.

_gid: Registers a unique ID that is used to generate statistical data on how the visitor uses the website.

collect: Used to send data to Google Analytics about the visitor's device and behaviour. Tracks the visitor across d evices and marketing channels.

_ga,_gat,_gid
collect

Security

We use Wordfence to secure our website against hacking attempts: https://www.wordfence.com/

wordfence_verifiedHuman

Close your account?

Your account will be closed and all data will be permanently deleted and cannot be recovered. Are you sure?