Intro

When to Use

Anatomy

Illustration Set (1)

Illustrated messages come in four sizes: large (L), medium (M), small (S), and extra small (XS). All sizes share the same distinct metaphor for the use case, but each size has a different level of detail and is used at different breakpoints to keep the illustration appealing, regardless of the container size.

Illustrations clarify the situation and add personality. Ensure the illustration fits the use case and container you're using, like a dialog or card, and handle similar use cases consistently. Each illustrated message includes a standard message headline and description, linked to a specific use case.

Illustrations are based on a themeable SVG file. They're generally non-interactive but can support user interaction with an optional call-to-action button if needed. They don't require tooltips or alternative text.

Message Headline (2)

The headline provides the main message for the illustration, preferably in a single line. Use it to convey the essence of your message in simple, engaging language. Each illustrated message comes with a default headline, which should be used unless there’s a compelling reason to change it.

Write the headline in sentence case without an ending period or other punctuation unless you need to use an exclamation mark or question mark for emphasis.

If you're using one of the standard use cases, you may adapt the default text to better fit your specific application, as long as the changes align with the intended purpose of the illustrated message.

Message Description (3)

The description adds details and guides the user on what to do next. Write the description in sentence case with proper punctuation, using three sentences or less. You can set links in the description using the property enableFormattedText.

If you're using one of the standard use cases, you may refine the default text to better suit your specific app use case. As for the message headline, each illustrated message includes a standard description. Modify it only when necessary.

Call to Action (4)

If there’s a clear next step or solution to the problem, include a call to action, ideally as a button.

Adaptiveness

Default Behavior

By default, the illustrated message component adapts its appearance according to the size of the container, such as a dialog or card.

Fixed Sizes

Alternatively, you can set a fixed size for the illustrated message. Do this only when a page contains multiple empty states in different UI elements with large illustrated message containers. This setup can lead to several larger illustrated messages on one screen, causing unnecessary scrolling. For example, long object pages can contain several UI elements that are initially empty. Note that the illustrated message size remains fixed even when the user resizes the window.

The illustrated message component offers the following predefined fixed sizes:

• Base: Smallest size, used when there’s not enough space to display an illustration.
• Extra Small (XS): For very small containers, like tiles, cards, and table cells.
• Small (S): For small containers, like cards.
• Medium (M): For medium-sized containers, like dialogs.
• Large (L): For large components, like tables and empty states for an entire screen.

Globalization and Localization

Examples

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

Best Practices

Stick to the standard use cases

Turn a negative event into a positive one

Craft a solution-oriented message using clear and precise language. Ensure the chosen illustration closely aligns with your specific use case.

Ideally, a negative event in a software product shouldn’t generate negative emotions. A well-designed illustrated message can leave users feeling understood and valued, resulting in a neutral or even positive experience. Users will benefit from thoughtfully crafted illustrated messages whenever they encounter them – possibly daily.

Follow the guidelines for UX illustrations and voice and tone closely for all illustrated messages.

Always write a coherent, solution-oriented message

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

Tailor your message to your use case

• Always make sure the default text fits the context. If you need to deviate from the standard, replace or refine the text to make it more specific.
  Example:
  Default text: No results found / Try changing your search criteria.
  Adapted text (use case: supplier table with a filter bar): No suppliers found / Try adjusting your search and filter criteria.
• 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 for using UX illustrations.
• Don't use predefined illustrations for use cases other than those they're designed for. This dilutes the strength and recognizability of the illustration in its defined use case.
• Don’t use an illustrated message purely for decorative purposes. Illustrated messages are meant to support specific UX use cases, not solely for visual enhancement.
• Don’t use an illustrated message just for its visual function, such as using the globe illustration as a metaphor for language selection. Always refer to the defined use cases and ensure illustrated messages are applied accordingly.

Related Links