search home list

Circular List

Users needs overview over a data set suitable for tabular display or they want to select an option before performing a command with the selected item.

Interactive Example

Press the Up and Down buttons to scroll the list or drag the thumb.

Context

The user needs browse a tabular data set. A list may also be used as a preselection of items to perform actions with.

Forces

The data set may be too large so a listbox may not be sufficient to browse the data set.

Solution

Provide a scrollable list capable of displaying column headers and a scroll bar. If the list loses focus the previously selected entry remains highlighted, however in a different colour. If a list contains more entries than it is capable to display a scrollbar shall be added to its right-hand side. Pressing one of the elements of the scrollbar shall select the associated list entry if there has not been a selection before. Selecting a list entry also updates the scrollbar. Pressing a list entry shall never directly cause an action, e.g. a call to be issued.

As shown in the interactive example above, the list is circular regarding its scrolling behaviour: When the first element is displayed and the user presses the Up arrow key, the list jumps to display the last item — the same is true for scrolling down.

Safety Impact

Lists are also a method of letting the user review an action before actually carrying it out. Therefore, lists used properly may reduce the risk of performing actions inadvertently.

The list pattern for safety-relevant environment does not use inertial scrolling, i.e., by grabbing and dragging the list as seen on the iPhone/iPad. The reason for this is that inertial scrolling hides controls — on an infrequently used device in safety-relevant environments this means that inexperienced users may forget how to use certain controls, especially if they introduce new ways of interaction.

Usability Impact

Serves error prevention instead of requiring the user to recover from an error.

Your opinion

Feel free to provide your comments, reports of usage of this pattern, or feedback in general!

Show all articles

What do you think?