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

User initials add an 80px size for use in the family picker

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.”
↑ Back to top