Avatar
Avatars provide a graphic representation to identify a person, organization, or object.
Page sections
Types
Generated provider initials
Icon
Generated user initials
Photo
Sizes
Usage
Use avatars for visually distinguishing different types of content, such as search results or claim types
Generated provider initials: Use in search results for providers that haven’t provided a photo (initials for first and last names).
Icon: Use in search results for facilities, search type-ahead for providers and medical groups, or claims for claim types.
Generated user initials: Use to identify family members and connect content to a member (initial for first name only).
Photo: Use when the provider or facility has provided a photo
Visual style
Generated provider initials
Icon
Generated user initials
Photo
Avatars should have a minimum of 16px spacing around them
Avoid photos that don’t fill the avatar mask
Avoid changing the colors of avatar elements
Accessibility
Keyboard/focus expectations
- Avatar and accompanying text only receives keyboard focus if serving as a link or button
- If the Avatar and accompanying text is not serving as a link or button, it does not receive keyboard focus
Screen reader expectations
- Current Design pattern: Avatar with Text
- Avatar is ignored by screen reader
- Accompanying text is announced. Ex. “John Smith, click/double tap to view information for a different family member.”
- Note: User experience should be the same with or without text. We want to avoid experiences such as: “Avatar.png” or “Rebecca Smith, Rebecca Smith.”