Intro
Illustrated Button is an enhanced feature for button, using illustrated message to show more detail description of the button. The Illustrated Button is a Successfactors specific component.
Usage
- There needs to be more description detail of the button.
- The button is the major action and needs more highlight.
- If you want to show the not clickable information, please use tile or card instead.
- There is enough context surrounding the button, or the button is very common used among different modules, for example: edit, delete...
Structure
The Illustrated Button contains two parts: the Tile container, and the Illustrated Message component around it.
No scrolling. The characters are limited. Please use short messages.
Behavior & Interaction
The Illustrated Button can be hovered and clicked. After click it will show focus style. (see tile behavior in UI5)
- Use "Tab" to select different Illustrated Buttons.
- Use "Enter" to finish click actions.
- Define the role as "Link" when click the button, the page will be refreshed or open a new window.
- Define the role as "Button" when click the button, there will open a dialog or popover.
- For Generic Tiles parameters, please check: https://wiki.wdf.sap.corp/wiki/pages/viewpage.action?pageId=2068436792
- For illustrated Message parameters, please check: https://wiki.wdf.sap.corp/wiki/display/visualcore/Illustrated+Message+Visual+Specification
Responsiveness & Adaptiveness
Responsive Illustrated Button shares the same behavior as Generic Tile: https://experience.sap.com/internal/fiori-design-web/tile/
Accessibility
Application-specific examples
Dynamic Teams b2211: DT & AMP integration
https://www.figma.com/file/P8Af5IiwWM0XwVpNDnH1QT/B2211-Dynamic-Teams?node-id=4%3A899
UX Writing Guidance
When creating a button label:
- Keep the button label short and crisp, it can´t exceed one line in length.
- Don´t use abbreviations.
- Don't use synonyms.
- Use active formulation.
- Exception: the OK button, where users are simply being asked to confirm they've read or seen something.
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: