Overview
Status and Information messages give users information about events of objects, pages, or the application itself. For example: empty states, number of rows retrieved after a refresh action, system downtime, system errors. They are mostly initiated by the system and not immediate responses to user inputs.
Usage
Use Status and Information Messages to:
- Notify users of system events.
- Communicate why users can’t see any content in a page or component.
Don’t use status and information messages for:
- System responses to user inputs, see User Feedback Messages.
- Supplementary information that educates or guides the user about the actions and choices they can make on a screen. Use Embedded Guidance instead.
- Messages shared between users within the system or about task-related messages. See Collaboration and Task Planning Messages.
<div> <div>Type</div> <div>Description</div> <div>Examples</div> </div> <div> <div><a href="https%3A%2F%2Fexperience.sap.com%2Finternal%2Ffiori-design-web%2Fmessage-strip%2F">Empty State</a></div> <div> <p>Data is not available or can’t be loaded because:</p> <ul> <li>there’s a technical issue that prevents data from loading, and which is beyond the scope of system (e.g., no connection to the internet or to a data provider)</li> <li>there’s a data retrieval issue that means no results are returned to a page</li> <li>the user removed all content on the page and there’s no data left</li> <li>it’s the first visit by the user to a page that has no pre-existing content</li> </ul> </div> <div> <p>1. “You’re not connected to the internet.”</p> <p>or</p> <p>“An internal error occurred. Please log in again. If the problem persists, contact your Administrator.”</p> <p>2. "Sorry! We can’t find the data you’re looking for. Please modify your request.”</p> <p>or</p> <p>“Sorry! You don’t have permission to access this page. Request access here.”</p> <p>3. “All archives removed successfully. You’re done!”</p> <p>4. “Welcome to the Chart Builder. Build and test new charts here before sharing them with others.”</p> </div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fr%2Fuz-4KDtMm8tlxBPSYnvbcK-UtDzLnvxt9n1H3uR6ROI">System Errors</a></div> <div>The product encounters an error that blocks the system, and the user or system administrator needs to take action to unblock the situation.</div> <div> <p>“An unexpected technical error occurred when processing your data action. Please contact your system administrator.”</p> <p>“Your Service Provider Certificate has expired. To renew your certificate, contact your administrator.”</p> </div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fr%2Fuz-4KDtMm8tlxBPSYnvbcK-UtDzLnvxt9n1H3uR6ROI">System Warnings</a></div> <div>Communicate a potential issue diagnosed by the system. The user is not blocked in their workflow.</div> <div> <p>“Your data has been updated successfully, but we can’t display the results because the dataset is too large.”</p> <p>“Your Service Provider Certificate will expire in 2 days. To renew your certificate, contact your administrator.”</p> </div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fr%2FUyFFCucqpMN6NBWKcPCXnZwnaQHxRJjXQOftBFcvf5U">Success</a></div> <div>Communicate that an action or event has been successful.</div> <div>“The instance is created. You’re all done!”</div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fr%2F97a4LD81t7BPydQRVZVaqiJMFQtKQpDEqtEtf8kkuM0">Information</a></div> <div>Communicate status or changes of the system that may be useful to users, but not critical.</div> <div>“Your import job for the following package has been queued.”</div> </div>
Empty State
The system falls into empty states when it can’t display content due to following reasons:
- First use – users haven’t visited the page before therefore, no content populates it yet.
- Error – Data can’t be loaded due to technical or unknown reasons.
- No results – The system can’t find any results that match with a user command, such as searching items or filtering the list.
- User cleared – the user has removed all content.
An empty state interrupts a designated user flow. Therefore, it’s important to explain to the user why the page is empty and, if appropriate, to inform them what actions can be taken to retrieve or create the expected content.
Choose the component and layout that best matches your use case.
<div> <div>Use Case</div> <div></div> <div>Messaging Component</div> </div> <div> <div>The entire page is not loaded.</div> <div>Default</div> <div> <p>Replace the content area with <a href="https%3A%2F%2Fexperience.sap.com%2Finternal%2Ffiori-design-web%2Fmessage-box%2F">Message Page</a>.</p> <p>Or</p> <p>A customized page that is composed of an illustration, a message, and a call to action. For details, see <a href="https%3A%2F%2Fexperience.sap.com%2Finternal%2Ffiori-design-web%2Flist-overview%2F">Empty States</a>.</p> </div> </div> <div> <div></div> <div>Helping users guess a desired result is important.</div> <div>Display a message in <a href="https%3A%2F%2Fexperience.sap.com%2Finternal%2Ffiori-design-web%2Fmessage-strip%2F">Message Strip</a> at the top of the page while keeping a default layout.</div> </div> <div> <div></div> <div>The page module includes “Creation” Nav Items.</div> <div>Display a message within a description section of the header area.</div> </div> <div> <div>The table (or the list) is empty.</div> <div></div> <div>Show message as the first and only item in the <a href="https%3A%2F%2Fexperience.sap.com%2Finternal%2Ffiori-design-web%2Fmessage-strip%2F%23empty-tables">empty table</a> (or the <a href="https%3A%2F%2Fsap.sharepoint.com%2Fr%2F2YieeOoO9OY5kwF339vMSpabD9IeiaUAyL6jaO20KIE%23empty-list">empty list</a>.) The header of the component is visible in this case.</div> </div> <div> <div>Components other than tables and lists are empty.</div> <div></div> <div> <p>Use an empty state if the UI component supports it.</p> <p>Otherwise, place <a href="https%3A%2F%2Fexperience.sap.com%2Finternal%2Ffiori-design-web%2Fmessage-strip%2F">Message Strip</a> near the target or, if there’s not enough space, replace the content area with a message in plain text.</p> </div> </div>
Best Practices
How to Display
- Use a correct semantic status. Information type is recommended unless there is a potential risk to the user (for example, data loss). In which case we recommend the Warning type.
- Choose icons or an image that explains the state best.
How to Write
<div> <div>Writing Best Practices</div> <div>Example</div> </div> <div> <div>If the page is empty due to a technical issue, start the sentence with “Sorry!” This error is not the user’s fault and we acknowledge that the situation is not agreeable for them.</div> <div>“Sorry! Something unexplained occurred. Please log in and try again.”</div> </div> <div> <div>If it’s a connection error, inform the user clearly so they know to reconnect.</div> <div></div> </div> <div> <div>If the user has cleared the screen of all content, confirm everything on the page has been removed and give the user positive feedback by congratulating them.</div> <div>“Congrats! All done.” Or “Great job! Your new space has been created.”</div> </div> <div> <div> <p>If the user arrives on the page for the first time:</p> <ul> <li>inform them where they are in the product</li> <li>provide a description of what the user can do here</li> <li>inform the user what type of content will appear here once they are done with the creation of new content</li> <li>provide a clear call to action (CTA) so the user can start the workflow without losing time</li> </ul> </div> <div>“Welcome to Folders! Folders lets you keep your team’s docs organized in one place. All your folders will be listed on this page. Create Folder.”</div> </div>
guideline
NoteThe first time visit empty state usually includes a fun illustration. Adopt a playful tone of voice for the text so that it fits to the illustration.
2
do
false
dont
false
System Errors
Users should be informed of critical system issues/status immediately, so they can take steps to resolve issues in a timely manner. For example:
- an unexpected issue is blocking an operation and users need to resume the operation manually
- the system detects an error while performing the scheduled check-up and this requires immediate action
System error messages can be displayed in different forms based on the relevance to the current context and urgency.
<div> <div>Use Case</div> <div></div> <div>Messaging Component</div> </div> <div> <div>The issue is related to the current context.</div> <div>Users need to acknowledge the issue.</div> <div>Message in <a href="https%3A%2F%2Fsap.sharepoint.com%2Fr%2F97a4LD81t7BPydQRVZVaqiJMFQtKQpDEqtEtf8kkuM0">Message Box</a>.</div> </div> <div> <div></div> <div>The issue blocks the page from being fully loaded and it’s okay to lock the entire page.</div> <div>Message in <a href="https%3A%2F%2Fexperience.sap.com%2Finternal%2Ffiori-design-web%2Fmessage-box%2F">Message Box</a>.</div> </div> <div> <div></div> <div>The issue affects the entire page, but the page should not be locked.</div> <div>Message in <a href="https%3A%2F%2Fexperience.sap.com%2Finternal%2Ffiori-design-web%2Flist-overview%2F">Message Strip</a> at top of the page.</div> </div> <div> <div></div> <div>The issue is only applied to a partial screen.</div> <div> <p>Show message in <a href="https%3A%2F%2Fexperience.sap.com%2Finternal%2Ffiori-design-web%2Fmessage-strip%2F">Message Strip</a> at top of the page or near the target if there’s enough space to make the message visible.</p> <p>Also, apply a semantic status to applied components, if possible.</p> </div> </div> <div> <div>The issue is not related to the current context.</div> <div></div> <div> <p>In general, communicate a message via <a href="https%3A%2F%2Fexperience.sap.com%2Finternal%2Ffiori-design-web%2Fresponsive-table%2F">Notifications</a>.</p> <p>Only use <a href="https%3A%2F%2Fexperience.sap.com%2Finternal%2Ffiori-design-web%2Fmessage-box%2F">Message Box</a> if the issue can significantly affect the system.</p> </div> </div>
Best Practices
How to Display
- Use the Error type of the component to emphasize its severity. If the issue is not critical, but has potential to cause critical issues, follow the guidelines in System Warnings.
- If the message is long and wrapped in the message box, apply 35rem as its width. This provides better readability.
How to Write
<div> <div>Writing Best Practices</div> <div>Example</div> </div> <div> <div>Always start a System Error message with “Sorry!” or “We’re sorry!”. This good customer service practice. SAP takes responsibility for technical errors in a transparent and customer service-oriented manner. Never blame your user!</div> <div>“Sorry! The data set is too large for us to display. Please change your selection to no more than xxx records.”</div> </div> <div> <div>If the cause of the error is known, describe this cause clearly and simply.</div> <div></div> </div> <div> <div> <p>If the user can take steps themselves to resolve the error:</p> <ul> <li>provide them with specific instructions in as simple a manner as you can</li> <li>use terms that map to your user’s world; don’t use technical language with which your user is not familiar</li> <li>use “Please” to request the user action. Errors cause users to feel frustrated or even angry. Using please reduces this friction, because shows that SAP recognizes the heightened emotional state of the user</li> </ul> </div> <div></div> </div>
2
do
false
dont
false
System Warnings
Sharing potential problems in the system with users can prevent more critical issues in the future. For example, if the user is informed that a storage is almost full, a timely warning gives them the option to increase the storage, so that the system can continuously run without capacity issues.
<div> <div>Use Case</div> <div></div> <div>Messaging Component</div> </div> <div> <div>The issue is related to the current context.</div> <div>Users need to acknowledge the issue.</div> <div>Message in <a href="https%3A%2F%2Fexperience.sap.com%2Finternal%2Ffiori-design-web%2Fmessage-box%2F">Message Box</a>.</div> </div> <div> <div></div> <div>The issue affects the entire page, but the page should not be locked.</div> <div>Message in <a href="https%3A%2F%2Fexperience.sap.com%2Finternal%2Ffiori-design-web%2Fmessage-strip%2F">Message Strip</a> at the top of the page.</div> </div> <div> <div></div> <div>The issue is only applied to a partial screen.</div> <div> <p>Show message in <a href="https%3A%2F%2Fsap.sharepoint.com%2Fr%2FJlvTMq7bW95Jj5AfZuJgcy4TvklXf_aYLarpI9oEfLU">Message Strip</a> at top of the page or near the target if there’s enough space to make the message visible.</p> <p>Also, apply a semantic status to applied components, if possible.</p> </div> </div> <div> <div>The issue is not related to the current context.</div> <div></div> <div>Message in <a href="https%3A%2F%2Fwww.sap.com%2Fr%2Fnf8CPy2lUWoafVqNka77IhJLBZigSMC9vtoP-X-IKAY">Notifications</a>.</div> </div>
Best Practices
How to Display
- Use Warning type of the component.
information
NoteIf the issue prevents the user from continuing the current user workflow, use System Errors type.
- If the message is long and wrapped in the message box, apply 35rem as its width. This provides better readability.
How to Write
- Alert the user of the issue that might cause a problem in the future, keeping the information simple, unambiguous, and specific. For example: “System downtime scheduled for maintenance activities. Your system will be down from [start date:time] to [end date:time]”
- If the user can choose to continue or to cancel their action, use a Confirmation message type. See User Feedback Messages
2
do
false
dont
false
Success
Use this type of message to communicate successful events in the system, for example, a completion of an operation without any issues. Success messages are an opportunity to make the user feel good about using the product.
<div> <div>Use Case</div> <div></div> <div>Messaging Component</div> </div> <div> <div>The issue is related to the current context.</div> <div>The issue should be acknowledged by users.</div> <div>Message in <a href="https%3A%2F%2Fexperience.sap.com%2Finternal%2Ffiori-design-web%2Fmessage-box%2F">Message Box</a>.</div> </div> <div> <div></div> <div>The screen should not be locked.</div> <div> <p>Show message in <a href="https%3A%2F%2Fexperience.sap.com%2Finternal%2Ffiori-design-web%2Fmessage-strip%2F">Message Strip</a> at top of the page or near the target if there’s enough space to make the message visible.</p> <p>Also, apply a semantic status to applied components, if possible.</p> </div> </div> <div> <div>The issue is not related to the current context.</div> <div></div> <div>Message in <a href="https%3A%2F%2Fwww.sap.com%2Fr%2Fnf8CPy2lUWoafVqNka77IhJLBZigSMC9vtoP-X-IKAY">Notification</a>.</div> </div>
Best Practices
How to Display
- Use Positive (or Success) type of the component.
- In case the message is more informative and doesn’t include any semantic status, see Information section.
- If the message is long and wrapped in Message Box, apply 35rem as its width. This provides better readability.
How to Write
<div> <div>Writing Best Practices</div> <div>Example</div> </div> <div> <div>First, congratulate the user for their success. This kind of encouragement makes them feel good about using our products and increases our NPS scores.</div> <div>“Congratulations! You’re all done.” Or “Nicely done!”</div> </div> <div> <div>Be specific about what the user has achieved and give them some visibility about the resulting state.</div> <div>“Congrats! Your model is published to the Catalog.”</div> </div> <div> <div>If system events are triggered, perhaps impacting other users, include this information into the message.</div> <div></div> </div>
2
do
false
dont
false
Information
When the system shares information that is not critical but useful to users, use this type of messaging. For example, announcements about feature updates.
<div> <div>Use Case</div> <div></div> <div>Messaging Component</div> </div> <div> <div>The information is relevant to the current context.</div> <div>Users need to acknowledge the information.</div> <div>Message in <a href="https%3A%2F%2Fexperience.sap.com%2Finternal%2Ffiori-design-web%2Fresponsive-table%2F">Message Box</a>.</div> </div> <div> <div></div> <div>The screen should not be locked.</div> <div> <p>Show message in <a href="https%3A%2F%2Fexperience.sap.com%2Finternal%2Ffiori-design-web%2Fmessage-strip%2F">Message Strip</a> at top of the page or near the target if there’s enough space to make the message visible.</p> <p>Also, apply a semantic status to applied components, if possible.</p> </div> </div> <div> <div>The information is not relevant to the current context.</div> <div></div> <div>Message in <a href="https%3A%2F%2Fwww.sap.com%2Fr%2Fnf8CPy2lUWoafVqNka77IhJLBZigSMC9vtoP-X-IKAY">Notification</a>.</div> </div>
Best Practices
How to Display
- Use Information type of the component.
- If the message is long and wrapped in Message Box, apply 35rem as its width. This provides better readability.
How to Write
- Be specific
- Be short and to the point
- Explain how this information benefits the user
- If appropriate, add a Read more link where users can drill to discover full details. For example: “We have some great new exploration features for you! Read more.”
2
do
false
dont
false
Accessibility
Visit Messaging – Accessibility to read accessibility considerations in messaging.
Resources
Support
If you have any questions or feedback about this page, please contact our team. For further information and questions in regards to the Design System, please visit the DNA Design SharePoint.