4ourth Mobile Touch Template
Design for people, not pixels with this handy, wallet-sized inspection and design tool, only $10. Order yours now
Mobile Interaction Design Patterns Poster
Every pattern from the book and this wiki, plus easy-to-follow relationships, and key information on sizes for readability and touch. Order now
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.
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.
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.
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.
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.