Introducing SAP Fiori

Objectives

After completing this lesson, you will be able to:

  • Identify the dimensions of SAP Fiori
  • Explain the principles of SAP Fiori

The Concept

SAP Fiori is the design language that brings great user experiences to enterprise applications based on SAP User Experience. It works seamlessly on desktops, tablets, and smartphones.

SAP Fiori Dimensions

The three dimensions in which SAP Fiori is defined are design, principles, and technology. In each dimension, rules and guidelines from optic, handling, interactions, and architectures to technologies in development and the system landscape are in place to define what SAP Fiori really is.

The Design

All details of the SAP Fiori design are available as guidelines for general use. You can find all aspects of the SAP Fiori design starting with the five core design principles up to floorplans of pages and details for UI elements. There are also several resources available for download, such as stencils, the SAP icon font or font 72, to empower customers to design their own apps.

SAP Fiori Design Guidelines

To access SAP Fiori design guidelines, visit SAP Fiori Design Guidelines.

SAP Fiori User Experience Strategy

The source of the SAP UX Strategy and, therefore, SAP Fiori, is design thinking. SAP offers tools and technologies to empower customers to realize user experience on their own. Let's see how SAP tools and technologies support SAP Fiori UX strategy.

The Principles

In the second dimension, SAP Fiori offers a unified user experience for a variety of clients. Users should have a consistent, coherent, simple, intuitive, and delightful user experience on all devices to be able to work better and more efficiently. The five design principles of SAP Fiori are at the core of every SAP Fiori app to fulfill these goals. The role-based approach is, therefore, the biggest change in comparison with classic user interfaces.

Role-Based User Experience

SAP Fiori has changed user experience and empowered users to use role-based applications as compared to functional-based applications. 

Watch the video to learn how SAP Fiori has changed user experience from functional-based to role-based.

The Technology

Technology is another dimension of SAP Fiori. Shall we look at how it all started and how SAP Fiori continually evolved since its debut in 2013?

One of the most requested new aspects was to provide more information on home pages supported via cards. In addition, SAP reimagined how aspects of intelligence such as natural language interaction and machine intelligence can become a key part of the experience. It deeply integrated them into the foundation of the design, providing the following features:

  • A new theme for a fresh, modern look and feel.
  • Intelligent home pages showing everything the user must focus on.
  • Digital assistant with fully integrated conversational user experience.
  • Active business situation handling, with explanations, insights, and proposed actions.
  • Dynamic content to support intelligent apps with embedded artificial intelligence (AI).
  • Improved search previews, results pages, and result visualizations.
  • A central inbox, also integrated with the digital assistant.

The goal of SAP Fiori 3 was to provide the perfect user interface for the intelligent enterprise fully supporting experience management.

Sound good? But, what do we mean by intelligent enterprise?

Intelligent Enterprise

The experience economy has changed the way businesses compete. Today, organizations must continuously listen to the beliefs, emotions, and intentions of customers, employees, suppliers, partners, and all other stakeholders. This type of data is called experience data (X-data).

Businesses must be able to interpret and analyze large amounts of X-data, and understand its relationship to the operational data (O-data) of the business.

SAP delivers expertise across every industry in end-to-end processes that link together different systems. For example, "Recruit to Retire" links together financial planning, headcount planning, contractor management, and staffing into seamless end-to-end processes. This gives companies real-time understanding of the relationship between financial forecasts and workforce needs, costs, and assumptions.

Browse the SAP Fiori Design Guidelines

Business Example

You want to collect information and resources around SAP Fiori design.

Caution
Due to the rapidly changing nature of web presence, the naming of headings, links and steps may differ from the exercise solution.

Steps

  1. In a web browser, open the SAP Community (https://community.sap.com/) and examine the topics page of SAP Fiori. Search for and open the SAP Fiori design guidelines.

    Note
    If you are using an SAP Learning system, you may use the favorite SAP FioriSAP Fiori Apps Reference Library.
    1. Open https://community.sap.com/ in a browser of your choice.

    2. Choose Topics at the top of the page.

    3. In the Search Community Content field, enter fiori.

    4. Choose SAP Fiori in the result list.

    5. Examine the SAP Fiori community page.

    6. In the Design pane, choose the SAP Fiori design guidelines link.

  2. In the SAP Fiori design guidelines (https://experience.sap.com/fiori-design/), examine the overview of the SAP Fiori launchpad.

    Note
    If you are using an SAP Learning system, you may use the favorite SAP FioriSAP Fiori Design Guidelines.
    1. In the SAP Fiori design guidelines entry page, choose the Web tile.

    2. Choose SAP Fiori LaunchpadOverview o the left.

    3. Examine the overview of the SAP Fiori launchpad. Choose any link in the text for more details.

  3. In the SAP Fiori design guidelines, examine the details of the list report floorplan.

    1. Choose Home on the left.

    2. Choose the Explore tile.

    3. Choose Floorplans at the top.

    4. Choose List Report Floorplan.

    5. Examine the definition of the list report floorplan. Choose any link in the text for more details.

  4. In the SAP Fiori design guidelines, search for the download and details of font 72.

    1. Choose Home on the left.

    2. Choose the Resources tile.

    3. Choose Download Font 72 at the top.

    4. Choose the link Font 72.

    5. Examine the details of font 72.

Log in to track your progress & complete quizzes