Recently I had the task of designing an online data collection form that included a “top three” question. This question requires the user to choose three favorites, ranked in order of preference, from a long list of options. The user can only choose one item for each ranking (i.e. there can’t be two items ranked #1).

Designing this is tricky, especially if the list of items is longer than one screen (more than 20 items). If the contents of the list are known entities (for example, product names that the user is familiar with), data entry would become faster once the user has filled out the form a few times. For a new list or a list of lengthy items, however, the task has more usability issues.

I worked out three different approaches to desiging this question, each using standard form elements: radio groups, pull-down lists and text fields. Advantage and disadvantages are given after each example.

1. Radio groups

Example:

Advantage: With radio groups it’s easy to restrict the user’s choice to one first, one second, one third. It’s easier to scan and visually compare items, especially those that are sentence-length or longer.
Disadvantage: If the list is longer than one screen, the ease of scanning is reduced.

2. Pull-down lists

Example:

1st Choice:

-Choose one- Beaujolais Burgundy Cabernet Chablis Chardonnay Fume Blanc Gewurtztraminer Montepulciano Petit Syrah Pinot Grigio Pinot Gris Pinot Noir Riesling Rose Sangiovese Sauvignon Blanc Shiraz Syrah Zinfandel

2nd Choice:

-Choose one- Beaujolais Burgundy Cabernet Chablis Chardonnay Fume Blanc Gewurtztraminer Montepulciano Petit Syrah Pinot Grigio Pinot Gris Pinot Noir Riesling Rose Sangiovese Sauvignon Blanc Shiraz Syrah Zinfandel

3rd Choice:

-Choose one- Beaujolais Burgundy Cabernet Chablis Chardonnay Fume Blanc Gewurtztraminer Montepulciano Petit Syrah Pinot Grigio Pinot Gris Pinot Noir Riesling Rose Sangiovese Sauvignon Blanc Shiraz Syrah Zinfandel

Advantage: Saves a lot of screen space. Easier for the user to verify her choices at a glance before submitting.
Disadvantage: If the list is very long, or the list items are longer than a few words, scanning inside a pull-down can be very difficult.

3. Text entry

Example:

Beaujolais
Burgundy
Cabernet
Chablis
Chardonnay
Fume Blanc
Gewurtztraminer
Montepulciano
Petit Syrah
Pinot Grigio
Pinot Gris
Pinot Noir
Riesling
Rose
Sangiovese
Sauvignon Blanc
Shiraz
Syrah
ZinfandelAdvantage: The user can see the ranking directly next to each item.
Disadvantage: There is too much room for data entry error, even with form validation rules.

Generally I prefer option #2—pull-down lists—because they take up the least space on the page. For a list of sentence-length items, however, radio groups are probably best. You could also create a list of abbreviations to represent long items (such as paragraphs), but this requires the user to take the extra step of interpreting the abbreviation before evaluating it.

Ultimately, the question should probably be written differently in order to avoid the cognitive overload of prioritizing a long list. But, as we all know, the designer doesn’t always have that option, hence the task at hand.