The illustrated message communicates empty, error, and success states through a combination of solution-oriented messages, engaging illustrations, and a conversational tone. The illustrated message turns a situation, even a negative one, into a better experience for your users while ensuring consistency.
Empty state view examples
Use the illustrated message when you want to improve the user experience for one or more message states in your application. The illustrated message’s content should be concise but prioritize clear messaging.
Turn a negative event into a positive one
- Take time to design and write a solution-oriented message. Be precise in your wording and use appropriate illustrations.
- Ideally, a negative event in a software product doesn’t generate negative emotions. A well-designed illustrated message that leaves users feeling understood and valued can result in a neutral or even positive feeling. Remember that users will benefit from thoughtfully crafted illustrated messages every time they encounter them – perhaps even daily.
Always write a coherent, solution-oriented message
Make sure that the illustration, message, and call to action work together as one to clarify the situation. Always provide a message. Never use an illustration without a message. A message combined with an illustration is more powerful than a message alone.
Tailor your message to your use case
- Always ensure that the default text fits in the context. If not, replace it or make it more precise.
Default text: No results found / Try changing your search criteria.
Adapted text (supplier table used with a filter bar): No suppliers found / Try adjusting your filter settings.
- Recommended: Replace generic terms such as “data” and “object” with your specific business object.
Default text: There’s no data yet / When there is you’ll see it here.
Adapted text: There are no orders yet / When there are, you’ll see them here.
A. Illustration (Optional)
The illustration helps clarify the situation and add personality. The illustration should be appropriate for the use case and the container being used (such as a dialog or card), and that similar use cases are handled consistently.
This section can display an illustration from an app-specific library, or an one provided by the core design team’s illustration library.
The title explains the reason for the specific state, preferably in a single line. Use the title to convey the essence of your message in simple language. We recommend writing the title in sentence case.
If you are using one of the standard use cases, you can refine the default text and customize it to the precise use case.
C. Description (Optional)
The description adds details and prompts the user what to do next, preferably in two sentences or less. Like the title, the description’s default text can also be customized to fit a specific use case.
C. Call to Action (Optional)
If there is a clear next step, include a maximum of one call to action button.
It is recommended to use the following five fixed mobile illustration sizes for the following containers:
- Size Extra Large (XL-320×240)
Full screen page, full screen dialog
- Size Large (L-160×160)
Page section, larger dialogs, large cards (2×3, 2×2)
- Size Medium (M-92×92)
Page section, smaller dialogs, medium card (2×1)
- Size Small (S-64×64)
Smaller dialogs, small card (1×1)
- Size Extra Small (XS-48×48)
Smaller dialogs, small card (1×1)
An empty state is a moment in the user experience when there is no content to display. Some common use cases include:
- Empty list, table, or inbox
- No notifications or planned activities
- Before search
An error state is caused by missing permissions, incorrect configuration, or a system issue. Some common use cases include:
- Unable to load, upload, or connect
- No search results found