Benefits of Good User Experience

People often think about user experience (UX) in an emotional, rather than a rational, context. This makes it difficult to create a business case for investing in good user experience. However, delivering a satisfying user experience has a monetary value, in addition to the clear human value of making people happier.

Another important aspect is data quality: incorrectly entered data costs a lot later on in the process, so ensuring good data quality right from the beginning with a good UX saves all these later data corrections.

There are many examples related to the benefits of delivering good UX to users:

• It helps to improve productivity because people can get more done with the system they are using.
• Ideally, the user is more efficient, but they are also more effective because the system they are using guides them with an intelligence, thereby pointing them to the areas that most need their attention.
• Good UX also improves data quality; incorrectly entered data costs an enterprise a great deal later on in the process. Ensuring good data quality right from the beginning with a good UX saves time making data corrections at a later date.

Software that is easy to use dramatically reduces the amount of time an enterprise needs to spend on training. Sometimes, a system requires hardly any training at all. This facilitates significant savings on training costs and subsequent support desk costs.

If you include your end users in the implementation of software and ensure that the UX suits their needs up front, you will decrease the number of change requests from users requesting new or different features – changes to a deployed UI are more expensive than changes made beforehand. In addition, user errors will be reduced, which decreases costs due to poor data quality and lowers support desk costs.

Added to these quantifiable benefits, good UX brings clear human value benefits, which are particularly important these days, when companies compete to attract the best talent. Desirable talent wants to work with cool, modern tools rather than unattractive ones. Good UX results in higher user satisfaction, allows inclusion of all employees, including those with disabilities, by supporting accessibility. This helps your company ensure that employees actually use the software – rather than, for example, keeping data separate on their desktops for as long as possible.

If the apps are used by your customers, good UX will help you to build and increase customer loyalty.

Finally, as an IT department, providing your business units with software with good UX will help strengthen your relationship with them because you are providing software that their teams enjoy using.

SAP Fiori is the way SAP delivers great UX.

SAP has always focused on supporting your business, that is, providing the features and functions you need to run your business processes. Furthermore, SAP has always used innovative technologies for its products. What is relatively new is the focus on people: over the last ten years or so, we have increasingly brought people (that is, end users) into the equation.

We have established a user-centered, design-driven development approach, where we have so-called design gates to ensure that the necessary end user research has been done, and that the application design follows the Fiori design guidelines. Being user-centric means being inclusive and taking care of ALL users, including those with disabilities.

SAP Fiori is the sweet spot where business and technology come together to best support your users, helping them to get their work done more easily.

One-user experience is key to our approach, as illustrated in this figure, One UX for the Intelligent Enterprise.

The SAP Fiori design system allows us to provide the SAP Fiori user experience to a wide variety of technologies.

It starts with core values, principles, and practices. Values are led by our SAP corporate values. One key value worth mentioning here is inclusion – that is, supporting people with visual disabilities, which is related to the topic of accessibility.

Practices are things, such as ensuring that we do user research, define personas, provide guidelines, and so on.

SAP Fiori is built on five design principles, which have been stable from the beginning.

The SAP Fiori design system includes design languages for dedicated technologies: web, native mobile, and conversational. Each design language specifies the look and feel, controls and floor-plans and common functions, and includes guidelines and stencils for designers and developers.

SAP Fiori can be built using many technologies, with SAPUI5 being our reference HTML5 web technology. We have two native mobile design languages: one for iOS and one for Android. Existing products that have been built with other technologies cannot simply throw their UI technologies away and rebuild everything with UI5, so we also support other technologies in providing an SAP Fiori UX. We provide tools and reusable web components to help our Cloud development teams accomplish this goal.

If, as a customer, you are starting from scratch, or extending an SAP S/4HANA system, then use UI5 and/or native mobile apps. However, if you have apps already used productively that have been built with, for example, Angular or React, you can also keep these technologies and use our tools and reusable web components to help get them closer to the SAP Fiori user experience.

The SAP Fiori design system evolves constantly with the products, the tools, and new technologies.

SAP Fiori is our UX for intelligent enterprise, enabling users to get their job done in an easy and delightful way. It is the target UX for each and every product developed at SAP. SAP Fiori can be implemented on various UI technologies and platforms.

SAP Fiori is the user experience for all our products, which are aimed at helping users to get their work done more easily.

In addition to the design system, SAP Fiori covers the following:

