SUMit Roster Software > Nut's Weekly > March 2002 > ChoiceNederlands · Search...

Choice

 Monday. 25 March 2002 About Nut January 2002 February 2002
March 2002
Art Ranking Start
Choice
April 2002 May 2002
Which widget is best for selecting a single option? Dropdown box, list box, radio button, hyperlink, button or entry field?

Dropdown box

Designers favour the dropdown box as uses very little screen estate. But dropdown boxes are cumbersome and time consuming for users (useit.com/alertbox...). Users have no immediate overview of the possible options and need to go through a lot of steps to make a selection.
Action Time according GOMS
(standford.edu/...) 		The Humane Interface

GOMS times from Jef Raskin's book:
The Humane Interface
hoofdstuk 4.2.1 Interface Timings

Change from keyboard to mouse 0.40 sec
Mental preparation 1.35 sec
Move the mouse pointer to the dropdown button 1.10 sec
Click to open the menu 0.20 sec
Point at the desired choice 1.10 sec
Click to select 0.20 sec
Total 4.35 sec
Users are much slower when using a mouse than most 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 List 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.

Listbox

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 multiple selection?

The list box is suitable for

  • long lists with variable contents
  • medium frequency of usage, several times per day.

Radio buttons

Standard radio buttons

Dropdown
List
Radio buttons
Hyperlinks
Buttons
Entry field

Improved radio buttons

Dropdown
List
Radio buttons
Hyperlinks
Buttons
Entry field
A list of radio buttons displays all 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. Fitts's law (asktog.com/...). 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.
A piece of javascript, sent in by Mr. Verseput himself (verseput.com) makes the text clickable as well. The improved radio buttons are suited to high frequency usage.

Hyperlinks

Dropdown · List · Radio buttons · Hyperlinks · Button · Entry field
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:

  • high frequency functions,
  • long lists of options (the user can quickly search using standard scrolling and the browser search function),
  • navigation to another screen.
Tip: Use links for 'harmless' actions, a hyperlink to an update screen is fine.

Buttons

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

Advice: Use links solely for navigation and nothing but buttons for decisions.

Entry field
Big surprise: An entry field is faster than a dropdown box.
Action Time
Mental preparation 1.35 sec
11 keystrokes for entry field[Enter] 2.20 sec
Total 3.55 sec
Typing is surprisingly efficient. An entry field is often the fastest possible solution, certainly if:
  • 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
Advice: Use entry fields for high frequency input of dates, postal codes, etc.

Till next week,
Nut