The SAP Fiori design guidelines for web applications have been updated to version 1.88. In addition to the usual content updates, we’ve also revised the guideline navigation and added a new feedback option.
The long-anticipated illustrated message control is now available in SAPUI5. You can use it to vastly improve the user experience for empty states by combining a solution-oriented message text with a UX illustration and a call to action.
These three new topics explain why it’s important to design carefully for empty states, how UX illustrations are designed to work across different container and device sizes, and how illustrated messages are structured.
Illustration and message pairs are provided out of the box for standard scenarios (with more to come), so you won’t need to start from scratch. The best practices in the guidelines will help you to tailor them to your own scenarios.
As part of a series of updates to the guidelines on object handling, there’s now a dedicated topic on deleting objects. It covers the interaction patterns when deletion is triggered from a list report or from an object page.
For responsive tables, lists, and forms, you can now show longer descriptions as an expandable text. To save space, the text truncates automatically after a given number of characters. Users can then expand the entry to see the full text, which appears either inline or in a popover.
- The smart form can create read-only and editable views of a form using the OData annotations for the smart fields. It also provides a toolbar with a title.
- The smart list is alternative approach for creating lists or trees.
There’s now a dedicated guideline for the existing invisible message control.
Like the invisible text control, the invisible message control is designed to support users of assistive technologies. The invisible message provides information on dynamic changes to the UI that are otherwise only shown on a visual level. For example, you can use an invisible message to let users know when a result list is shown, or when a multi-level dialog changes its appearance.
The responsive table now supports additional keyboard shortcuts when the focus is on a row:
- Space selects an item
- Del triggers the Delete button
- Enter triggers navigation
- F2 triggers the Edit button
In addition, we recommend Enter as a shortcut for Create when adding items, and Ctrl+Comma for opening the personalization dialog.
Other content updates
For a full overview of all updates, see What’s New in Guideline Version 1.88.
SAP Fiori design stencils
You can see what’s been updated in the SAP Fiori for web stencils and download the latest versions below:
- Sketch: What’s new in 1.88 | Download version 1.88
- Axure RP: What’s new in 1.88 | Download version 1.88
- Adobe XD: What’s new in 1.88 | Download version 1.88
We’re constantly expanding our stencil library, so be sure to check for the latest download before you start working on a new app design.
Using the guidelines
In addition, all the top-level menu items now have an introduction for better orientation. For the UI Elements area, the overview also includes a helpful list of all UI element topics.
All guidelines on choosing the right control are now in a separate When to Use section under UI Elements.
New feedback option
You may have noticed the new blue feedback button on the right of the screen. Please let us know if you’re finding the guidelines useful, or if something is wrong or missing. We’ll do our best to follow up and improve the content.
Note: To protect your privacy, any feedback you provide is anonymous, which means we can’t reply to any questions. If you have a specific design question or proposal, please feel free to post your question in the SAP Fiori Community instead.