What is SAP Fiori?®

SAP Fiori® is a new UI and UX guideline for enterprise applications. It introduces a unifying and role-based user experience for all SAP® applications while also targeting all different devices; starting from desktops to tablets all the way to small mobile and handheld screens.

With SAP Fiori® all applications have a similar look and behavior so that users get familiar faster with new apps.

Design principles

SAP® defined five design principles for SAP Fiori®:

1. Role-based
2. Adaptive
3. Coherent
4. Simple
5. Delightful

Role-based means that people only see what they need to see. No useless information is displayed. Every user has a set of roles assigned. The launchpad and apps can adapt to these roles and decide whether this user needs to see this piece of information right now. This has multiple advantages: Training time gets reduced because the UI is limited to only the essential data and components. Daily work gets done faster since there are no useless or even “do not touch” fields and texts on the screen. Administrators can fine-tune access rights.

Almost everybody uses multiple devices with different screen sizes today. The Fiori Design Guidelines incorporate that by having a responsive design by default that adapts to the screen size. Someone can open a SAP Fiori® app on a desktop and create, for example, a work item. This person then walks down to the warehouse and can have a look at the details of this work order on the same Fiori app on a smartphone. At the end of the day the manager can see an analysis of all work orders on a tablet. All these scenarios can be achieved with the same SAP Fiori® app.

SAP Fiori® introduces a coherent and consistent interaction and visual design language. Standard elements, like back buttons, profile pictures, or settings are always at the same position in all apps. If you learn how to use and navigate one SAP Fiori® app you should feel familiar immediately when opening a new Fiori app.

Although enterprise applications are often very complicated, the SAP Fiori® design guidelines try to achieve a simple design. Clear structures and layouts, only relevant information, and easy to use essential functions help users to get their work done.

Finally, there is delightful. Even though most SAP Fiori® apps are not “for fun” but “for work” everybody wants to use nice-looking products. We get used to this by all these polished consumer apps and want to have the same kind of experience at work as well.

SAP Fiori® in practice

So, what is SAP Fiori® actually and how can I use it? All these design guidelines are nice but what is SAP Fiori® besides polished websites, PowerPoint slogans, and design principles?

SAP® provides guides for the web, Android, and iOS about many different UI elements, like lists, cards, tables, buttons, and many more. These guides describe how the elements should look like, how and when you should use them, and how they change depending on different states or user inputs.

You can find the guide for web elements here.

Additionally, there is SAPUI5. It is an HTML5-based development toolkit with ready to use elements. You can start developing an application and use this library on the frontend and as a result, you have at least the UI of an SAP Fiori® application. Just keep in mind that SAP Fiori® is not only about the visuals (UI) but also about how applications behave, how you navigate between screens, how you display error or loading messages, and how you arrange and combine all these ready to use elements (UX).

You can find sample SAPUI5 elements here.

Summary

To summarize, SAP Fiori® helps you to develop beautiful applications that improve productivity by providing UI elements and UX guidelines that follow a consistent design philosophy.

If you want to see some more resources, tutorials, and guides to SAP Fiori® have a look at our list of important resources here.