Best Practices for Designing SAP Fiori Apps
Intro
After the “Discover” phase of the design-led development process, your product team knows which apps need to be designed for whom. In other words, you know the user’s business role and tasks.
Design phase
How do you translate this into an SAP Fiori design?
Start by deciding on the SAP Fiori design language:
- Is a native mobile app required because you need device capabilities such as a camera, or offline capabilities?
- Does it make sense to offer the app in a conversational bot for managing service calls, for example?
- Do you need to make the app available in different design languages to make use of their specific capabilities?
If your use case doesn’t require any device-specific capabilities or modifications, use SAP Fiori for web as your design language. Due to the responsive and adaptive design, web apps run on both desktop and mobile devices. The apps run in the device browser, so there’s no need to install any software.
The Basics
If you’re designing SAP Fiori web applications, familiarize yourself with the essentials:
- [internal_only]Stick to the guidelines for SAP Fiori for web[/internal_only]
- Keep the design principles in mind
- Understand the launchpad
- Get to know the information architecture: Layouts, floorplans, UI elements
- Get to know the most important general patterns
[internal_only]
Stick to the guidelines for SAP Fiori for web
Use them as your single source of truth for all design-related questions.
The guidelines comply with the UX-related SAP product standards for Consistency and Accessibility.
Applying the guidelines helps you to fulfill these product standards.
[/internal_only]
Keep the design principles in mind
Use the SAP Fiori design principles as the overarching guidance: Role-based, adaptive, simple, coherent, and delightful.
Understand the launchpad
The SAP Fiori launchpad is a shell that provides a role-based access to SAP Fiori apps (using the home page and spaces) and a shell bar on top that hosts a logo, navigation options, enterprise search, notifications, personalization, and more. The shell bar is always visible.
Get to know the information architecture: Layouts, floorplans, UI elements
SAP Fiori is based on modular components that together build a consistent information architecture. In this section, we’ll explain what we mean by pages, layouts, floorplans, and UI elements. You’ll then see how pages are structured and populated with UI elements.
Pages, Layouts, Floorplans
The basic entity in SAP Fiori is a page. A page uses the entire viewport of an app and consists of three main areas: A header, a content area, and an optional footer toolbar. We call this layout the dynamic page.
The following picture shows how a page is composed:
For use cases relevant to many applications, we have defined standard page layouts, which we refer to as floorplans.
Examples:
- The list report, for finding, identifying, and selecting business objects.
- The object page, for displaying, creating, and editing a single business object.
You can find all floorplans in the Floorplans section of the navigation structure.
Most floorplans are based on the dynamic page and come with a specific combination of UI elements in the header and content areas. For use cases that cannot be designed using a floorplan, take the dynamic page as a basis.
Instead of showing one page at a time, you can also show up to three pages next to each other if they have a list-detail relationship. We call this the flexible column layout. For example, the first column contains a list report floorplan with all business objects, and the second the object page floorplan of the selected business object.
The following picture shows a flexible column layout with three pages:
Flexible column layout with 3 pages
Dynamic Page: Structure of Header and Content Area
Most of the actual business content appears in the page header and content area.
- The header contains content that is relevant for the entire page and is visible at all times.
- The content area is the user’s main work area.
Header
The following picture shows the structure of the page header.
Header structure
The header consists of:
- A title bar with a title and an optional toolbar.
- Content (optional).
- Header navigation (optional).
The header navigation is used to quickly access specific parts of the content area. You can either set anchors on the page or split the content in different tabs. Keep in mind that even if the content is split in different tabs, it is still one page.
Content Area
The structure of the content area varies depending on the header navigation. There are three options:
No header navigation
The content area is organized in one or more content blocks.
Anchor navigation
The content area is organized in sections. Each section contains one or more content blocks.
Tab navigation
The content area uses a tab container. The tab container contains one or more content blocks.
Content area - No header navigation
Content area - Anchor navigation
Content area - Tab navigation
Content blocks represent different aspects of the overall page content, such as a business object or a workflow. The blocks help you design the content area in a well-balanced way. A content block itself is a container with a title and an optional toolbar on top, and a layout to arrange the controls:
Content block
Example
The example below shows a page without header navigation and with 3 content blocks in the content area:
Content area with 3 content blocks
The three blocks above contain:
No.
Content Block
Description
Form container with:
- Title bar, showing the title (a) and toolbar (b)
- 2 form groups (c), each form group contains a form with a title and label-value pairs
Chart container with:
- Title bar, showing a title (a)
- Column chart (b)
Table container with:
- Title bar, showing the title (a) and toolbar (b)
- Table with items (c)
Floorplan Structure
Floorplans come with a predefined structure in the header and content areas, some more restrictive, such as the list report, some less, such as the object page floorplan. See the respective floorplan articles for a detailed description.
The picture shows a simplified representation of a list report (for a complete description, see List Report):
- The header title bar contains a title and a toolbar, and the header content contains a filter bar with search fields. No other controls apart from the filter bar are allowed in the header content. You could use the header navigation to show different tables and/or charts in the content area.
- The content area holds a table and/or a chart. No other content blocks, such as forms, are allowed.
Explore all layouts, floorplans, and UI elements.
List report header
List report content
Get to know the most important general patterns
SAP Fiori includes interaction patterns that we[internal_only] would like you to[/internal_only] use consistently in all SAP Fiori web apps. Make yourself familiar with these patterns. We recommend starting with:
You can find all patterns in the General Patterns area in the navigation structure.
See SAP Fiori in Action
[internal_only]
Reading guidelines is one thing, trying out how it works another. Use these sources to experience SAP Fiori:
- SAPUI5 samples allow you to check the behavior of layouts and controls, such as the dynamic page, tables, and buttons.
- Demo systems orchestrate all SAP Fiori layouts, floorplans, controls, and patterns in sample apps, tailored to a business role.
[/internal_only]
[external_only]
Reading guidelines is one thing, trying out how it works another.
SAPUI5 samples allow you to check the behavior of layouts and controls, such as the dynamic page, tables, and buttons.
[/external_only]
Keep in mind that SAPUI5 samples may not always be 100% SAP Fiori compliant. This is because SAPUI5 is also consumed by products not using the SAP Fiori design system.
[internal_only]To ensure that your apps are compliant, always cross-check with the SAP Fiori design guidelines.[/internal_only]
3 Steps Toward a Consistent SAP Fiori Design
Step 1: Download the Latest UI Kit
The design assets in the UI kit are high-fidelity drafts of SAP Fiori layouts, floorplans, and UI elements. Because the design assets follow the guidelines, they can help you to create consistent and guideline-compliant SAP Fiori apps. You also need to download the SAP typeface 72 and the SAP icon font.
To download the UI kit, go to SAP S/4HANA Web UI Kit.
Step 2: Choose Your Floorplans and Layouts
- If possible, use one of the existing floorplans.
For more information, see When to Use Which Floorplan and Mapping Task Types to Floorplans. - If none of the predefined floorplans fit your use case and you need to create a freestyle design, use the dynamic page as the basis.
- Decide whether the app should run in a full screen layout (that is, 1 page at a time) or a flexible column layout (with up to 3 columns, each representing a page). With the flexible column layout, you can manage list-detail relationships.
For more information, see Full Screen vs Flexible Column Layout.
To make app development more efficient, most floorplans are available as SAP Fiori elements.
The developer needs to connect an SAP Fiori element with back-end system services (such as “Create, Edit”) for a business object (such as “Purchase Order”) and metadata (object fields like “Supplier” or “Delivery Date”).
The user interface is generated automatically by the SAP Fiori elements framework, thus making the implementation faster. The framework also guarantees UX consistency and compliance with the SAP Fiori design guidelines.
The trade-off is that it is less flexible if your use case requires a design that is not covered by the SAP Fiori element. Check with your developers whether your design can be implemented using an SAP Fiori element.
For more information, see Introduction to SAP Fiori Elements.
Step 3: Craft the Details
- Design the details of the different floorplan areas: header, content area, and footer. In the respective floorplan article (see navigation), you’ll find guidance on which controls can be used and how to arrange them.
- Balance your content area well and ensure that your design works for different screen sizes.
- Don’t forget the wording: Consistent and user-centric terms make your apps understandable. We’ve defined a comprehensive set of terms for you to use consistently. See the text guidelines.
[internal_only]We recommend aligning the wording of buttons, titles, field labels, messages etc. with your user assistance developer.[/internal_only] - Use colors and icons consistently.
- If you want to emphasize or classify information using colors, stick to the semantic colors defined for SAP Fiori.
- Use icons only for their intended purpose and do not transfer them into another context.
- Consider accessibility, including support for screen readers and keyboard navigation/interaction. See Accessibility in SAP Fiori.
[internal_only]
Get Help
If you get stuck with your design, the SAP Fiori Design community is the place where you can get support: Ask your questions here.
[/internal_only]
Device Frames for Usability Testing
Device frames