Problem

A glanceable representation of a person should be provided, for use in various contact-listing contexts.

Solution

Text is accurate, and precise, for listing or otherwise describing people. However, text labels can be slow to read, and this is often undesirable in mobile context - scanability is often a key need.

Much like the Indicator pattern, an Avatar is an iconic image used to represent or support the label for anindividual, such as a contact in the address book.

This pattern is addressed separately from the Icon or Indicator because the Avatar image represents a real person, not a concept or action, and Because in many casesthe image itself cannot be controlled by designs or the user of the device.

Variations

The two basic types of Avatar are unusual in that they are by individual use,and both an -- and very often do -- appear in the same interface. The first, and most obvious, is any custom representation. This may be a photo, or a personalized icon or other graphic.

When no custom image is available, astir much first-time use, a generic icon, or set of icons, is often used instead, as a placeholder. Whenever possible, avoid truly generic icons.

As described in the Thumbnail List pattern, irrelevant images may be simply left out. The specifics of your interface will determine it this is a workable solution. During design, consider the likelihood of most or all items being populated with image content, and make decisions about use of the Avatar pattern accordingly.

Interaction Details

Avatar images may be selectable or not. They must follow the general paradigm of the context in which they are used. If used in a line item, such as an address book, they my be selectable as an extension of the name, as a part of the whole line, or not at all.

Always consider how clear the interaction which will follow selection of an Avatar can be communicated. If it is not perfectly clear, then add additional information, such as an overlay icon as described in the Icon pattern. Otherwise, consider simply making the Avatar image display only.

When uses alone, as the only reference to a user -- such as in threaded messaging or an SMS conversation -- the Avatar should always be selectable, and generally either display the user information, or offer option for interaction.

Presentation Details

Since the image itself often cannot be created, the designer must be careful when selecting borders, background, sizes and aspect ratios.

Avatar images are almost always square, to account for both landscape and portrait orientation source photos, without masking (black bars) on port of the image. or inconsistencies in the display and alignment of page items.

Generally, the long sides are cropped oft, and the short side is fitted to the image dimensions. Occasionally, it may be useful to crop the outer 10 or 20% of the whole image, to assure a recognizable face is in the image area. this depends more on the rendered size than the quality of source; smaller in eyes my to well with additional cropping.

Though some Avatar selection systems allow manual image cropping, this -- as well as photographing within the mobile device to generate images -- is not writhin the scope of discussion here, but should be designed to generate the best possible images.

When practical, use Avatars alongside text labels. When selectable, use the existing paradigms, discussed under the Link pattern, to denote an image is selectable.

When no supporting label text is associated with an Avatar image, consider use of the Tooltip, when practical and supported by the device's interaction model.

Antipatterns

Avoid using too many generic icons, or only have one as a placeholder.

Always keep in mind the value of the Avatar, and do not fill with arbitrary content to populate a flawed design.

Examples