Updated: July 16, 2024

Illustrated Message

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.

Illustrated message – live example

When to Use

Do

Use the illustrated message:

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

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.
 Anatomy of an illustrated message
Anatomy of an illustrated message

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.

Information
The dot size is not yet available for web components, but will be added soon.

Scene

Illustrated message - scene size in an empty page
Illustrated message - scene size in an empty page

Dialog

Illustrated message - dialog size
Illustrated message - dialog size

Spot

Illustrated message - spot size for small containers, such as cards
Illustrated message - spot size for small containers, such as cards

Dot (coming soon)

Illustrated message - dot size for small cards or tiles
Illustrated message - dot size for small cards or tiles

Base

Illustrated message - base size with no image (for example, in a table cell)
Illustrated message - base size with no image (for example, in a table cell)

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

Components

Implementation