Forms - Using Different List Types

Design Options for Lists | Dropdown List Box vs. List Box | Item List | Related Controls


Design Options for Lists

HTMLB offers several controls for displaying and editing data sets and for selecting from data sets.

  • Checkbox: multiple selection from small data sets (static)
  • Radio Button: single selection from small data sets (static)
  • List Box: Single selection from small data sets (static)
  • List Box: Single selection from small to medium data sets (dynamic or static)
  • Item List: Display of small to medium data sets in one column - ordered or unordered (static)
  • Table View: Display and editing of data sets in a variety of display variants - in ore ore more columns (dynamic), single- or multiple-selection possible

For information on the respective controls themselves, see Checkbox, Radio Button, List Box, Item List, and Table View.

Below we discuss the design options in more detail, especially with respect to overlapping application areas.

Note: The cases of checkbox and radio button groups are not discussed here; see Forms - Using Checkboxes and Forms - Using Radio Buttons for details on the layout options for these controls.

top Top


Dropdown List Box vs. List Box

The overview above showed that a list box is similar in function to a dropdown list box - both offer a list of items where users can select one item from, that is, both are single-selection lists. Here you find criteria for choosing between both controls. In addition, we provide hints when a set of radio buttons is the appropriate choice.

 

Figure 1: Dropdown list box (left) vs. list box

When Use a List Box?

  • If there is more space on the page
  • For larger item numbers
  • If users need to know the context of the current selection, that is, the item set or at least part of it
  • If users need to carefully consider their choice
  • For users with low mouse abilities

When Use a Dropdown List Box?

  • In table views
  • If space is limited - it occupies one line only
  • For smaller item numbers (up to 20 items)
  • If users only need to know the current selection, not the whole set
  • In shufflers

When Use Radio Buttons?

For very small item numbers (2-6) and if the users should immediately see all available alternatives, use radio buttons.

Use larger radio button sets only in special cases, where it is important that all options are visible, where users are untrained, and/or where an application imitates a paper-form, such as a Web-based questionnaire or ordering form.

Note: For multiple choices use checkboxes instead of radio buttons.

top Top


Item List vs. List Box

Both item lists and list boxes can be used for displaying a set of options. While list boxes can also be used for selecting items we focus here on the display aspect. Item lists are static lists with a "paper-like" appearance; they can be ordered or unordered. List boxes, however, have a "form-like" appearance and also may contain more items than are visible.

If you consider to use a list box, you may check whether a table might also be a valid design option. We also provide some hints for this option.

 

Figure 2: Item list (ordered, left) vs. list box

When Use an Item List?

  • In paper-like applications, such as news, articles, etc.
  • If it is possible to display all items or if the page or application as a whole can be scrolled
  • If the number of items is fixed

When Use a List Box?

  • In form-like applications, typically together with other form elements, such as input fields and selection elements
  • If a selection is needed
  • If space may not suffice to display the whole list
  • If the application or page cannot be scrolled in order to display more items
  • If bullets or numbers should not appear

When May a Table View Be Used?

In the following, we list scenarios, where a table view may be used instead of a list box. Note that this an option to consider, not a recommendation. The only exception is multiple-selection, which is available for the table view only.

Typically, you would use the table view in the transparent design for this application. Also note that a table view introduces "visual overhead", such as the title, column headers, and scroll buttons.

  • In form-like applications where the data form a separate information unit that cannot be mixed with fields
  • Where a multiple-column display is needed
  • Where scroll buttons are preferred over scrollbars (page-wise scrolling)
  • Where multiple-selection is needed (this is currently not possible with list boxes)

Note: Static multiple-selection can also be implemented using a checkbox group.

top Top


Related Controls

Checkbox, Item List, Dropdown List Box, List Box, Radio Button, Table View

top Top