Last Update: Sept 01, 2022
Platform: Web
Designer: Matthias Stenzl
User Assistance Developer: Pierre Thomé
Intro
The message strip is a control that is used as an information bar. It contains information about an object or a status and can be embedded within the detail area of an object or page. OMP (Opportunity Marketplace) uses a special type of notifications in the SuccessFactor module. This is an extended standard version. An action has been provided in the messages strip. This deviates from the standard. A custom component was developed and is available in the project specific library of OMP.
Usage
You want to provide information within the detail area of an object.
You want to inform your user about a status of an object.
You want to warn your user about an issue.
You want to display information within the object page header, within a control, in the list of a list-detail layout, or above the page header.
Types
The following semantic message types are available.
- Information
- Warning
- Error
- Success
Structure & Components
In the message strip we have the following components:
- Icon - which indicates the type of the message at the beginning of the UI elements.
- Text - the text should be short and easy to understand. A message strip with two or more textlines is not recommended.
- Link - enables navigation to further information on other sites
- Action button - (SuccessFactors specific) provides immediate action from the message strip
- X-Control - to close the UI element
Behavior & Interaction
The message strip acts as an information bar. If you want to display a status related to an object, keep the interaction static and do not show the Close button.
- The app team can add a link in case more content is useful for the user to understand a situation.
- Clicking the Close button on the right-hand side hides the message strip. The app team can determine whether the message strip comes back on page reload, the next visit or never
- In SuccessFactors we allowing an action button at the end of the message text in the message strip. This behavior deviates from the standard UI element. A custom component was developed and is available in the project specific library of OMP.
The action button does not replace the actual function in the UI. Depending on the configuration, the message strip can be closed with an x-control. The initial function should still be visible on the UI and is only shown additionally on the message strip.
Responsiveness and Adaptiveness
The message strip is fully responsive. Icons within the message strip are displayed to the left (custom icons) or right (Closeaction) of the message. Text and links behave differently and wrap.
If you place the control within the detail area, it will always use 100% of the width and react to the responsiveness of the container.
UX Writing Guidance
When creating a text for a message strip:
- Keep the content of the message short and crisp.
- More than two lines are not recommended.
- Don´t use abbreviations.
- Don't use synonyms.
- Make sure the Semantic Notification / Message icons are used.
The following links point to:
- a chapters in the Frontify UX Guideline for additional information: About UX Writing
- the page: SAP SuccessFactors HXM Suite - Product Assistance: SAP SuccessFactors HXM Suite
For questions to the UA Team, please use the following DL:
A message strip:
- provides information related to the object in the object header, such as the object status.
- provides information within the detail area of an object.
- informs users about a status of an object.
- warns users about an issue.
Don’t write a message strip with two or more lines.
Write messages in sentence style.
Capital letter at the beginning, period at the end.
Don’t use the words “success“ or “successfully” in success message strips.
Example
Accessibility
Resources
Link to the project specific library of OMP. https://github.wdf.sap.corp/pages/xweb/omp/?path=/docs/features-landingpage-newnotification–default#
Reference to the standard UI element: In the Fiori Design Guideline exits a chapter "Message Strip": https://experience.sap.com/fiori-design-web/message-strip/