Intro
The message page gives feedback to the user when an empty state occurs at page level, such as an empty app or list. The message page explains what information would normally appear on the page and how the user can proceed.
When To Use
Use the message page if:
You need to give feedback on an empty state at page level. You can use the message page in the following situations:
- Searching and/or filtering with no results
- Empty app
- Too many items (search or filtering required)
- Item saved as a tile that is no longer available
- Error
Do not use the message page if:
- You want to give feedback on empty states within UI elements, such as dialogs or tables. Use an illustrated message instead.
- The app is simply loading. In this case, use the busy state without an explanatory text.
Components
The message page follows the general message pattern for empty states. It contains an icon, a message headline, a message description, and an optional call to action.
(1) Icon
The icon in the message page is mandatory.
Exception: If you can’t find a suitable icon for your message, leave out the icon.
(2) Message Headline
The headline explains the reason for the empty state, preferably in a single line. Use the headline to convey the essence of your message in simple, engaging language.
Write the headline in sentence case without an ending period (.)
(3) Message Description
The description adds details and tells the user what to do next, in three sentences or less. Write the description in sentence case with proper punctuation. You can also set links in the description and use formatted text (such as bold, italic, underline, and bullet points).
(4) Call to Action (Optional)
If there is a clear next step, include a button or buttons with appropriate actions. Do not place more than 2 buttons on a page.
Responsiveness
The size of the message page adjusts to fit the available space.
Size S (Smartphone)
Search with no results on a smartphone
Size M (Tablet)
Search with no results on a tablet
Size L (Desktop)
Search with no results on a desktop device
Examples
The following examples show some typical message page use cases and how messages can be formatted.
Search
The user has searched for something but there are no results:
- Icon: Search
- Message headline: No matching items found
- Message description: Try changing your search criteria.
Search with no results
No Items
The app contains no items (here: suppliers).
- Icon: Product icon, or an icon that matches your use case.
- Message headline: There are no suppliers yet
- Message description: When there are, you’ll see them here.
No products can be shown
Error
The app cannot show any content due to an error:
- Icon: Document
- Message headline: Sorry, we can’t find this page
- Message description: Please check the URL you are using to call the app.
Error case – With link
Formatted Text and Buttons
Message page with buttons
Message page with formatted text
Top Tips
- Always include an icon, a message headline and a description with further details.
- Do not show only the state of the message (like error or warning), but rather try to describe the problem. Help the user to recognize, diagnose, and resolve the issue.
- Keep your message as concise as possible.
- Do not show the No data message, which could mislead users.
Related Links
Elements and Controls
- Link (guidelines)
- Text (guidelines)
- Button (guidelines)
- Busy state (guidelines)
- Illustrated Message (guidelines)
- Empty States (guidelines)
Implementation
- Message Page (SAPUI5 samples)
- Message Page (SAPUI5 API reference)