Avatar
The Avatar pattern provides a method to instantly associate a user (or item) with an object or application. It can display who is associated with a comment, post, attachment, share, etc... An avatar is typically a photograph of the person, but it could be a person's initials or other representative graphic. It provides an additional human touch to the application.
- User: This avatar represents a user in an application.
- Item: This avatar might represent a product, project, group or other category in an application.
Appearance
Appearance characteristics for this pattern.
- Shape: Currently the required shape is a circle.
- Photo: This is a photo of the user or representative image.
- Initials: This is the first letter of the First and Last Names or a single initial if only one name.
- Item: This maybe used to
- Sizes: Refer to the Mobile Icon Guide for Avatars for more information (i.e. 24px, 48px, 72px, 144px).
Behavior
Common behaviors for this pattern.
- Animation: Sometimes an avatar may load with a fade in.
- Placeholder: In some cases a temporary profile image might display until the initials or photo are available. For example create a new user or profile.
- Initials: Do not show hyphens or other letters of middle names.
Usage
Usage guidelines for this pattern.
- Avatars may appear in any number of places. The key is for the same image, initials, or placeholder to appear for the same object instance throughout the application.
Related
Fig 1. Photo
Fig 2. Initials
Fig 3. Placeholder