SAP Fiori Design Guidelines

Reinventing the SAP User Experience

SAP Fiori Teaser

SAP Fiori

SAP Fiori – meaning ‘flowers’ in Italian – represents SAP’s intent to deliver consumer-grade user experience to our most broadly and frequently used business transactions. Delivered with a fresh and modern user interface, SAP Fiori apps adhere to a consistent and responsive design that allows users to seamlessly experience the apps across various interaction channels – desktop, tablet, and mobile. The apps follow a simple and intuitive interaction pattern that enables users to accomplish their tasks quickly and effortlessly.

Fiori Design

SAP Fiori focuses on a simple and consistent user experience on many devices. This section introduces the design philosophy which all SAP Fiori apps are based on.

Additionally, a prototyping kit provides you with templates for various controls and patterns. Using those stencils allows you to easily create UI mock-ups in Microsoft PowerPoint.

From Transactions to Apps

Classical enterprise software is structured along transactions. The SAP Fiori design paradigm consciously breaks with the transactional approach. Instead, SAP Fiori is centered on people and their goals.

Placeholder

Learn how to design apps for SAP Fiori that are visually compelling while always deferring to the user’s context.

Principles

UI Overview

Grid Layout

Navigation

Animation

Typography

Colors

Icons

Theming

Prototyping Kit

Launchpad

The user’s personal collection of Fiori apps is accessed via the Fiori Launchpad. Its main function is to contain the Homepage which groups and displays various tiles that not only function as entry points to the apps but also display selected app-specific data for immediate review. Launchpad also takes care of user identification (login/logout), navigation, and Global Search, which is located within the Shell Bar.

Shell Bar

Shell Bar

The Shell Bar holds the menu icon, Global Search, and the account icon. It also offers login and logout services, therefore sidestepping the need for each app to provide those services as well.

Global Search

Global Search

Search functionality is readily available at the top of the screen across all apps and Business Objects.

Homepage

Home Page

After user login, the Homepage is the initial screen shown in Launchpad. It can be enriched with specific analytical reports.

App Framework

The App Framework describes the foundation of any SAP Fiori App. The basis of all apps is formed using the Page Header and the Footer Toolbar. The Page Header focuses on navigation services while the Footer Toolbar primarily contains all currently available actions. Those two patterns are part of every SAP Fiori app that is based on either the Master/Detail or the Full Screen template.

So, when creating a new SAP Fiori app, try use the Master/Detail or Full Screen template including the Page Header and Footer Toolbar as a base. Then you can add further UI elements such as Patterns and Controls to best support your future users.

Basic Framework

Shell Bar

The basis for most apps consists of the Page Header and the Footer Toolbar.

Full Screen

Fullscreen

The Full Screen provides maximum flexibility while still providing the look and feel of SAP Fiori.

Master/Detail

Master/Detail

The Master/Detail pattern offers smart, responsive layouts and is used in several apps.

Controls

Placeholder

Controls are simple elements such as buttons, checkboxes, sliders and the like which help you creating your app.

Patterns

Interaction design patterns are re-usable user interface objects that are somewhat more complex than simple controls. They describe recommended best practices for common use cases, and when followed throughout the design of your app, provide a consistent user experience across all SAP Fiori apps.

Charts

Charts

Charts are graphical representations of data and usually they can be overseen and understood much more quickly than the raw data they are produced from.

Date & Number Formats

Date and Number Formats

In order to deliver a consistent user experience, certain types of data should always be formatted in the same way.

Dialog

Dialog

Sometimes you need the user to make a decision or give a confirmation before she can proceed. This is realized with the dialog in form of an overlay.

Edit

Edit

Time and again, you’ll want to provide ways for your users to manipulate data using the ‘edit’ functionality.

Filter

Filter

Filters are used to sort big sets of data, allowing for advanced content exploration and selection.

Form

Form

Forms are used to present data and/or allow for users to enter data in a structured way.

Loading

Loading

Loading animations are used to provide smooth transitions from one screen to the next.

Messaging

Messaging

The message box is used to display system warnings, data loss warnings, or errors, and requires the user’s sign-off.

Quick Overview

Quick Overview

This pattern provides an immediately accessible popover that shows basic information about an item.

SAP Jam Integration

Jam Integration

SAP Jam is SAP’s enterprise social network solution connecting customers, partners, and employees with key information and processes in the cloud.

Search

Search

Whenever a given amount of data is too large for users to find something just by scanning through, you will want to offer search functionality.

Tab Content

Tap Content

Tabs provide access to item facets such as notes or attachments. Additionally, they present a nifty way of filtering lists.

Table

Table

Tables hold sets of line items and usually consist of a title, column headers, and line items.

Upload

Upload

Allow your users to attach files to business objects and share them with others.

Application Types

In this section you will find recommended templates for different types of apps. Each template is designed with a specific use case in mind. For instance, a Process App guides users through a step-by-step procedure and allows jumping between all the required steps for process completion.

Most application types make use of either the Master/Detail or the Full Screen template. The only exceptions are the Fact Sheets and the News App.

Analytical App

Approval App

Change App

Factsheets

News App

Process App

Shopping App

UI5

SAPUI5 is a client-side HTML5 and JavaScript-based rendering library and programming model that is optimized for consumption of SAP data. It combines new qualities such as openness and flexibility with known SAP strengths such as enterprise readiness and product standard support.

The key capabilities of UI5 are:

  • Rich control set including charts for all devices
  • Application development environment for all platforms
  • OData integration for timeless software
  • Extensibility concepts for “custom controls”
  • Modern theming and branding concepts
  • Embraces “open source” framework(s) and web standards
  • Targets developers with web development skills (HTML, CSS3, JS)

The benefits of UI5 are enormous: it provides business agility through the availability on any device and on any platform. Hence, user productivity and satisfaction are increased through flexibility, openness, and pixel perfect design.