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. Below are criteria specific to the illustrated message used in Joule.

Do

  • 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.

Don't

  • Don’t use colors other than those defined in the Joule Foundations library for the call-to-action buttons. The colors defined in this library align with Joule theming.
  • Don’t provide 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 two 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

Variations

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 example

Error State

An error state is caused by missing permissions, incorrect configuration, or a system issue. See [Joule error handling guideline] for more information on error handling. Some common Joule use cases include:

  • Unable to load or connect
  • No search results found

"Unable to load" error state example

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 example

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.

Various layouts for illustrated message. The variant of two buttons is shown for demonstration purposes.

Various layouts for illustrated message. The variant of two buttons is shown for demonstration purposes.

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

SAP for Android: Illustrated Message

SAP Fiori for Web: Joule Web UI Kit Guidelines

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