Problem

A Vertical List is called for, but additional graphical information will assist in the user's understanding of items within the data set.

Solution

Use any type of Vertical List, but in addition to text information, add a small image (thumbnail) to the side of each item.

Information displayed, and interactivity with the listed items, is the same as for any other list view. Variations of the Vertical List can be employed as a Thumbnail List.

Variations

While the most common use is where the thumbnail is expected to be the key identifier, and therefore it is the left-most item, any arrangement is possible. Try to lead, either by position, size or contrast, with the key element (whether text or graphic) by which the user will index the list.

If any one line item has no thumbnail image, it can be loaded without any thumbnail image at all, to place additional emphasis on the data which is relevant and specific to the item.

Additional list types can be combined. The Thumbnail List may also be a *Select List* and can easily be loaded as an Infinite List.

Interaction Details

The addition of the thumbnail to the list items effects no real changes in the interaction from any other list type.

For lists of information like Address Books, additional options may be presented on screen or within options menus to encourage setting up more contacts with custom avatars. These options should also be presented for individual items, either within the details for the list item (or even when an item is in focus, but not yet selected) or within the detail or edit view for the item in question.

Presentation Details

Thumbnails are commonly cropped to a common size and shape, such as square. Sufficient room must be placed around the image to allow it to be differentiated from those on other lines, to be seen around the bezel, and for text adjacent to it to be readable.

Consider use of borders or shadows on thumbnails, so images masked to a color similar to the background, or which are in content similar to the background image or color, can still be detected as thumbnails.

When no specific thumbnail image is available, a default icon or other image may be used in its place.

Less attention may be paid to differentiating individual line items, as the thumbnails and their spacing (especially when used as the leading item) will solve this problem.

Antipatterns

Avoid using this pattern when there are not many unique thumbnails. Address books, for example, all seem to be Thumbnail Lists now, but are very often populated mostly or entirely with the default icon. This adds no value.

Even when only a few items have a default icon, carefully consider how to treat this. Images may be eliminated, a large set of default icons used, instead of just one, or some other semi-unique visual identifier could be loaded based on other known attributes.

Do not crop images if the image itself is the key identifier. In a list of people, the thumbnail is an icon, but if an image list is being displayed, aspect ratio and full-frame images (even if thumbnails) may be crucial to identify the correct image.

Pay as much attention to type size, color, spacing and weight as with a *Vertical List*. Do not assume all text is equally secondary. Some users will rely on text, the image may not be helpful, or text may help differentiate similar images.

If text is truly not helpful, do not use a Thumbnail List. Use another pattern, such as Carousel or Grid to make the selections.

Examples