SAP Fiori Launchpad Spaces | SAP Fiori for Web Design Guidelines (2024)

A space and its pages structure the most relevant apps for users with a certain business role. The content of a space is visualized by tiles which allow users to quickly launch apps to access the business content they need to complete their business related tasks.

Users can easily personalize their pages directly by rearranging or adding tiles. Users have access to advanced personalization options via the edit mode. Users may have a personalized space “My Home”.

A space serves as an entry point for a business role and shows information and functions that are assigned to this business role. A space is represented as a navigation item in the top level navigation. A user may have multiple spaces assigned, which results in multiple entries in the top-level navigation. A space consists of one or multiple pages that are used to further structure the content of a space.

A space title is mandatory. Do not use the business role name as a space title, use the name of the work area of a business role instead.

A page is part of a space, and a space may have one or multiple pages. Multiple pages allow users to structure the space into multiple self-contained work-contexts. Business roles with fewer apps may use one page per space, whereas business roles with more apps may use multiple pages per space. A page consists of sections that are used to further structure the content.

Do not use function or product-oriented page titles, and do not repeat the space title. Use task-oriented page titles that summarize the tasks that can be performed on the page.

A section structures the content of a page semantically. To ensure consistency across pages within a space and across spaces, we highly recommend using a section “Quick Access” to summarize the most important apps and/or a section “Insights” to summarize the most important analytical apps. To aim for lean pages, we recommend using between 2 and 5 sections per page. A section consists of tiles that visualize the content of a space.

A section title is optional.Use a term summarizing the tasks that can be performed in the section.

Recently Added Apps

When the user adds an app to a page using theapp finder, a dedicated Recently Added Apps section appears at the top of the page that contains the added app. Once the user moves the app to another section, the Recently Added Apps section disappears.

Users can switch between the launchpad home page and launchpad spaces. To personalize the pages, users may either directly rearrange tiles on a page or open the edit mode to have access to advanced personalization options.

Switching between Spaces and Home Page

Users can switch between the launchpad home page and launchpad spaceswith the user actions menu. Navigate to Settings,then Spaces, and activateUse Spacesto switch to launchpad spaces. Deactivate Use Spaces to switch back to the launchpad home page. In both cases the launchpad reloads.

Edit Mode

Users may use the Edit Mode to access advanced personalization options, such as tile actions or section actions to personalize a page.

• (4a) Convert: Users can convert the size of a tile based on the current tile size into a link, a tile, a flat tile or a flat wide tile by clicking on the respective Convert action in the action menu.
• (4b) Move: Users can also selectMovein the action menu to rearrange tiles.

How to Design a SAP Fiori Launchpad Space

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. Use tiles to visualize the content of a space. Beside tiles, more options to visualize the content will be available in later releases.

Spaces
A space comes with a predefined set of apps related to the user’s business role. Show only the most important and most used apps per space that users need to complete their daily tasks. To identify those apps, we recommend following the “Day in a life of…” approach: What are the most important apps for the users? How often do they use them? What do they need first, what do they need next? Are there any dependencies in the workflow? What are the insights they need on a regular basis? Which apps can be semantically bundled? Are there self-contained work-contexts? Structure the space according to these patterns.
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.

Note: Don´t worry about the apps you leave out. 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.

Pages
Use multiple pages if you identify during the “Day in a life of…” approach several self-contained work-contexts. This 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.

In General

• Aim for lean spaces and pages:
  • Try to use between 2 and 5 sections per page.
  • Try to show between 2 and 7 apps per section, but 25 apps at most per page.
• Go for consistency for all titles within a space and across SAP Fiori.

Space Titles

• A space title is mandatory.
• Do not use business role names as space titles, use the name of the work area of the business role instead.
• Use specific terms for the application area such as “Internal Sales”, rather than “Sales”, or “Accounts Receivables” rather than “Accounting”.
• Try to avoid the term “Management” for non-managerial roles.
• In rare cases, you may need to use specifications or a space title to differentiate spaces for similar but not identical roles. In this exceptional case, a dash “-” can be used. Example:Project Controller – Finance.
• Examples for space titles are:
  • “Internal Sales” for the business role Internal Sales Representative
  • “Accounts Receivable” for the business role Accounts Receivable Accountant
  • “Convergent Invoicing” for the business role Invoicing Specialist
  • “In-House Repair” for the business role Service Representative – In-House Repair

Page Titles

• Do not use function or product-oriented page titles. Use work-context related terms that summarize the tasks that can be performed on the page. Example: “Long-Term Planning” instead of “Predictive Material and Resource Planning”.
• Do not repeat the space title.
• If a work-context specific term can’t be found for the page that summarizes the content of the pages across the space, use “Overview” as a page title.

Section Titles

• A section title is optional.
• In case you summarize the most important apps in a section to provide quick access, do not use “Quick Start” as a section title, but “Quick Access”.
• In case you summarize the most important analytical apps in a section, do not use section titles such as “Analytics”, “Analysis”, “Reporting”; use“Insights”instead.
• For all other section titles, use task-oriented titles to summarize the tasks that can be performed. Example: “Sales Order Creation” instead of “Create Sales Order”.

Elements and Controls

Implementation