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
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.
[internal_only]Follow the voice and tone guidelines to speak the user’s language.[/internal_only]
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.
[internal_only]Follow the voice and tone guidelines.[/internal_only]
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.[internal_only] How would you respond to this message as a user? Would it be a good user experience?[/internal_only]
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.
[internal_only]For all illustrated messages, closely follow the guidelines for UX illustrations and voice and tone.[/internal_only]
Don't
Unhelpful, problem-focused message with negative imagery
Do
Helpful message with appropriate illustration and possible solutions
Always write a coherent, solution-oriented message
Don't
Illustration without a message and unrelated to the action
Do
Matching message, illustration, and action
Tailor your message to your use case
- Always ensure that the default text fits in the context. If not, replace it or make it more precise.
Example:
Default text: No results found / Try changing your search criteria.
Adapted text (supplier table used with a filter bar): No suppliers found / Try adjusting your filter settings. - Recommended: Replace generic terms like “data” and “object” with your specific business object. Example:
Default text: There’s no data yet / When there is you’ll see it here.
Adapted text: There are no orders yet / When there are, you’ll see them here.
Additional tips
- Never use other icons, images, or illustrations for an illustrated message. Always follow the guidelines on using UX illustrations.
- Don’t use the predefined illustrations for other use cases than the ones they were designed for. This would dilute the strength and recognizability of the illustration in the defined use case.
- Set alternative texts for the illustrations.
- [internal_only]When formulating message texts, follow the voice and tone guidelines and check out the message examples in the use case library.[/internal_only]
Related Links
Elements and Controls
- Empty States (guidelines)
- UX Illustrations (guidelines)
- Button (guidelines)
- Voice and Tone (internal GitHub)
- Use Case Library for Empty States (internal GitHub)
Implementation
- Illustrated Message (SAPUI5 samples)
- Illustrated Message (SAPUI5 API reference)
Visual Design
- Illustrated Message (visual design specification)
- Illustration Styles (visual design wiki)
Elements and Controls
- Empty States (guidelines)
- UX Illustrations (guidelines)
- Button (guidelines)
Implementation
- Illustrated Message (SAPUI5 samples)
- Illustrated Message (SAPUI5 API reference)