UI Pattern and Guidelines
  • User interface pattern guidelines
  • Foundations
    • Accessibility
    • States
    • Colours
    • Typography
    • Grid and layout
    • Icons
    • Data Visualisation
  • Components
    • Avatar
    • Badge
    • Breadcrumb
    • Button group / Select button
    • Button
    • Card
    • Checkbox
    • Contained button
    • Container
    • Counter
    • Divider
    • Empty state
    • Error page
    • Form Fields
    • Footer
    • Icons
    • Legal
    • Link
    • Lists
    • Loader
    • Modal
    • Navigation
    • Notification
    • Pagination
    • Popover
    • Progress bar
    • Radio button
    • Scroll bar
    • Slider
    • Status
    • Switch
    • Table
    • Tabs
    • Tag
    • Titles
    • Tooltip
    • Uploader
Powered by GitBook
On this page
  • Usage
  • Best practices

Was this helpful?

  1. Components

Avatar

PreviousData VisualisationNextBadge

Last updated 4 years ago

Was this helpful?

Usage

An avatar is used to show a thumbnail representation of a user, client, or business in the user interface. It can contain letters over a coloured background or an image uploaded by the user.

It's defined in two (36px or 56px) sizes and can be applied to the user interface in places such as tables or lists, or primary navigation.

Best practices

  • If the user image is not defined, use the following as a fallback:

    • User’s first name and last name initials

    • Initial letter of the user email or initial letter

    • Any other available user identifier on the interface

    • Use consistent colour-coding to always represent the user the same way across the UI

    • Apply colour-coding as defined in the accessibility guidelines for colour contrast when dark text is placed on a light background, and make sure that the colour contrast between the text and background passes the AA level accessibility check

  • Avoid using icons or words to represent single user

  • An icon with a plus can be used in tables to express multiple users