Intro
Message pages give feedback to the user when an app or list is empty, or when an error has occurred. There are different use cases in which a message page can be shown. The layout is the same, but the text and icon can change depending on the use case. You can use the message page in the following situations:
- Filtering with no results
- Searching with no results
- Empty app
- Too many items
- Item saved as tile that is no longer available
- Error
Responsiveness
The size of the message page is adjusted to the amount of space available.
Size S (Smartphone)
Filtered with no results on smartphone
Size M (Tablet)
Message page with contextual filter on tablet
Size L (Desktop)
Message page with contextual filter on desktop
Types
The layout of the message page always behaves the same. The only differences are the texts and the icon, which change depending on the use case and the user’s location in the app. The different types are described below.
Filter
The user has set a filter and there are no results:
- Display the following text in the master list: No matching <entity> found. For example: “No matching items found.”
- The details page or full screen shows the item selected last.
A contextual filter is set by starting the app and there are no results:
- Display the following text in the master list: No matching <entity> found. For example: “No matching items found.”
- Display the following text on the details page or full screen: No matching <entity> found. Check the filter settings. For example: “No matching items found. Check the filter settings.”
- Show the filter icon.
No matching items found with set contextual filter
No matching items found, but still showing the item selected last in the detail area
Search
The user has searched for something but there are no results (also for search and filter at the same time):
- Display the following text in the master list: No matching <entity> found. For example: “No matching items found.”
- The details page or full screen shows the item selected last.
There are no items but the user performed a search anyway:
- Display the following text in the master list: No matching <entity> found. For example: “No matching items found.”
- The details page or full screen shows the last empty page use case.
Searching in an empty list
Showing the item selected last in the details area after an unsuccessful search
No Items
The app contains no items:
- Display the following text in the master list or on the details page or full screen: No <entities> are currently available. For example: “No items are currently available.” Show the product icon or an icon that matches your use case.
No products can be shown
Too Many Items
In this case, there are too many items in the master list. The user has to perform a search to see results:
- Display the following text in the master list or on the details page or full screen: Search for <business object (plural)>. For example: “Search for opportunities.” Show the search icon.
Loading
The app is loading (open, filter, sort…):
- Display the busy state in the master list. Use the busy state without any explanatory text, such as “Loading”.
- The details page or full screen show the item that was selected last.
Save as Tile
The item saved by the user is no longer available:
- No item is selected in the master list.
- Display the following text on the details page or full screen and specify the entity. Where relevant, you can also include the ID: This <entity> is no longer available. or <Entity> <ID> is no longer available. Examples: “This product is no longer available.” or “Purchase order 123456 is no longer available.” Show the product icon or an icon that matches your use case.
Error
The app cannot show any content due to an error:
- Display the following text in the master list: Sorry, we can’t find this page.
- If you can provide a link to the app start screen, display the following text on the details page or full screen: Sorry, we can’t find this page. <Link to app start page>. Show the document icon.
No products can be shown – With link
- Otherwise, display the following text on the details page or full screen: Sorry, we can’t find this page. Please check the URL you are using to call the app. Show the document icon.
No products can be shown
Components
The following UI elements can be placed on the message page:
- Icon
- Text or link
Guidelines
Different texts are displayed in different use cases. In general, follow these guidelines:
- Replace <business object (plural)> with the business object in the plural form and in lowercase.
- Sometimes your app will simply be loading. In that case, use the busy state without any explanatory text. Do not show the message No Data because this could be misleading.