Page Types and Patterns

Intro

Welcome to Chapter 4 of the SAP Design System Essentials. To view the whole learning track, go to SAP Design System Essentials Track

In this chapter you will learn:

• the difference between layout and floorplan, how many floorplans are available and how to choose the right one depending on the use case you have.
• what are the layouts and patterns used in SAP's mobile platforms.

Section 1

Web: Page types

The largest container within the design system is the page. This consists of an entire viewport in the application. Within this page we have page types, most commonly the dynamic page, made up of functional areas to design within, and floorplans, which fill those areas with pre-defined combinations of components based on common user tasks. Like all of the other elements within the design system, all page types and floorplans are designed to align with all product and accessibility standards.

Layouts

The standard page type for SAP applications is the dynamic page. This is the baseline container for any page design. It includes the entire viewport of an application and is split into three main sections:

1. Header
2. Content
3. Footer toolbar

Floorplans

Floorplans: A floorplan fills a page with a specific layout tied to common user scenarios. The floorplan is made up of UI components and designed to cover common use cases across applications.

The Overview Page (OVP) is a data-driven floorplan that brings all the information users need into a single page. It helps them focus on key tasks and quickly view, filter, and react to information, with each task or topic represented by a card.

The List Report lets users view and work with large sets of items, offering powerful features for finding and acting on relevant ones. It’s often used as an entry point for navigating to item details.

The Analytical List Page (ALP) helps users analyze data from different perspectives, investigate root causes through drilldown, and act on transactional content. It uses data visualization and business intelligence to highlight key insights.

The Worklist displays a collection of items that users review and act on, typically by completing or delegating each one.

The Object Page displays and categorizes all relevant information about a single object. Users can navigate the content via anchor or tab navigation and switch between display and edit modes.

The Wizard guides users through long or unfamiliar tasks by breaking them into clear, sequential steps. It is usually used for creating complex objects or when the user needs to follow a precise process.

The Initial Page helps users quickly reach a single object to view or edit. Through one input field, they can enter an ID, scan a barcode, or use assisted input to load the data available for the object.

Video tutorial

Check out the How to choose the right floorplan article in the Guidelines for more info.

Section 2

Mobile: Patters and Layouts

SAP’s mobile platforms use patterns and layouts. Patterns define how you can use the elements of the system–from how they function to how the user moves within a specific flow from screen to screen. Layouts allow you to create organized and accessible interfaces across any device within a specific platform (e.g. Android or iOS).

Patterns bring together UI components to fill a page based on common user needs.

Layouts allow you to design for common use cases or user flows. The three parts of the layout are the app bar, body, and navigation. These are designed to scale responsibly across devices like mobile phones and tablets.

Schematics illustrating the three main UI regions: app bar (A), body (B), and navigation (C)

Continue Learning

Back to SAP Design System Essentials Track