Illustrated Message

Joule / Components / Illustrated Message

Intro

Illustrated messages communicate empty, error, success, etc. states regarding Joule conversation content. They combine solution-oriented messages, engaging illustrations, and a conversational tone to enhance user experience.

Illustrated message in compact Joule panel (left) and regular Joule panel (right)

Usage

Refer to the SAP Fiori illustrated message component for guidance on usage.

  • Use the horizontal layout of the illustrated message and buttons. This helps conserve vertical space in the Joule panel area.
  • Use size S or smaller illustrations. This helps mitigate white space in the illustrated message container.
  • Only use colors defined in the Joule Foundations library for the call-to-action buttons. The colors defined in this library align with Joule theming.
  • Avoid providing a customizable width for the illustrated message for Joule. It is purposefully contained to fit the Joule chat and align with other Joule components.

Anatomy

A. Container

The container contains the illustrated message content.

B. Illustration (Optional)

The illustration is used to clarify the situation and add personality. The illustration should be appropriate for the use case and similar use cases should be handled consistently.

This section can display an illustration from an app-specific library or from one provided by the core design team’s illustration library.

C. Title

The title explains the reason for the specific state, preferably in a single line. Use the title to convey the essence of the message in simple language. Sentence case is recommended.

Default title text in standard use cases may be customized to fit precise use cases.

D. Description (Optional)

The description adds details and prompts the user on next steps, preferably in three sentences or less.

Default description text in the standard use cases may be customized to fit precise use cases.

E. Call to Actions (Optional)

The call-to-action buttons provide clear next steps for the user to act based on the illustrated message content.

Up to two buttons may be shown.

Illustrated message anatomy

States

Empty State

An empty state occurs when there is no content to display. Some common Joule use cases include:

  • Empty list
  • No notifications

"No task" empty state

Error State

An error state is caused by missing permissions, incorrect configuration, or a system issue. Some common Joule use cases include:

  • Unable to load or connect
  • No search results found

"Unable to load" error state

Success State

A success state is when an action has been performed without errors or warnings, meaning that the user has achieved a certain task or milestone. Some common Joule use cases include:

  • Reaching a daily goal or target
  • Completing a work task

"Task complete" success state

Custom State

The illustrated message component was designed to be flexible enough to handle custom use cases. Along with altering the actual text content (title, description, or call-to-action label), you can also use your own custom illustrations if they conform to the preset dimensions of the different available illustration/image sizes mentioned in the Adaptive Design section.

Adaptive Design

It is highly recommended to use the horizontal layout for the Joule illustrated message, along with the horizontal layout for the buttons (if there is more than one button) to conserve vertical space in the conversation area.

Horizontal and vertical illustrated message layouts with two buttons

It is highly recommended to use the small (S) or extra small (XS) size for the illustration to prevent white space in the illustrated message container.

Max Width

Illustrated messages fill the container width but are limited to a maximum size to ensure readability across devices. For narrow devices, vertical layouts may be used to preserve content visibility.

Maximum width illustrated messages in compact Joule panel (left) and expanded Joule panel (right)

Resources

Joule for Android: Illustrated Message

Joule for Web: Joule Web UI Kit Guidelines

Related Components/Patterns: Illustrated Message, Error Handling, Text Messages