Miller's Home Page
(Site Map & Search too!)
Workshop Materials Design Talk Video Gallery
References Personal Page Photo Galleries
Design Talk
[ Interaction ] [ Selection ]  

A thought to ponder.

Why don't lists (radio buttons or check boxes work more like traditional GUI objects. You should not have to click JUST on the box to select the item... JavaScript is your friend!

JavaScript allows one to share the selection process with the text associated with the radio button (or checkbox). Fitt's Law clearly defines that the time and difficulty in clicking just on the small radio button is far worse than having to select anywhere on the text. In addition, this is how a "traditional" software product would work.

For example, Figure A shows a Macintosh application window, not how clicking anywhere on the text selects the option. This should be carried over to HTML.

Figure A - Traditional Desktop Software Selection Model

On the web we don't have this model. I suggest we should. I know there are examples were it might not work or be appropriate for the task. Then don't do it. But in most web applications there is a lot of use for this code.

Here is an example of it, as shown below. Note a few things

  1. Clicking on any of the text selects the item
  2. Underlines are not used
  3. The selection of a pop-down (or text field) also forces the change of the selection (in this case to help the user understand that by choosing a pop-down/text field also tells the system to use the new option. Without this trick, a user could select from the pop-down or enter text into the text field and not have the radio button on the correct selection.
  4. User testing showed we should have one item selected at all times. We choose to select the most likely option and put it first.
  5. The use of tabbing also works and also forces the text cursor into the text field when the last option is selected.
  6. This is not a full form, I just wanted to show an example piece of code.
 The Feedback Demo
Type: Resume or Consulting Opportunities
QuickTime or Image Problems
Streaming Video with RealNetworks G2
Feedback about Website design/links, etc...
Your Name:
E-mail Address:

Your Feedback:


Comments: Happily Received!
Updated: 08.12.2001