You must display a set of text-based information, as efficiently and simply as possible.

The list is the key organizational and presentation method used on all sorts of mobile devices.

The Vertical List simply stacks individual line items one above the other. Only a few are visible within the viewport, but many, many more may be in the data set.


Text (at least is western languages) is what I refer to as "horizontally inefficient." It greedily occupies most of it's space in the horizontal axis, but also uses a lot of that space to do it, and very often uses an unpredictable amount of horizontal space. Two labels for otherwise similar items may be of very different lengths. "Joe Smith" is just as much a person as "Narin Jaroensubphayanont" but the two labels could not be more different.

Text 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, such as Thumbnail Lists.

A Vertical List allows inefficient use of horizontal space by permitting each item to use the entire line. The width of the list may be the entire viewport, or a portion of it.

Items are then listed serially, using vertical space, also using either the entire viewport (minus Fixed Menus, Annunciator Rows, the page and list Title and so on) or a subset of it.


Most variations of the vertical list have notable interactive variations, so you can find them discussed as separate patterns:

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

You can add additional features to vertical lists to encourage their use, or increase the efficiency of the interaction. The most common are Location Jump, Search Within, and Sort & Filter.

Details are key to making the Vertical List work. Scrolling must be smooth, information must be clear and individual items must be well-labeled.

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.

A "circular list" is one in which when the end of the list is reached, another scroll action will jump back to the other end of the list, or just continue without interruption. 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, or for specific tasks. If the OS standard is for "dead end" lists, be sure to provide extra features such as Location Jump to allow easy return to the top.

Whether a circular or dead-end list, when the end of the list is reached, acceleration should be cancelled and the list stopped or slowed dramatically, to indicate a change.

Presentation Details

Lists, like all components, do not need to be full screen, if there is sufficient resolution. The list component must abide by the complete requirements outlined here, including titles, scrolling and labeling.

You should usually align text labels to the left, to assure the list can be scanned. The order should be clear from the label; e.g. if in alphabetical order by last name, list the last name first, or use subsidiary alignment so all last names are on a single column.

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.

Make sure the divisions between items are clear. This may be via divider lines, "greenbar" alternating colors, or simply enough space. The text itself can often form a suitable visual block, allowing surprisingly little white space to yield a suitable break between lines.

Use the Location Within widget to indicate the position in the list and the total list size. Naturally, scrollbars should be represented correctly, to indicate current position and give a sense of the relative size of the list. See the Scroll pattern for more details.

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 understand the total size and scroll past it many times.


Many lists, such as address books, may exist for the user with almost no content, or with many thousands of items. Be sure to consider all conditions when you make your design choices, and do not just pick one case. Also, be sure to consider the look and interaction of an empty list. Should it even be presented?

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. It rarely is anymore, so challenge your developers, and look at the documentation yourself, if they insist on doing it this way.

Similarly, 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.

Next: Infinite List

Discuss & Add

Please do not change content above this like, as it's a perfect match with the printed book. Everything else you want to add goes down here.


If you want to add examples (and we occasionally do also) add them here.

Make a new section

Just like this. If, for example, you want to argue about the differences between, say, Tidwell's Vertical Stack, and our general concept of the List, then add a section to discuss. If we're successful, we'll get to make a new edition and will take all these discussions into account.

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