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 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).
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 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.