Avatars
Avatars provide a graphic representation to identify a person, organization, or object.
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 typesGenerated 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 elementsAccessibility
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.”