Last Update: June 27, 2024
Platform: Web
Designer: Michael Laverty, Mark Thomas Darby
Intro
We are looking for a standardized solution to offer the user supporting information in the UI using icons and popovers. The components we use for this are standard Fiori components: help icon (sap-icon://sys-help) and popover.
Positioning of the Field Help popover box
Usage
The “Field Help” popover displays additional information about an object compactly and without leaving the page. Technically the popover can contain various UI elements. In SuccessFactors, we recommend keeping the Field Help popover simple and understandable.
Note: Only content such as regular text, formatted text and links may be used. The section UX Writing Guidance in this chapter gives further recommendation for the creation of Field Help content.
Types
Non modal Type: In general popover can be used as non modal or modal UI element. However, for Field Help popovers we recommend to use only non modal popovers.
Placement Types: The placement type defines how the popover will be positioned on the screen in relation to its trigger. The default placement is “Right”: the popover appears to the right of the object it relates to.
If the placement type is set to “Auto”, the position of the popover in relation to the reference control is determined automatically, depending on the available space.
Structure & Components
For the “Field Help” popover, we recommend that the header and footer are generally optional.
Note: To keep the popover as simple as possible, we don't recommend, using action buttons in the footer to keep the popover as simple as possible. The other elements are as follows:
Behavior & Interaction
Opening a Field Help Popover:
The user opens a popover by clicking an object represented by the field help icon (sap-icon://sys-help) .
Closing a Field Help Popover:
The popover is closed when the user clicks outside the popover or clicks a link within the popover.
Responsiveness & Adaptiveness
The width of the Field Help popover should generally be designed so that the popup can be displayed on "S"-size screens. If this is not possible, the popup should behave responsively and the content should follow the screen narrowing: text lines will break.
Application-specific examples
Popover examples from People Profile
UX Writing Guidance
When creating a field help text:
- Keep it short, clear, and precise.
- Use no more than 160 characters of full sentences with periods.
- Use the active voice and imperative mood.
- If the field help needs to refer to the user, address the user directly as “you”.
- Don´t begin with an article (a, an, the).
- Don´t reference the target component itself by name, or other UI components.
- Don´t include character (bold, italic) or paragraph formatting (no bullets or lists or steps), or symbols.
- Don´t duplicate instruction text already on the page.
- Don´t use links and additional control like “close”, “ok” or “done”.
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:
Do´s and Don´ts
Accessibility
Best practices for component annotation https://www.figma.com/file/yJdDtzzg6mgKEFgUybL1l1/SF-Best-Practices-per-Component?type=design&node-id=230-79167&mode=design&t=Yf9ai3MFz4bExDCE-0
Resources
Link to Fiori Guideline examples for Popover and Quickview:
https://experience.sap.com/internal/fiori-design-web/popover/ and https://experience.sap.com/internal/fiori-design-web/quickview/
Link Visual Core Wiki: https://wiki.one.int.sap/wiki/pages/viewpage.action?pageId=2698914869
SF Web Stencils Horizon Template
Field Help in the SF Web Stencils Horizon: https://www.figma.com/file/hvBFMT0PpUlahPAuKE2LhI/SF-Web-Stencils-V-1.21?type=design&node-id=17906-12558&mode=design&t=jScIXmQseGKt90AF-4