Updated: December 12, 2022

SAPUI5 Version 1.120

Illustrated Message

sap.f.IllustratedMessage

Intro

An illustrated message is a combination of a solution-oriented message, engaging illustration, and conversational tone to better communicate an empty state than just a message alone.

An illustrated message turns a situation (even a negative situation) into a better experience for your users, while ensuring consistency. Through their human-centered approach, illustrated messages help to create a deeper connection with users by making them feel understood, valued, and respected.

When to Use

Use an illustrated message if:

You want to improve the user experience for one or more empty states or message states in your application.

Do not use an illustrated message if:

You want to use the illustration for decoration, as a simple image, or for something else. If you want to display a person or a product image, use the avatar. If you want to display an image, use the image control.
You want to display problem-oriented messages. Reconsider and check out the message handling guidelines and the UI text guidelines for messages.

Generic illustrated message

Components

An illustrated message consists of the following parts:

Illustration set (highly recommended)
Message headline (mandatory)
Message description (mandatory)
Call to action (optional)

Anatomy of an illustrated message

Illustration Set (1)

An illustrated message has a set of four UX illustrations per use case: dot, spot, dialog, and scene. Each illustration has a different size and level of detail. The illustration sizes are used at different breakpoints to ensure that the illustration is always appealing, regardless of the container size.

The illustrations help clarify the situation and add personality. It’s essential that the illustration is appropriate for the use case and the container you’re using (such as a dialog or card), and that similar use cases are handled consistently. The control automatically comes with illustrations for a set of dedicated use cases (see information box). You can use these illustrations if your use case is the same.

Each illustration is a themeable SVG file. Illustrations require an alternative text and are generally non-interactive. They do not require a tooltip.

Illustration set with all four illustration sizes: dot, spot, dialog, scene

Information

The following use cases are already covered by the illustrated message control:

Before Search
No Activities
No Data
No Email
No Entries
No Notifications
No Saved Items
No Search Results
No Tasks
Unable to Load
Unable to Upload

Check out all use cases in the SAPUI5 samples.

Message Headline (2)

The headline explains the reason for the empty state, preferably in a single line. Use the headline to convey the essence of your message in simple, engaging language.

Write the headline in sentence case without an ending period (.) or other punctuation. Exceptions include situations where you may want to emphasize the headline with an exclamation mark (!) or question mark (?).

If you are using one of the standard use cases, you can refine the default text to tailor it to your specific app use case.

Message Description (3)

The description adds details and tells the user what to do next, in three sentences or less. Write the description in sentence case with proper punctuation. You can also set links in the description (property: enableFormattedText).

If you are using one of the standard use cases, you can refine the default text to tailor it to your specific app use case.

Call to Action (4)

If there is a clear next step, include a call to action, ideally in the form of a button.

Adaptiveness

Default Behavior

By default, the illustrated message control adapts its appearance according to the size of the container in which it is placed (such as a dialog or card).

Fixed Sizes

Alternatively, you can set a fixed size for the illustrated message. This is only recommended in use cases where a page has multiple empty states in various controls and the illustrated message container is always rather big, resulting in several larger illustrated messages on one screen and hence a lot of unnecessary scrolling. For example, long object pages can contain several UI elements that are all initially empty. Be aware that the illustrated message remains fixed in such cases, also when the user resizes the window.

The illustrated message control offers the following predefined fixed sizes:

Base – Smallest size. Not enough space to display an illustration.
Dot – Size for very small containers, such as tiles, cards, and table cells.
Spot – Size for small containers, such as cards.
Dialog – Size for medium-sized containers, such as dialogs.
Scene – Size for large controls, such as tables and empty states for an entire screen.

Base size in a cell

Dot size in a small card or tile

Spot size in a card

Dialog size

Scene size in an empty page

Examples

Here are some examples of how illustrated messages can enhance the user experience for different empty states.

Empty state - Empty calendar

Empty state - File upload

Empty state - Search

Empty state - Page not found

Empty state - Error page

Empty state - No results

Top Tips

Turn a negative event into a positive one

Take time to design and write a solution-oriented message. Be precise in your wording and take care to use appropriate illustrations.

Reflect on old message habits. Have a look at the “Don’t” example. Why doesn’t this message work?

The image ignores cultural considerations, doesn’t follow the illustration guidelines, and is unlikely to delight the user.
The message text is problem-oriented and not helpful. It leaves the user alone with the problem and is likely to trigger negative emotions.

Ideally, a negative event in a software product doesn’t generate negative emotions. A well-designed illustrated message that leaves users feeling understood and valued can result in a neutral or even positive feeling. Remember that users will benefit from thoughtfully crafted illustrated messages every time they encounter them – perhaps even daily.

Don't

Unhelpful, problem-focused message with negative imagery

Helpful message with appropriate illustration and possible solutions

Always write a coherent, solution-oriented message

Make sure that the illustration, message, and call to action work together as one to clarify the situation. Always provide a message. Never use an illustration without a message. A message combined with an illustration is more powerful than a message alone.