Avatar
A small image or initials standing for a person or organisation, used to make ownership and presence scannable.
An avatar turns “who” into something scannable. In a list of comments, assignments or activity, a recognisable face or initials is read faster than a name. The component is mostly a fallback chain: photo, then initials on a colour derived deterministically from the identifier, then a neutral placeholder. Deterministic colour matters — an avatar that changes colour between sessions stops being recognisable.
Two things routinely go wrong. Initials from a single `name` field break on mononyms, multi-part surnames and non-Latin scripts; derive them defensively and accept one character. And avatars must carry accessible names: a decorative image with an empty alt in a list of assignees leaves screen-reader users with a row of unattributed items. Use the person's name as the alt, or place it in adjacent text.
In practice
A project tool generated fallback colours from a random seed at render time. The same user appeared blue in one session and green in the next. Users reported “the wrong person is assigned”. Hashing the user id to a fixed palette entry made avatars stable and the reports stopped.
Where teams get it wrong
- Non-deterministic fallback colours, which break recognition between sessions.
- Initials logic that assumes two Latin-script name parts.
- Avatars with empty alt text in lists where they carry the only identity.
- Stacked group avatars with no overflow count and no way to see the full list.
- Loading full-size images into 24px circles.
( Learn more )
Related terms
All terms- BadgeA small, non-interactive marker showing a status or a count.
- CardA bounded container grouping related content about one thing — useful for scanning, expensive in vertical space.
- Data TableA grid of rows and columns for scanning, comparing and acting on records — the screen most B2B users spend their day inside.
- Status IndicatorA persistent signal of a system or record's current condition — distinct from a message about something that just happened.