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.
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.
- Thumbnail List in Designing Mobile Interfaces.
- Thumbnail-and-Text List in Designing Interfaces.