• The user experience provided by SAP products, which helps users to get their work done easily and intuitively
• The development tools we provide to help you develop Fiori apps
• The technology for developing and running SAP Fiori, such as SAPUI5 and SAP Fiori elements for developing individual apps, and the SAP Fiori launchpad for giving users access to hundreds of apps

The 3 new focus areas for SAP Fiori 3 are consistency, intelligence, and integration.

We will now examine these in greater detail.

We will now examine what we need to do to ensure a high standard of consistency across all our products.

Firstly, consistency commences with having a consistent visual design, that is, the theme defining the colors and so on.

With SAP Fiori 3, we have defined the Quartz Theme as the visual design for all our products, starting with Quartz Light. The background is a subtle light grey, giving the application content center stage, which is becoming more colorful as you can see. We want the background to be in the background, and not distract from the content.

For people working in darker environments, we have also introduced the Quartz Dark theme, starting with SAP S/4HANA Cloud 2002.

Inclusion is important for us, especially the inclusion of people with disabilities, which is why we also provide high contrast themes for accessibility.

One aspect of visual design that people simply take for granted is the font – but in fact, using the right font can make a big difference, even if it is a very subtle one. We designed the 72 font specifically for SAP Fiori – it is a bit like Helvetica, which is a beautiful font for printed pages but designed specifically for computer screens. It has very good legibility, and we put a particular focus on accessibility, to support people with impaired vision.

As you can see, we got a red dot design award for it in 2017. We have received numerous design awards in recent years, including two other red dot design awards for SAP Fiori 2.0 and SAP S/4HANA Embedded Analytics.

Another aspect of consistency is what we call the shell header bar – the part of the UI at the very top of the screen.

As you can see on the left side of the figure, Previous Shell Designs, in the past each of our products had a shell bar which looked different – the common denominator being that "SAP" appeared somewhere.

With SAP Fiori 3, we sat down with all our product development units, using SAP Fiori 2.0 as a starting point, and came to an agreement on what a common shell header bar should look like – which is what you see on the right of the figure. The logo replaces the home button, we have introduced a navigation menu next to it, and all the product specific actions are now on the right, such as the user actions menu.

The figure, SAP - Examples, provides you with examples from SAP S/4HANA on the left, and examples for SAP SuccessFactors and SAP Customer Experience on the right.

At a glance, you can see they all have the Quartz Light theme applied as well as the SAP Fiori 3 shell header bar. They also have the other aspects covered (to a great extent), such as iconography and typography.

The SAP Fiori design language for the web includes a number of floor-plans for typical tasks that business users have, such as working on lists and business objects such as orders, customers, and accounts. The object page can have embedded analytics, as can the overview page and the analytical list page. Flexible column layout is an elegant way of including lists and details on one screen – you can change the width of the two columns, and even have a third column on the right if needed. We also have a worklist floor-plan, which is basically like a list report but without the filters at the top.

These floor-plans can be developed very easily using SAP Fiori elements, which provide you with a template-based approach. You can build these apps without a single line of JavaScript code if you have a suitably annotated OData service: simply go into the Web IDE, or in the future, the SAP Business Application Studio, choose your SAP Fiori element, link it to your OData service, and proceed.

The SAP Fiori 3 spaces concept gives your users stable access, which is well-structured and can be personalized for all their important apps.

A space represents an area of work, typically corresponding to one or more business roles. You can structure each space using one or more pages for various work contexts, and optionally use sections to further group the work within a page.

SAP S/4HANA Cloud comes with space and page templates for each business role, making it easy for customers to structure the layout of the SAP Fiori launchpad for their end users. This layout remains stable, even if a user is assigned to more roles later. 

For on-premise customers, spaces and pages are supported by the SAP Fiori front-end server 2020 for S/4HANA, which supports S/4HANA releases 1809, 1909, and 2020. Example spaces are only provided for the S/4HANA 2020 on-premise release.

Users can easily personalize their pages, by adding or removing tiles, or adding or removing sections.

Users have told us that, when they are just launching apps, they do not always need full-size tiles. Consequently, we now provide more visualization options for the launchpad. We support links on pages in spaces with a clearer demarcation of each link.

We also support flat tiles, that is, half-height tiles, both single width, and double width. These two options allow users to get direct access to more applications on a page without needing to scroll down.

Refer to the following videos on spaces with multiple pages, flat tiles and links:

• https://www.youtube.com/watch?v=Y0zSDTYJEfs
• https://www.youtube.com/watch?v=G-jXj8f0TPI

