The SAP Fiori design guidelines for web applications have been updated to version 1.86. Read on for a summary of the main changes with this release.
New with this edition
Getting started
If you're new to SAP Fiori, it can be hard to get a quick overview of what's what and how to apply the guidelines in practice. To help out, we’ve added a new topic on best practices for designing SAP Fiori apps. This walks you through the basic SAP Fiori concepts and components and offers a practical step-by-step guide for designing compliant SAP Fiori apps.
SAP Fiori elements
A new section in the SAP Fiori design guidelines focuses on designing applications that will be developed with SAP Fiori elements.
This collection of topics provides an overview of the features available for the respective SAP Fiori element implementations and supplements the existing guidelines for the underlying floorplans. There’s also a dedicated section on tables.
UI elements – smart field
The smart field is the latest smart control we’ve added to the guidelines. If you work with OData version 2, you can use the smart field to generate a variety of input controls and their read-only equivalents automatically based on the data type.
Because the smart field also comes with built-in features like suggestions and value help, it can speed up implementation if you’re planning to use these features in your app. The new guideline walks you through the different options and when to use them.
Resources – user research method cards
We now provide a set of user research method cards to help you pick the right type of user research for your needs along the design-led development process.
The card deck provides an overview of the 14 most common user research methods at SAP and how to apply them. Most of the methods can be used both physically and virtually.
Updated guidelines
Which selection control should I use?
There's often uncertainty around which selection control to choose in a given scenario. This depends on several things: whether the user needs to select a single value or multiple values, how many entries a selection list is likely to contain, and how much information users need to identify the right items.
To make this easier, we’ve fully revised the Which Selection Control Should I Use topic. The first part helps you navigate the different selection controls and supporting selection dialogs. The new Best Practices section then provides a handy matrix to find the right control or combination of controls for your use case.
Finding the right control for single selection
Intelligent systems - content recommendations
Our design guidelines for intelligent systems now also cover content recommendations. This is when AI is used to identify and surface content - like documents, videos, or links - to support the user in a specific context.
The new section outlines the criteria for identifying content that adds value, and what you need to bear in mind if the content is going to be used to support critical business decisions.
Icon tab bar - badge
The Icon Tab Bar topic now has a new section on the recently added badge feature. Find out how the badge appears in the default and semantic tab states and how the interaction is handled.
Value help dialog
Check out the revised Value Help Dialog article to learn about the latest updated design.
Revised value help dialog
Other updates
For a full overview of all updates, see What’s New in Guideline Version 1.86.
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.86 | Download version 1.86
- Axure RP: What’s new in 1.86 | Download version 1.86
- Adobe XD: What’s new in 1.86 | Download version 1.86
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.
- SAP Managed Tags:
