Mobile - Avatar

Problem

Text is an accurate method for listing or describing people. But text labels can be slow to read, and therefore may not be the best solution in mobile content. A glanceable, scannable representation of a person should be provided for use in various contact-listing contexts.

Solution

Similar to the Indicator pattern, an Avatar is an iconic image used to represent or support the label for an individual. This pattern is distinct from the Icon or Indicator pattern because it represents a real person, not a concept or an action. Additionally, the Avatar cannot necessarily be controlled by the designer or developer, as this is left up to the user of the device.

Avatars may be custom representations of a user, such as a photo or a personalized graphic. They may also be generic icons, or icons from a generic set that the application provides for the user to select from. typically a generic Avatar icon serves as a placeholder in the application.

Avatar images may be selectable or not. For example, if an Avatar is used as part of an address book's design, the Avatar may be selectable as an extension of the name, as part of the whole address book entry, as its own entity, or not at all. If an Avatar is selectable, consider how the interaction which follows will display necessary information to the user. Hovering over an Avatar may reveal a tooltip or popover providing information to the user.

Whenever practical, use Avatars along with text labels.

Avatars are almost always square or circular, so the interface should allow for an area for the Avatar that is of equal dimensions both horizontally and vertically.

Examples