Avatar is used to identify users through display pictures or their initials.
An avatar consists of a display picture of the entity that it represents i.e. a user. In case a display picture is not available, it consists of a colored background and the initials of the name that it represents. And if somehow the initials can’t be fetched, a fallback glyph is used.
Avatar comes in 9 appearances -
Avatar comes in 2 sizes - small and regular.
The background color of an avatar should be generated dynamically in such a way that at the time of its creation a random color (from the available options) is assigned. Once assigned, the color should stay the same as long as that particular avatar is in use.
For example, an avatar generated for a user - Franklin Clinton, can look like following and it should look the same wherever it is used.Color assignment
Since an avatar can only show an image or the initials, there should be an option to show the full name of the entity. This is achieved by hovering over on the avatar to display a tooltip containing the full name.Hovering on an avatar
Avatars can be used individually or as a group if required. For example - if an activity is being performed by 4 users, an avatar group should be used to represent them.
To be specific, an avatar can be used in 3 ways as -
In order to show the additional entities that are not visible upfront, a popover having the list of full names of those additional entities is shown on hover.Showing list of names in an avatar group