UI Elements Display Avatar

Updated: October 2, 2019
SAPUI5 Version 1.70

Avatar

sap.f.Avatar

Intro

The avatar is a control for displaying images. These can be user profiles, user initials, placeholder images, or business-related images, such as product pictures.

Usage

Use the avatar if:

  • You want to display an image, initials, or placeholder for a user.
  • You want to display standardized images for business-related content (such as products, parts, product and company logos, ad campaign images, …).
  • You want to display product placeholder images.

Do not use the avatar if:

  • You want to include an image for any other use case. Instead, use the image control.
  • You want to display pictures in a carousel. Instead, use the carousel control.
Examples of a user image, user initials, and standard user placeholder icon
Examples of a user image, user initials, and standard user placeholder icon
Potential product image and product image placeholder
Potential product image and product image placeholder

Responsiveness

The avatar control is adaptive and has five predefined sizes. These are the same for both compact and cozy form factors:

 

Size rem Use for images in…
XS 2 rem Table list items
Card list items
S 3 rem Card headers
Card list items
M 4 rem App headers for small screen sizes
L 5 rem App headers for normal screen sizes
XL 7 rem App headers for large screen sizes

If your use case requires it, you can also set a custom size.

Predefined sizes: XS, S, M, L, XL
Predefined sizes: XS, S, M, L, XL
Predefined sizes: XS, S, M, L, XL
Predefined sizes: XS, S, M, L, XL

Image Fit

You can use the imageFitType property to specify how images fit to the avatar. There are two options: Cover (default) and Contain.

Cover

The size of the image is scaled up to completely cover the control area. As a result, parts of the image may be outside the shape.

Use the Cover fit type if the focal point is in the center of the image.

Contain

The image is scaled down to fit into the control area. The entire image is displayed, but might not fully fill the shape. In this case, the control displays a default background color. The image itself is always centered inside the shape.

Use the Contain fit type for product pictures that need to be displayed in full.

Product image with the fit type 'cover' (left) and 'contain' (right)
Product image with the fit type 'cover' (left) and 'contain' (right)

Types

Avatar – User Image, Initials, or Placeholder

An avatar is a visual representation of a user in the digital space. Usually, an avatar displays the user in one of the following ways:

  • A user photo
  • The user’s initials
  • A placeholder icon instead of the user’s personal data (photo or initials)

Always display avatars in a circle. This ensures that all users are represented equally on the user interface.

Initials

User image, user initials, and standard user placeholder icon
User image, user initials, and standard user placeholder icon

The initials stand for the first name(s) and last name(s) of a person – for example, JD for Jane Doe, or MvV for Marjolein van Veen. Which name comes first depends on the language-specific settings.

Initials can have up to three alphabetical characters (A-Z, a-z). If more than 3 initials are required for longer names (such as Anna María Agustí Suárez), the gender-neutral placeholder icon is displayed instead. The placeholder is also used if the three letters don’t fit into the circle (for example, WWW).

Some languages don’t build on an alphabet, or don’t use initials at all. In such cases, the gender-neutral person icon is displayed instead.

User initials with 1, 2, and 3 characters
User initials with 1, 2, and 3 characters

Business Images

Business images display a product, company, object, logo, or other business-related content.

Always use a square for business images.

Examples of product images
Examples of product images

Placeholder Images

Placeholder images are used for both avatar and business images when no other image is available.

  • The default placeholder for an avatar is a gender-neutral person icon inside a circle.
  • The default placeholder for a business image is a neutral product icon inside a square.
Default person and product placeholders
Default person and product placeholders

You can specify your own the default placeholder icon for business images.

Always replace the default product icon if there is a more suitable icon for your use case and industry.

Product placeholder images with custom icons
Product placeholder images with custom icons

Placeholder Background

By default, the placeholder background color is set to blue (accent color 6). However, to add more visual variety to the UI, you can change the background color using one of the following options:

  • Accent colors – You can specify one of 10 different accent colors as the placeholder background color.
  • Random color – The control automatically picks a random color from the accent color palette.

All accent colors can be themed.

User initials in all ten accent colors
User initials in all ten accent colors

Guidelines

  • If you use a custom avatar size with initials or icons:
    • Make sure that the font size is consistent with the size of the control itself.
    • If your custom size is between two predefined sizes, use the font size for the smaller predefined size.
      Example: If your avatar is 5.5 rem (between sizes L and XL), use the font size for size L (2 rem).
  • For accessibility purposes, provide an alternative text for each avatar image in case the image is not available or can’t be displayed.
  • Optimize high-resolution images to avoid unnecessarily large files. Large image files can severely impede page performance.
Do
Custom placeholder size with appropriate custom font size
Custom placeholder size with appropriate custom font size
Don't
Custom placeholder size, but icon is too small
Custom placeholder size, but icon is too small

Styles

You can add a very subtle border to the avatar (property: ShowBorder).

Images with optional borders
Images with optional borders

Resources

Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.

Elements and Controls

Implementation