Understanding SAP Fiori UX

As your enterprise plans to implement SAP S/4HANA, you want to learn more about the SAP user experience strategy, and, particularly, the SAP Fiori UI.

IT and the use of electronic devices is no longer reserved for a group of experts; it has spread throughout all social groups. In this context, highly performing hardware stands against a wide variety of software products with differing scope and potential. This puts stress on ease of use from the perspective of the end user. The main drivers of this development are smart phones and tablets, with their easy-to-use and flexible user interfaces. The focus of these user interfaces is no longer on maximum functionality, but on a positive user experience, which places the focus on the consumer. The focus is no longer on the expert user with many years of experience. Due to these circumstances, business software must adapt and transform the impact of this trend into an advantage for the roles of an enterprise. In this evolution, User Interfaces (UIs) play an important role.

With regard to SAP software products, the challenge is to keep a clear view and to understand the overall SAP strategy in the area of user experience. Furthermore, it is important to have a clear understanding of the goals and the target groups of each UI technology. This helps to avoid incorrect decisions and situations where users are frustrated.

At the outset, it is helpful to clarify and help understand the terminology. It is useful to start with the terms User Interface (UI) and User Experience (UX).

The terms User Interface (UI) and User Experience (UX) refer to two different ways of thinking. UI, from a software perspective, refers to the interface between a human being and a device. Its goal is to support maximum efficiency during use. UX involves the perspective of the end user, and aims at motivation and emotion before, during, and after use. UX tries to achieve a sustainable, positive attitude in the user and create a motivating experience.

Types of Access

When summarizing the different factors, it is clear that a "one size fits all" approach does not work.

The long-term goal of the SAP UX strategy is to offer all business and all analytic applications on SAP HANA, with SAP Fiori as the unified UI.

SAP User Experience Strategy

Examples of the NEW component include the following:

• SAP Fiori for new applications

• SAP Visual Business (supports certain new applications)

• SAP Visual Enterprise (supports certain new applications)

Examples of the RENEW component include the following:

• SAP Fiori as common UI for all devices (desktop, laptop, tablet, and smart phone)

• SAP Fiori for existing applications (for example, cloud applications including SAP Fieldglass, SAP Ariba, and SAP SuccessFactors)

• SAP Fiori for existing SAP GUI or Web Dynpro applications

• Single entry point via NWBC

Examples of the ENABLE component include the following:

• Improving and simplifying SAP GUI or Dynpro-based views using view Personas

• Adapting and extending standard SAP Fiori apps using Web IDE

• Customizing different UIs using color schemes, fonts, icons, and so on, and customizing company logos using UI Theme Designer

View Personas is available for SAP GUI or Dynpro-based views (Web Dynpro support is planned), and Web IDE is available for SAP UI5 applications. The UI Theme Designer is available for the following:

• SAPUI5 (including SAP Fiori applications and SAP Fiori Launchpad)

• Web Dynpro ABAP, Web Dynpro Java

• SAP GUI for HTML

• Business Server Pages, HTMLB

• SAP Business Client for Desktop

• SAP Enterprise Portal

SAP Fiori Architecture

The SAP Fiori launchpad is a role-based, personalized UI client that enables users to access SAP Fiori apps alongside established UIs. The SAP Fiori launchpad is based on SAPUI5 and can be used on multiple devices (leveraging the responsive design paradigm) and deployed on multiple platforms (SAP NetWeaver Application Server [ABAP Stack], SAP Enterprise Portal, and SAP HANA Cloud Platform). The SAP Fiori launchpad comes with predefined content to streamline implementation processes.

The SAP Fiori launchpad is aligned with the two main UI clients: SAP Enterprise Portal and SAP Business Client. This alignment is achieved as follows:

• Alignment with the SAP Enterprise Portal is achieved by running the SAP Fiori launchpad user experience within the SAP Enterprise Portal (also known as SAP Fiori framework page) while leveraging the established portal infrastructure and best practices.

• Alignment of SAP Business Client (BC) for Desktop with SAP Fiori launchpad design is achieved by the ability of the SAP Business Client to access the SAP Fiori Launchpad directly.

The SAP Fiori launchpad can be visually adapted and customized using the UI Theme Designer. It is designed according to the simple and intuitive SAP Fiori user experience, while supporting established UI technologies (such as Web Dynpro ABAP and SAP GUI for HTML).

The preceding figure shows the SAP Fiori transactional application Change WBS Element Status, which supports the user in maintaining the status values of WBS elements and network activities. As this is a transactional app, you will find the standard views and functionalities.