The SAP Fiori launchpad user experience is available through the SAP Fiori front-end server for ABAP-based systems, such as SAP S/4HANA. Spaces are available with the SAP Fiori front-end server 2020 for S/4HANA, which supports S/4HANA releases 1809, 1909, and 2020. Just recently, the SAP Fiori launchpad user experience with spaces also became available through the SAP Launchpad service on the SAP Business Technology Platform (Cloud Foundry). The feature set in the cloud is not the same as on-premise – have a look at the road map for planned new features and innovations.

Having had a look at what we are doing in relation to consistency, let us now look at what we are doing related to intelligence.

First we must ask: what makes a system appear intelligent to a user?

Basically, a system with which you can manage your business by entering data, like creating sales orders, invoices, updating your general ledger, is certainly a powerful system – but it is not yet an intelligent one. A system becomes intelligent when it can analyze the data itself, and make recommendations, project forecasts, or provide additional insights based on that analysis. With SAP Fiori 3, we have looked at how best to provide these insights to the user, so that they are guided in the best possible way, which reinforces their trust in the system.

These are the areas that are already available today, where SAP Fiori 3 provides intelligence:

• The provision of intelligent insights: Apps can provide intelligent insights – for example, by providing a ranked list of recommended actions or the most important things for you to look at next. If the ranking is based on some type of scoring model or machine learning, then this is a powerful way of surfacing intelligence by helping users focus on what is most important for them, so that they do not waste their time on less important tasks.
• The provision of design patterns: The SAP Fiori design system provides several design patterns for surfacing intelligence within applications, as you can see in the list here.
• The provision of situation handling: Situation handling is a powerful approach for using artificial intelligence and machine learning to help users deal with not-so-frequent situations, by notifying users about the situation, explaining it, and providing intelligent proposals for how to deal with it.

Let us now examine an example of an intelligent app and of business situation handling.

Here, you can see an example for a machine learning-based ranking, with an explanation pop-over.

Now that we have examined various aspects of intelligence, we will have a quick look at what is already available for integration.

Our larger customers often have multi-system landscapes, with various back-end systems from SAP and legacy home-grown solutions and third-party products running on-premise.

Your business often needs to access one or more of these systems for its daily work, in addition to accessing other systems for activities as employees or managers - for example, applying for leave requests or approving them, buying office equipment, or approving such requests. Consequently, these customers have made the following a high priority in their requests: the provision of a central entry point for their users to access their system – providing more than simply a portal page with links to individual applications.

We always listen to our customers and have taken this request very seriously, and are pleased to say that we delivered the first steps to provide this over the last six months with the SAP Launchpad service on SAP Business Technology Platform.

Using this solution, you can give your users access to one launchpad in the Cloud. In addition, you can set up the solution to give your users access to their apps in SAP S/4HANA systems, as well as selected SAP Business Suite and SAP SuccessFactors applications and third-party applications.

Since SAP S/4HANA supports hundreds of business roles, each using many different applications, we simplify the setup of the central entry point by providing content federation. With one click, you can expose the content on SAP Fiori launchpad spaces and pages to a business role from the SAP S/4HANA system to the SAP Launchpad service. From this point onwards, users no longer need to access the local SAP S/4HANA launchpad; they can access their apps seamlessly through the SAP Launchpad service in the cloud.

Content federation is also available for the SAP Business Suite, SAP Fiori apps built on the Business Technology Platform using Cloud Foundry, as well as for the SAP Enterprise Portal.

We provide manual integration for SAP SuccessFactors, which provides several deep links which can be integrated directly. Finally, you can manually integrate third-party products.

SAP Mobile Start is your native entry point to intelligent enterprise.

Mobile users are confronted with many different native and web applications scattered across their mobile devices. It is difficult to find the right one and easy to overlook important alerts.

Critical business decisions are not being made due to users being unaware of them, since they are increasingly away from their desk ensuring the continual flow of assorted business processes.

SAP Mobile Start is a standard SAP solution, integrated with SAP S/4HANA and further SAP solutions through their mobile apps, leveraging the SAP Business Technology Platform.

The benefits of SAP Mobile Start is as follows:

• Mobile access to the intelligent enterprise, its applications (native or web), web content, data or SAP S/4HANA situation handling to quickly address business issues
• Consumer grade UX and superior performance, designed for an intuitive and personalized native UX, with enterprise grade capabilities
• Easy consumption, as it is available through the SAP Launchpad service