Which widget is best for selecting a single option?
Designers favour the dropdown box as uses very little screen estate.
But dropdown boxes are
cumbersome and time consuming for users
Users have no immediate overview of the possible options and need to go through a lot of steps to make a selection.
Users are much slower when using a mouse than most
Time according GOMS
GOMS times from Jef Raskin's book:
The Humane Interface
hoofdstuk 4.2.1 Interface Timings
Change from keyboard to mouse
Move the mouse pointer to the dropdown button
Click to open the menu
Point at the desired choice
Click to select
designers seem to realise.
Most designers will find it hard to believe that the total time really is 4.35 seconds.
But prove it to yourself.
Get a stopwatch and select
Entry field in the dropdown box above.
The dropdown box is suitable for
low frequency usage, less than once a day.
a limited number of options, 7 at most.
A list box takes up more screen real estate than a dropdown box.
But in exchange it offers a big advantage:
The list box always shows a number of options.
Scrolling is easier as the scrollbar is always available.
The disadvantage is that is unclear whether the list offers single or multiple selections.
Did you notice that the list on the right offers
The list box is suitable for
A list of radio buttons displays
long lists with variable contents
medium frequency of usage, several times per day.
possibilities at once.
Unfortunately that has a disadvantage: radio buttons consume quite a bit of screen real estate.
However, the buttons themselves are rather small.
works against the radio button.
The user must aim precisely to select an option.
Standard radio buttons are suitable:
for a conscious choice from a limited set of options (7 at most).
for low-frequency functions where clarity is more important than speed.
in combination with other input widgets in a form.
makes the text clickable as well.
The improved radio buttons are suited to high frequency usage.
Hyperlinks, like radio buttons, are clear at once.
Users are accustomed to click on links to navigate from screen to screen.
The clickable area is large, an easy target.
Hyperlinks are suitable for:
Tip: Use links for 'harmless' actions,
a hyperlink high frequency functions,
long lists of options
(the user can quickly search using standard scrolling and the browser search function),
navigation to another screen.
to an update screen is fine.
Buttons offer the same advantages as hyperlinks.
They offer a complete overview of possible options, along with a large clickable area.
They even tempt users to click on them.
Buttons are perfect to
solely for navigation and nothing but
Big surprise: An entry field is faster than a
Typing is surprisingly efficient.
An entry field is often the fastest possible solution, certainly if:
11 keystrokes for
entry field[Enter] 2.20 sec
Advice: Use entry fields for high frequency input of dates, postal codes, etc.
the number of options is large
the number of keystrokes is low
the user knows the right possibility by heart
the error rate is low