Avatar
A visual identifier for a person or entity, which needs a name alongside it more often than not.
Definition
An avatar represents a user or organisation with an image, initials or a generated placeholder. It aids recognition in dense interfaces and identifies nobody on its own.
Craft convention. True because the industry converged on it. Breaking it costs familiarity, not correctness.
On this plate
Reach for this when
- Identifying people in collaborative interfaces.
- Comments, activity and presence.
Common mistakes
- Avatar without a name in permission-critical contexts.
- Broken image fallbacks.
- Initials logic that mangles non-Western names.
Requirements
- Fall back gracefully: image, then initials, then a neutral placeholder. Never a broken image.
- Generate initials carefully. Names vary enormously in structure across cultures, and single-word names are common.
- Provide the person's name as the accessible name, or hide the avatar from assistive technology when the name is already adjacent.
- In stacked groups, state the overflow count with an accessible label such as 'and 4 more'.
- Do not rely on colour-generated placeholders to distinguish people, since generated colours collide.
Fallbacks and identity
Do
- Define the fallback chain: photograph, then initials, then a neutral placeholder.
- Derive initials carefully, since name order and length vary by culture.
- Pair the avatar with a name wherever identity matters.
- Give the image an accessible name, or hide it when the name is already visible beside it.
Do not
- Use a coloured circle with initials as the only identifier in a list of similar names.
- Assume two initials, or that the first letter is the given name.
- Stack more than about four avatars before switching to a count.
- Let the placeholder look like a real photograph of somebody.
In practice
- i.
Two initials, one team
Where avatars stop identifyingThree members of a workspace shared the initials JS, rendered in three similar generated colours. In the activity feed, nobody could tell who had done what without hovering each one.
- ii.
The avatar stack with a plus four
OverflowFour faces and a plus four reads instantly. Twelve overlapping circles reads as decoration, and the names behind them are unreachable without a hover nobody discovers.
Local chart
CMP·024 · Region III · Grid F2
This entry and the entries it is stated to connect with. Each line is labelled with what the connection means.
Continue from here
Each link says what the connection is, so you can tell a principle from an alternative from a thing people mix this up with.
Principles behind this
The reasoning this solution is an application of.
- ImageryFND·051 · UI foundation
Often used with
These usually appear in the same screen or the same decision.
- CardCMP·022 · Component
- Activity TimelinesPAT·019 · Pattern
- CollaborationPAT·026 · Pattern
Related concept
Connected closely enough to change how you apply this.
- InternationalizationWRT·006 · UX writing