Thumbnail List

Problem

It can be difficult to find a particular item on a VERTICAL LIST that is composed only by text because all items may look identical. You need to make each list item more distinct so that the list is easier to scan.

Solution

Design a VERTICAL LIST where in addition to the textual information, you also display a small illustration next to each list item.

An extensive list of items composed only with text can be visually monotonous and harder to scan. You can minimize this problem by complementing each list item with a thumbnail-size image that is illustrative of the content. Because each image can have distinct shapes and colors, they are easier to scan and interpret. The image should somehow be related to the content of the item, but you can use either a photo or an icon. This pattern is based on the patterns Thumbnail List 1, from where it got its name, or Thumbnail-and-Text List 2.

Thumbnails are usually aligned to the left. However, if images are optional, you can align them to the right so you can create a better defined axis (Figure 1). You can use a placeholder image for instances where images are not available, but keep in mind that if most images are placeholders the benefits of the THUMBNAIL LIST are lost.

Web Design Patterns for Mobile Devices

Figure 1. Right aligned THUMBNAIL LIST at Meltmedia.

This pattern can be used with the other variations of the VERTICAL LIST, such as the INFINITE LIST and the EXPANDING LIST.

***

Web Design Patterns for Mobile Devices
The Verg, 04/2012
Web Design Patterns for Mobile Devices
Engadget, 04/2012
Web Design Patterns for Mobile Devices
News Adventures, 04/2012
Web Design Patterns for Mobile Devices
Poetfreak, 04/2012
  • Thumbnail List in Designing Mobile Interfaces.
  • Thumbnail-and-Text List in Designing Interfaces.

  1. Hoober, Steven, and Eric Berkman. Designing Mobile Interfaces. Sebastopol, California: O'Reilly Media, 2011. 

  2. Tidwell, Jenifer. Designing Interfaces: Patterns for Effective Interaction Design. 2005. 2nd ed. Sebastopol, California: O'Reilly Media, 2011.