Differences between revisions 5 and 6
Revision 5 as of 2010-10-14 06:11:43
Size: 3522
Editor: shoobe01
Comment:
Revision 6 as of 2010-10-14 06:45:22
Size: 3536
Editor: shoobe01
Comment:
Deletions are marked like this. Additions are marked like this.
Line 5: Line 5:
{{attachment:vertical-list.png}} {{attachment:vertical-list.png|align="right"}}

Problem

Display a set of information, usually text or a text-representation, that uses horizontal space inefficiently.

Solution

A Vertical List allows inefficient use of horizontal space for each item by permitting them to use the entire allocated space. This may be the entire viewport, or a portion of it.

Items are then listed serially, using vertical space

In this definition, text (at least in western languages) uses horizontal space inefficiently, or greedily. It cannot be easily repurposed to be signficantly narrower, at an angle or vertical. Vertical lists are lists of text, or text-centric lists with supporting information. See thumbnail lists.

Variations

Most variations of the vertical list have notable interactive variations, so are discussed as separate patterns:

  • Infinite Lists

  • Thumbnail Lists

  • Select Lists

Other variations are largely in visual display options, too numerous to list.

Additional features may be added to vertical lists, most notably Location Jump, Search Within, and Filter & Sort.

Circular lists are strongly encouraged, but dead-end lists that do not cycle back to the top may be a better choice for certain datasets.

Interaction Details

Selection of an item in the list will perform an action, such as viewing details of the selected item.

Scrolling acceleration, even on scroll-and-select devices, should be used to allow covering large amounts of ground without resorting to other methods. Even if other methods are provided, the user may prefer this or may not discover them.

Circular lists should almost always be used. When the end of the list is reached, another scroll action will continue, starting at the other end of the list.

When the end of the list is reached, acceleration may be cancelled and the list stopped or slowed dramatically, to indicate a change.

Presentation Details

The text label for the item should generally be aligned left. Order should be clear from the label; e.g. if in alphabetical order by last name, list the last name first or use alignment so all last names align, for easy scanning.

Additional information may be presented on a second (or third) line, but must be indented, smaller and/or reduced in contrast so the primary label line is clear.

Divisions between items must be clear. This may be via divider lines, "greenbar" alternating colors, or simple space.

Location Within widgets (or alternatives) should be used to indicate the position in the list and the total list size, in addition to the use of Scrollbars.

A break indicator, or top-of-list label, should usually be presented at the first item in the list, to indicate circular scrolling. Especially on smaller lists, users may not be clear on the total size and scroll past it many times.

Antipatterns

Lists should scroll smoothly, pixel by pixel. Do not scroll line by line unless this is a limitation of the equipment or OS in use.

Never use page scroll. When the end of the viewport is reached, the next item in line will appear. Do not jump and load an entire page (viewport worth) of information, with the next selectable item at the top.

Use caution in selecting background and highlight colors. Make sure all users, in all lighting conditions can both read the text and differentiate between selected and un-selected items.

Examples

Vertical List (last edited 2013-04-10 23:57:34 by shoobe01)