You can also use the existing SAP GUI transactions in the SAP Fiori launchpad, together with the SAP Business Client or via your web browser. Most SAP GUI transaction exist in SAP S/4HANA as well.

A while ago, SAP released a version of SAP Fiori known as SAP Fiori 3. SAP Fiori 3 supports multi-page spaces to give users stable, well-structured and personalizable access to their important apps. Users can also benefit from SAP's continuous improvements in SAP Fiori 3 situation handling capabilities. App developers also benefit from the SAP Fiori controls for SAP Fiori native apps for iOS and Android that SAP Fiori 3 offers. As well as from SAP's next generation IDE (Integrated Development Environment) in the cloud, SAP Business Application Studio, and SAP Fiori tools for SAP Fiori 3.

A consistent and delightful home page experience is a key element of SAP Fiori 3: it delivers a significant improvement for end users accessing the system via the SAP Fiori launchpad as the single entry point for their work.

Supporting intelligence is also an area SAP Fiori 3 focuses on: situation handling, with improved situation pages and message-based situations are key elements in this area in SAP Fiori 3.

There are several means available to semantically structure and visualize the content of a space. Use multiple pages and sections to semantically structure the content of a space. Page and section titles may help identify the tasks that  the content relates to. Tiles are used to visualize the content of a space. Beside tiles, more options to visualize the content will be available in later releases.

A space comes with a predefined set of apps related to the user’s business role. The idea is to show only the most important and most used apps per space that users need to complete their daily tasks.

To further structure a space you might use one or multiple pages depended on the number of assigned apps associated with the users’ business role. Users still can access all apps in the app finder which they might use to add apps to their pages or to directly launch apps that they rarely use.

Sections can be used to semantically structure the content of a page. To ensure consistency across pages within a space and across spaces, we recommend using a section called "Quick Access" to summarize the most important apps, and/or a section called "Insights" to summarize the most important analytical apps.

The usage of multiple pages might be the case for business roles which have many apps assigned. Each page should then reflect one self-contained work-context. Aim for lean pages and show only the most important and used apps on each page. Therefore, a page serves as a "favorites" page.

"Overview" Page – If you would like to provide a page which summarizes the most important and most used apps across the multiple work-context pages use a term which summarizes the most important tasks of the whole space or use "Overview" as page title. The Overview page may contain additional overall apps or generic apps such as "My Inbox". To ensure consistency position this page as the first page on a multiple-pages space.

To aim for lean pages do not overwhelm sections with apps, go for lean pages instead. Check the chapter tiles to choose appropriate tile types.

The spaces concept gives users more than one page to access their SAP Fiori launchpad content. In fact, the concept envisages that users can access multiple spaces, and each space itself can have one or more pages. Each page can have its content portioned into sections, similar to the groups used before. As a result, users have two levels with which to structure their content instead of just one: multiple spaces (each with one page), and multiple sections per page – i.e. spaces and sections. The following diagram shows this with an example for the space "Accounts Receivable".

To be able to use spaces, the corresponding setting has to be enabled in the SAP Fiori Launchpad configuration in the frontend system. This can be achieved in Customizing or by using transaction /UI2/FLP_CUS_CONF. The parameter to use is one of the following options:

• SPACES, if the setting should apply to all users (either/ or decision by administrator)
• SPACES_ENABLE_USER if the user can decide.

The value has to be set to true.

If the user-specific flag has been activated, the user can enable or disable spaces on his own.

The following requirements beside the SAP Fiori Launchpad settings have to be made to be able to manage spaces and pages:

• Catalogs have already been defined

• Access to role administration with transaction PFCG in the frontend system. Spaces have to be assigned to a user role similar to groups

• Assignment of the business catalog SAP_BASIS_BC_UI_FLD. It contains the following apps:

  

  Manage Launchpad Spaces: Here you create and manage spaces and you define the page assignment. You can also check to which business roles a space is assigned. This app has two main views: the spaces overview and the space details.

  

  Manage Launchpad Pages: Here you create new pages, define the page content and edit existing pages. This app has two main views: the pages overview and the page details.

• The authorization of role SAP_FLP_ADMIN is assigned to you.

• Activation of the corresponding data services.

Spaces can be translated using the standard SAP translation tools.

SAP already delivers a lot of spaces and pages with the existing roles. You can copy both in your own namespace.

This transition period gives administrators time to build up optimal spaces and pages for their users. It also gives users the opportunity to familiarize themselves with the new approach and gradually apply their personalization to the new spaces and pages, while having the previous home page available to them as a fall-back.