ComponentCraft conventionFoundational
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 page
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.
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.
Often used with
These usually appear in the same screen or the same decision.
- CardComponent
- Activity TimelinesPattern
- CollaborationPattern