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.

New guidelines

Illustrated messages

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.

Illustrated messages for empty states

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.

Deleting objects

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.

Expandable text

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.

Expandable text – collapsed

Expandable text – expanded inline

Expandable text – expanded as popover

Smart controls

With version 1.88, we added guidelines for the existing smart form and smart list controls, which are both supported for OData version 2.

• 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.

Invisible messages

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.

Content updates

Responsive table

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.

Situation handling

The guideline for situation handling has been updated to reflect the redesigned “My Situations” app with a flexible column layout.

My Situations app with flexible column layout

There’s also more information on layout details for the situation page, and how to switch between situations if more than one situation occurs for an object or for an item in an object list.

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

Improved navigation

Since we first introduced the design guidelines over 5 years ago, the number of topics has more than doubled, blurring some of the boundaries in the original navigation structure. With version 1.88, we’ve adapted the guideline navigation menu to organize the overall content more consistently and make it easier to identify what’s in each section.

Revised navigation menu

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.

When to use which control

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.

Feedback option

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.