Vertical List

Problem

A LINEARIZED LAYOUT is a quite common layout that gives much emphasis to the vertical orientation. If you have information that is organized as a list, you need to have a method to efficiently display that content of this type of layout.

Solution

Display these chunks of information stacked vertically, spanning all the width of the screen and graphically dividing each item.

Along with the LINEARIZED LAYOUT this is perhaps the most common pattern that you will encounter when designing for mobile. Given that the width of the devices is not generous, you will invariably need to rely on the vertical space to accommodate most of the content. For most of these situations, this pattern or one of its variations will be used, such as: INFINITE LIST, THUMBNAIL LIST or EXPANDING LIST. Therefore, most of the recommendations given for this pattern also apply to the related patterns.

Generally, there are two different alternatives to the implementation of this pattern: one that only displays information; another where each list item works as a link — which sometimes can be a LINEARIZED MENU.

When the list items work as links you should optimize them for touch, you can use a TOUCH FRIENDLY TARGET for this. Each item ideally should only contain a link. Even if the item contains text with different hierarchies (Figure 1), you can wrap all those elements on an anchor tag rather than using only the title as a link. The result is similar to what can be attained with an ICEBERG TIP.

Web Design Patterns for Mobile Devices

Figure 1 — On the Authentic Jobs website, while each list item contains a diverse range of information with different hierarchies, the entire rectangle works as a link.

For this pattern to work effectively, each item should be clearly separated. You can use any design that visibly distinguishes items, such as: a horizontal line spanning the width of the screen; alternative color rows; typographic hierarchy; or just white space.

***

Web Design Patterns for Mobile Devices
Happy Cog, 04/2012
Web Design Patterns for Mobile Devices
Boston Globbe, 04/2012
Web Design Patterns for Mobile Devices
Redability, 04/2012