Overview
User feedback messages are meant to keep users informed of the system response in a timely manner so that users can proceed. The system can communicate this type of messages in the form of validation, confirmation, progress, success, or error. The type of user feedback messages depends on the kind of user input required to complete a task or the urgency of communicating an error or progress of a task initiated by the user.
Usage
Use user feedback messages to:
- Guide users while a task is in progress.
- Make users acknowledge any information to proceed.
- Communicate the progress of a task triggered by users.
- Provide assurance about the initiation and the immediate completion of a task triggered by them.
- Warn users of a potential error or help them in recovering from an error.
Don’t use user feedback messages if…
- Information or guidance should be always communicated with all users. Use Embedded Guidance instead.
- You want to communicate messages regarding system events that are not immediate responses to user interaction. See Status and Information Messages.
- For any messages between users within the system and task-related messages, see Collaboration and Task Planning Messages.
User feedback messages can be provided in different ways based on the context and user action.
<div> <div>Type</div> <div>Description</div> <div>Examples</div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fr%2FbRS_FbQp7To-Ke2E_6ARM4RtXKy87vY5S2XsOb1HqQo">Validation</a></div> <div>Validate user inputs and provide contextual help, if needed.</div> <div>The system checks user inputs in form fields.</div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fr%2FuKJnYEUnD_uy3vD4U4I1U3_bGWuwEHIkWheSVP631U4">Confirmation</a></div> <div>Double-check user commands to proceed before or during the execution of a command.</div> <div> <p>User tries to delete an important object.</p> <p>User tries to perform a command that takes a huge amount of time.</p> </div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fr%2FlWPlp0HacM5kJjlqqqg9aX-V4Jg87oiaOHCZxSm7uPs">Progress</a></div> <div>Inform the current progress of a user command.</div> <div>The system is performing a user command that takes longer than 1 second.</div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fr%2Fp-ET23-a4d_C7RZUpxD4lPU6DCzB56KHIaaRuddm-6Q">Success</a></div> <div>Share successful initiation or an immediate completion of a command.</div> <div>The Story has been successfully saved.</div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fr%2FGR1mXwMNVTS72nNk7zrlpsEVXcV9rp4e3ekYX2HswSU">Errors</a></div> <div>Share errors or potential issues in the system.</div> <div>The system can’t complete a user command at the moment due to technical issues.</div> </div>
Validation
This type of messaging communicates whether the user inputs are valid and provides contextual help if users need to correct the input. It can prevent the system from facing an error caused by invalid inputs during the execution of a command.
<div> <div>Use Case</div> <div>Messaging Components</div> </div> <div> <div>Provide immediate feedback to the input value of one field.</div> <div><a href="https%3A%2F%2Fexperience.sap.com%2Finternal%2Ffiori-design-web%2Fmessaging%2F%23value-states-for-input-fields">Value State Message</a> of the input field</div> </div> <div> <div>Validate input values with the finalizing action and communicate feedback on multiple fields.</div> <div>Highlighted input fields and aggregated messages in <a href="https%3A%2F%2Fexperience.sap.com%2Finternal%2Ffiori-design-web%2Fmessage-popover%2F">Message Popover</a></div> </div> <div> <div>Provide feedback related to multiple fields.</div> <div><a href="https%3A%2F%2Fexperience.sap.com%2Finternal%2Ffiori-design-web%2Fmessage-strip%2F">Message Strip</a> above all fields</div> </div> <div> <div>Feedback related to a list/tree of items.</div> <div><a href="https%3A%2F%2Fexperience.sap.com%2Finternal%2Ffiori-design-web%2Fmessage-strip%2F">Message Strip</a> above the list/tree</div> </div> <div> <div>Validate an input value with predefined rules and share the result.</div> <div> <p><a href="https%3A%2F%2Fexperience.sap.com%2Finternal%2Ffiori-design-web%2Fmessaging%2F%23value-states-for-input-fields">Value State Message</a> attached to the input field</p> <p>Or checklist in Popover attached to the input field</p> </div> </div>
Best Practices
How to Display
- Place a message close to the target to which it relates, so that users can easily relate it to the correct target.
- Use a correct semantic type based on severity of the message. For details, read When To Use Which Semantic Color.
How to Write
<div> <div>Writing Best Practices</div> <div>Example</div> </div> <div> <div>Be direct and provide users with accurate cues in an empathetic tone, to progress smoothly.</div> <div>“Looks like you’ve entered an incorrect password. Please try again with a different password.”</div> </div> <div> <div>Provide critical information first and where possible, provide a list.</div> <div> <p>“To make sure you’ve got a strong password please include the following characters:</p> <ul> <li>Upper case letter</li> <li>At least one special character such as @#$%*</li> <li>At least one numeric character”</li> </ul> </div> </div> <div> <div>Be reassuring and helpful.</div> <div>“If you’ve forgotten your password, click here to reset it.”</div> </div> <div> <div>In addition to pointing out an error during validation, propose a solution to correct the error as well.</div> <div>“Please provide at least one phone number.”</div> </div>
2
do
false
dont
false
In this example, the important information is at the end of the sentence. Provide the information to recover from the error, upfront and at the beginning of the message.
Confirmation
Use this messaging type to ask users to confirm their requests and take a decision before or during the execution of a user command.
<div> <div>Use Case</div> <div>Messaging Components</div> </div> <div> <div>The request has a big impact and may not be reversible.</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>The request is the most dangerous and rare thus additional failsafe can prevent a potential error.</div> <div>Message in <a href="https%3A%2F%2Fexperience.sap.com%2Finternal%2Ffiori-design-web%2Fmessage-box%2F">Message Box</a> that includes a non-standard action as a failsafe</div> </div> <div> <div>Additional input is required to proceed.</div> <div>Message with input fields in <a href="https%3A%2F%2Fexperience.sap.com%2Finternal%2Ffiori-design-web%2Fmessage-box%2F">Message Box</a></div> </div>
information
NoteIf Message Box doesn’t support additional input fields, use Dialog of the same semantic style instead.
Best Practices
How to Display
- Use a correct semantic type based on severity of the message. For details, read When To Use Which Semantic Color.
- Limit available actions up to 3. More actions can distract users and make it difficult for them to decide.
- Highlight the most desirable and primary action with Emphasized Button.
- If the message is long and wrapped in the message box, try 35rem as its width to improve readability.
- Use a non-standard action to prevent users from confirming an action by mistake. For example, add an extra checkbox to acknowledge, or ask users to type in a word.
How to Write
<div> <div>Writing Best Practices</div> <div>Example</div> </div> <div> <div>Restate the requested action that the user is about to confirm.</div> <div>“Overwrite the existing item?”</div> </div> <div> <div>Be specific and inform users about the consequence of a particular action.</div> <div>“Some dependencies are missing in the selection list, which might cause failures during import. Are you sure you want to continue with the export?”</div> </div> <div> <div>Use progressive disclosure to provide the most important information first that aids in decision making and disclose further information progressively, to avoid cognitive load.</div> <div> <p>“Saving the current story as the template will remove all data…</p> <p>Charts, tables, maps and input controls will become placeholders. All grid pages will be blank without any styles applied. All key influencers, unexpected values, and simulation charts generated by Smart Discovery will also be removed.”</p> </div> </div> <div> <div>Provide response options that will help users make easy and actionable decisions.</div> <div>“Before we can save your story, we need to save changes to the model. Save the model?”</div> </div> <div> <div>For actions with dangerous consequences, use non-standard action from the user to confirm, such as additional checkbox or input field.</div> <div> <p>“All changes except versions and comments will be discarded: “</p> <p>Option buttons: “Reset” and “Cancel”</p> </div> </div> <div> <div>Use language that prevents users from making hasty decisions, and provide decision-making labels that will make them think twice before proceeding to confirm an action that looks straightforward.</div> <div> <p>“Resetting the options will delete all saved changes.”</p> <p>Option buttons: “Reset Anyway” and “Cancel”</p> </div> </div>
2
do
false
dont
false
In this context, if we do not mention the consequence of this action and the user decides to proceed, there might be subsequent errors, which lead to frustration. It is important to let users know of the consequences beforehand.
Progress
Progress messaging informs users of the current progress of the operation that is triggered by a user command. This can empower users with more control by transparency. Use this messaging type when the response from the system can take more than 1 second.
<div> <div>Use Case</div> <div></div> <div>Messaging Components</div> </div> <div> <div>Entire screen is locked</div> <div>Execution of the command includes multiple steps</div> <div>Dialog with <a href="https%3A%2F%2Fexperience.sap.com%2Finternal%2Ffiori-design-web%2Fprogress-indicator%2F">Progress Indicator</a></div> </div> <div> <div></div> <div>Duration can be estimated</div> <div>Dialog with <a href="https%3A%2F%2Fexperience.sap.com%2Finternal%2Ffiori-design-web%2Fprogress-indicator%2F">Progress Indicator</a></div> </div> <div> <div></div> <div>Duration cannot be estimated</div> <div><a href="https%3A%2F%2Fexperience.sap.com%2Finternal%2Ffiori-design-web%2Fbusydialog%2F">Busy Dialog</a></div> </div> <div> <div>Part of the screen is locked</div> <div>Impacts several components updated at the same time</div> <div><a href="https%3A%2F%2Fexperience.sap.com%2Finternal%2Ffiori-design-web%2Fbusy-state%2F">Busy State</a> at a higher level or container that can include all affected components</div> </div> <div> <div></div> <div>Impacts only one component</div> <div><a href="https%3A%2F%2Fexperience.sap.com%2Finternal%2Ffiori-design-web%2Fbusy-state%2F">Busy State</a> at a component</div> </div> <div> <div></div> <div>Impacts only one component but the component doesn’t support a busy state</div> <div>Replace a component with <a href="https%3A%2F%2Fexperience.sap.com%2Finternal%2Ffiori-design-web%2Fbusy-indicator%2F">Busy Indicator</a> during the process</div> </div> <div> <div>Screen is not locked</div> <div>Impacts the status of an object and duration can be estimated</div> <div>Replace the status with <a href="https%3A%2F%2Fexperience.sap.com%2Finternal%2Ffiori-design-web%2Fprogress-indicator%2F">Progress Indicator</a> alternative status (if duration can’t be estimated)</div> </div> <div> <div></div> <div>Impacts the status of an object and duration can’t be estimated</div> <div>Replace the status with <a href="https%3A%2F%2Fexperience.sap.com%2Finternal%2Ffiori-design-web%2Fbusy-indicator%2F">Busy Indicator</a> or alternative status</div> </div> <div> <div></div> <div>Execution takes a long time and can be done in the background</div> <div> <p>Use <a href="https%3A%2F%2Fwww.sap.com%2Fr%2Fnf8CPy2lUWoafVqNka77IhJLBZigSMC9vtoP-X-IKAY">Notification</a> to share the message</p> <p>In case Notification Center is not available, use <a href="https%3A%2F%2Fexperience.sap.com%2Finternal%2Ffiori-design-web%2Fmessage-toast%2F">Message Toast</a> in the beginning of the operation</p> </div> </div> <div> <div></div> <div>Execution of the command takes a long time and can be done in the background applied on several objects</div> <div> <p>One <a href="https%3A%2F%2Fwww.sap.com%2Fr%2Fnf8CPy2lUWoafVqNka77IhJLBZigSMC9vtoP-X-IKAY">Notification</a> for each object to show the progress</p> <p>In case Notification Center is not available, use <a href="https%3A%2F%2Fexperience.sap.com%2Finternal%2Ffiori-design-web%2Fmessage-toast%2F">Message Toast</a> with aggregated messages in the beginning of the operation</p> </div> </div>
Best Practices
How to Display
- The progress message usually replaces or overlays the target. Choose the one that makes most sense in the context.
- Do not overwhelm users with multiple progress messages. Find a higher level or container to minimize the number of progress messages.
- Provide visual and animated indicators where possible.
2
do
false
Show one Busy State when every item is being loaded in the list.
dont
false
Show separate Busy States for each item in the list if every item is being loaded. This can be visually overwhelming.
How to Write
<div> <div>Writing Best Practice</div> <div>Example</div> </div> <div> <div>When you show a percentage indicator, state the task that is in progress as well as any consequence if a potential action by the user might disrupt the task.</div> <div> <p>“Acquiring Data</p> <p>Make sure that your session stays active and don’t refresh the browser until we finish fetching your data”</p> </div> </div> <div> <div>If a task takes more than 10 seconds to complete, communicate an estimated duration for completing the task so that the user is aware of the delay and can decide whether to continue or discontinue the task.</div> <div>“Creating the Template (this might take a minute)”</div> </div> <div> <div>Use a reassuring tone stating that the action by the user has already triggered the process.</div> <div>“Please wait while we export the content for you”</div> </div>
2
do
false
Explain that the task is in progress as the user has intended.
When the system can't estimate the time and is still trying to understand why the delay is happening, use "Create the Template (this is taking more than usual time)" instead.
dont
false
Show a busy indicator only.
Success
The system should immediately inform users of successful state of a command so that users can be confident. This mainly covers the beginning of the command. However, if the command has been completed at the start, use this type as well to share the event with users.
These kinds of User Feedback Messages work in a similar manner to Status and Information Messages, the main difference being the urgency of the notification.
<div> <div>Use Case</div> <div></div> <div>Messaging Components</div> </div> <div> <div>The operation has successfully started but its completion takes some time.</div> <div>The message includes relevant information that may call for actions from users.</div> <div>Share a message in <a href="https%3A%2F%2Fwww.sap.com%2Fr%2Fnf8CPy2lUWoafVqNka77IhJLBZigSMC9vtoP-X-IKAY">Notifications</a> and notify its completion in Notifications as well. See <a href="https%3A%2F%2Fwww.sap.com%2Fr%2FCzUegSZ7YP_UJDXDeCpvfQZoFN4Gein8nfktvPOIyN0">Status and Information Messages</a> for details.</div> </div> <div> <div></div> <div>The message is minimal, so it doesn’t require any follow-up actions.</div> <div>Message in <a href="https%3A%2F%2Fexperience.sap.com%2Finternal%2Ffiori-design-web%2Fmessage-toast%2F">Message Toast</a> (or <a href="https%3A%2F%2Fexperience.sap.com%2Finternal%2Ffiori-design-web%2Fmessage-strip%2F">Message Strip</a>) at the bottom of the page. And notify its completion in <a href="https%3A%2F%2Fwww.sap.com%2Fr%2Fnf8CPy2lUWoafVqNka77IhJLBZigSMC9vtoP-X-IKAY">Notifications</a> as well. See <a href="https%3A%2F%2Fwww.sap.com%2Fr%2FCzUegSZ7YP_UJDXDeCpvfQZoFN4Gein8nfktvPOIyN0">Status and Information Messages</a> for details.</div> </div> <div> <div>The operation was successfully completed at the start.</div> <div>Users need to acknowledge its completion or should be able to copy the content to the clipboard.</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>Users can see the result of its completion in the context.</div> <div>Message in <a href="https%3A%2F%2Fexperience.sap.com%2Finternal%2Ffiori-design-web%2Fmessage-toast%2F">Message Toast</a> (or <a href="https%3A%2F%2Fexperience.sap.com%2Finternal%2Ffiori-design-web%2Fmessage-strip%2F">Message Strip</a>) at the bottom of the page and make sure the change is clearly visible in the page.</div> </div> <div> <div></div> <div>There is no visual indicator where users can see the result of its completion.</div> <div> <p>Message in <a href="https%3A%2F%2Fexperience.sap.com%2Finternal%2Ffiori-design-web%2Fmessage-toast%2F">Message Toast</a> (or <a href="https%3A%2F%2Fexperience.sap.com%2Finternal%2Ffiori-design-web%2Fmessage-strip%2F">Message Strip</a>) at the bottom of the page.</p> <p>In case users should be reminded of its change, place the message in <a href="https%3A%2F%2Fexperience.sap.com%2Finternal%2Ffiori-design-web%2Fmessage-strip%2F">Message Strip</a> near the target or at the top of the page.</p> </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, use Information type of the component.
Message Toast (or ToastContainer) appears near the bottom of the page and not affected by scrolling. Make them persist long enough so that users can read the message (minimum: 3,000 ms).
If the message is long and wrapped in Message Box, apply 35rem as its width for better readability.
How to Write
<div> <div>Writing Best Practice</div> <div>Example</div> </div> <div> <div>Use a positive, rewarding, and personal tone to communicate the success of an action. Use words such as “you”, “your”, “we”, “our”</div> <div>“Your schedule was created successfully.”</div> </div> <div> <div>Communicate any subsequent action that the user needs to take, or share information that the user needs to be aware of, even after the successful completion of a task.</div> <div> <p>“Your data was successfully uploaded. We’ve selected a sample for you to work with owing to the large number of rows in your data set.</p> <p>Any work done on the sample will be applied to the full data set when you create the model.”</p> </div> </div>
2
do
false
Use a personal tone to communicate.
dont
false
Shorten the message.
Error
Share this type of message to inform users when the system is trying to proceed a user-triggered operation and encounters following erroneous cases:
- Errors – the operation can’t be performed with given user inputs.
- Limitations – the system doesn’t support the operation.
- Minor issues or warnings – the system can proceed but may run into errors later on.
The message can not only include what went wrong but also instruct users on next possible steps to resolve the error.
<div> <div>Use Case</div> <div>Messaging Components</div> </div> <div> <div>The issue should be acknowledged by users or you want to interrupt them while they are performing an action.</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>The issue is short and doesn’t require follow-up actions from users.</div> <div>Use <a href="https%3A%2F%2Fexperience.sap.com%2Finternal%2Ffiori-design-web%2Fmessage-toast%2F">Message Toast</a> (or <a href="https%3A%2F%2Fexperience.sap.com%2Finternal%2Ffiori-design-web%2Fmessage-strip%2F">Message Strip</a> at the bottom) to share the message.</div> </div> <div> <div>The issue affects the entire screen.</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>The issue affects a part of the 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>
Best Practices
How to Display
Use a right type based on characteristics of the message: Warning is for minor problems that may cause errors later or may be fixed easily, while Error type is for critical messages that blocks the process or should be resolved in a timely manner, if possible.
- By default, include the “X (Close)” button so that users can hide the message strip.
- For the message strip is displayed at the bottom, adding the “X (Close)” button is optional if its message doesn’t include any detailed information that users can refer to later. The message strip will be automatically dismissed after a specified time.
They are not affected by scrolling. Make them persist long enough so that users can read the message (minimum: 3,000 ms).
If the message is long and wrapped in the message box, apply 35rem as its width for better readability.
How to Write
<div> <div>Writing Best Practice</div> <div>Example</div> </div> <div> <div>Communicate what has gone wrong and why the error has occurred and how one can recover from the error. Use hyperlinks to jump to troubleshooting procedures or any additional information on the error.</div> <div> <p>“We couldn’t connect to your HANA system. Possible causes are: you’re using wrong credentials or CORS is not configured correctly. For more information, see our troubleshooting page."</p> <p>In the sentence above, "troubleshooting" is a link to a corresponding resource.</p> </div> </div> <div> <div>Be clear and concise by stating facts, being relevant and progressively disclosing information. Make sure you avoid technical jargon.</div> <div>“You may need additional privileges to perform this action. Please contact your administrator.”</div> </div> <div> <div>Be empathetic and give clear directions. Do not cause panic blaming the user. Use a positive and polite tone.</div> <div>“Accounts that use calculations or exception aggregation can take a little longer to copy. You can filter them up to speed things up.”</div> </div> <div> <div>Be conversational and engage with the user like you would in person using a consistent tone and style that matches with the SAP brand voice, which is clear, insightful, approachable, and optimistic</div> <div>“Sorry, we couldn’t share the story using email.”</div> </div>
2
do
false
Explain why the error has occurred and how the user can recover from the error.
dont
false
State the issue only. An instruction can help users resolve the issue.
Accessibility
Visit Messaging – Accessibility to read accessibility considerations in messaging.
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.