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.

Illustrated message – live example

When to Use

Use the illustrated message:

• To improve the user experience for one or more empty states or message states in your application.

Don’t use the illustrated message:

• For decoration purposes or as a simple image.
• If you want to display a person or a product image. Use the avatar instead.
• To display problem-oriented messages.

Anatomy

1. Illustration: Helps clarify the situation. The illustration must always be paired with a message.
2. Headline: Explains the reason for the empty state, preferably in a single line.
3. Description: Adds details and, where appropriate, tells the user what to do next, in three lines or less.
4. Button (optional): If there is a clear next step, include a call to action (CTA) button.

Variants

An illustrated message has a set of five UX illustrations per use case: scene, dialog, spot, dot, and base. Each variant 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.

Scene

Dialog

Spot

Dot

Base

Behavior and Interaction

The illustrated message uses a button for the call to action.

Illustrated message – live example

Globalization and Localization

The illustrated message supports left-to-right (LTR) and right-to-left (RTL) reading directions.

Illustrated message – left-to-right

Illustrated message – right-to-left

Related Links