User Experience Insights
UX & Fiori at SAP – is it the same thing?
It seems there is a lot of confusion related to UX within SAP. Many think that UX is just about Fiori, while thinking very differently about what Fiori is. I’ve met people who think that UX in SAP is just about standard Fiori apps that we deploy during S/4HANA implementations. I’ve met people who think Fiori is a programming language and therefore anything that is built using it has great UX. Let me share what I was taught and what I’ve been telling customers so far about what UX means at SAP.
User Experience is a general term for how end-users interact with a piece of software and the feeling they get from using it. Foundation of the UX in SAP is built upon SAP Fiori – a design system that specifies the look & feel, controls, floorplans and common functions, and includes guidelines and stencils for designers and developers.
Fiori starts with core values, principles and practices. Practices ensure adherence to the user centered design process; thus we do user research, define personas, provide guidelines etc. Fiori has these five design principles, which have been stable from the beginning:
However just because an application is built using SAP UI5 it doesn’t mean it follows Fiori standards properly. I call these apps “Fiori-like” as they are built with the Fiori controls but often break the Fiori principles and guidelines and therefore do not provide the best UX to the customers. Here is a very simple made-up example:
Let’s have a look at how Fiori is misapplied in this screenshot:
- Incorrect button placement. “Save” button should always be in a footer toolbar in the edit mode of an object. Having finalizing buttons at the bottom right of the screen ensures consistency between all Fiori applications and builds a pattern of use.
- Breaking the pattern for object editing. You should not have editable fields in the object header – it snaps on scroll, so a user could easily miss this key information (which is the only data recommended to be in the object header to avoid clutter).
- Colors abuse. You should also avoid using too many accent colours. Having only some things highlighted will allow users to quickly understand what requires user’s attention.
- Markup violation. Forms used in the content area should all be aligned with each other – this way users can concentrate on the content itself and not the way it’s distributed over the screen, which supports consistency and usability.
Nevertheless, the app in the picture could be built with SAP UI5 and be presented as a Fiori application. Instead, it creates the impression of Fiori UX while not adhering to Fiori design principles – thus completely undermining Fiori UX. Try to avoid that and be mindful to the UX you’re creating.
If we want to provide the best user experience to our customers not only do we need to implement standard Fiori applications and use SAP UI5 to build new ones, we need to follow the Fiori system guidelines while doing that (I will dive into this in my next post dedicated to UX designer role – stay tuned!) We are also responsible for the overall user experience of the system – how people are accessing it, if they need to switch between systems while working (and ensure we make it seamless), how their launchpads are set up and much more.
The distinction between consumer and enterprise products from an experience point of view is narrowing quickly. Regardless of the context, users expect and demand well designed, intuitive products. Indeed, it might be more important in an enterprise context because if users are frustrated by poor usability and overall experience, it’s much harder for them to be as efficient or productive as they could.
Understanding how to apply the Fiori design guidelines correctly with the help of a UX designer can ensure you deliver quality products with the customer in mind. If we can meet and even exceed the expectations, our users and customers will not only be more effective in their respective roles, but happier and more willing to use SAP products down the line.
One way to ensure that the SAPUI5 app that you build follows the SAP Fiori design guidelines and is a fully compliant SAP Fiori app is to use SAP Fiori elements. This will ensure UX consistency as well as significantly reducing development time compared to hand-coding the user interface.
You can learn more on the community page https://community.sap.com/topics/fiori-elements or in the developer documentation https://sapui5.hana.ondemand.com/#/topic/03265b0408e2432c9571d6b3feb6b1fd.
Thanks for the input, you're absolutely right - it's much easier to ensure Fiori guidelines are followed by using SAP Fiori Elements. However throughout my experience I've seen some examples when people were extending Fiori elements apps breaking the guidelines in the process. So even though it's harder - it still is not impossible.
Nevertheless, your point is absolutely valid. If the app can be built with Fiori elements, it's makes sense to have that option in mind!