Updated: February 15, 2023

Empty State View

Intro

When mobile applications do not have access to or can not show data, an Empty State View can be used as a fallback to provide users with messaging about what has happened and what to do next. They can appear in, but are not limited to, cards or page types such as chart cards, chart floor plans, and chart headers.

Empty state view examples
Empty state view examples

Anatomy

A. Illustration (optional)

Only charts in full-screen mode display an illustration. This section can display a custom illustration or an illustration provided by Fiori Moments.

B. Title

The title explains the reason for the empty state, preferably in a single line.

C. Description

Descriptions add details and tell the user what to do next, in three lines or less. Only charts in full-screen mode provide a description.

Empty state view anatomy
Empty state view anatomy

Resources

Related Components: Banners, Inline Errors
Related Web Articles: Designing for Empty States, Illustrated Message