Technology Blog Posts by SAP
cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Search instead for 
Did you mean: 
Read only

Upcoming Design Updates for the SAP Business Suite (SAP Fiori for Web)

ThomasReiss
Product and Topic Expert
Product and Topic Expert
‎2025 Apr 22 12:59 PM
1,550

Consistency of the user experience across the various applications used by a user is an important part of overall usability, helping users to feel confident and at ease when using a suite of products – no unexpected surprises. We have identified areas directly relevant to users and plan to introduce a number of design updates in SAP Fiori for web across our suite of products to further increase consistency. We are confident that they will all improve user satisfaction – but take a look for yourselves!

The areas we have redesigned and which we plan to provide across our suite of products this year and next year are:

  • Shell bar (at the top of the screen)
  • Navigation menu: side navigation
  • User menu
  • Notifications
  • Search in the shell bar

All these planned improvements are all very intuitive. Nevertheless, you might want to inform your users about these changes prior to an upgrade.

A definite highlight for users of SAP S/4HANA Cloud and SAP S/4HANA is the planned new side navigation menu, which gives users direct access to their favorite apps from wherever they are – without having to first go to My Home to find them. This is currently planned to become available in the releases in the second half of 2025.

This post consists entirely of forward-looking statements, for which our usual legal disclaimers apply: our plans are subject to change without notice. The features are planned to appear in stages, so don’t expect all of them necessarily to come in the same release. Also, the design previews you see here are not all 100% final, so expect some minor changes before they get released in products.

 

Shell Bar

The shell bar appears at the top of every screen of every SAP application, and already looks very similar across our products. Now we are going one step further by specifying it in such a way that it follows an identical design, and ensuring this with our UI technology SAPUI5 by providing a web component for use by our products in implementing the design. For example, we plan to replace the existing implementation of the shell bar in the SAP Fiori launchpad with the new web component seamlessly embedded in SAPUI5.

Figure 1 shows the target design. In the examples in the next section “navigation menu” you can see a preview for SAP S/4HANA Cloud running in the SAP Fiori launchpad (Figures 7 and 8).

The target design provides:

  • A consistent product representation across our suite of products by having a dedicated place for the product identifier.
  • Guidance for providing standard patterns for the part in the middle – for example as shown in Figure 1 indicating that you are in a trial system with 30 days remaining, or in Figure 8 indicating the name of the application in SAP S/4HANA Cloud and SAP S/4HANA.
  • Stable positioning of shell actions such as opening Joule, Notifications, Help and User Menu.

The design also gives you a sneak preview of a planned product-switcher icon, which would allow users to switch directly to other products, and which would probably come later than the new shell bar itself. Similarly the “Trial” indicator may come with late releases.

Figure 1: Target design for the updated shell bar. Some of the features shown may come in later releases than others. Alt Text: Image shows only the shell bar, with the menu icon on the left, followed by the SAP logo, text “Product Identifier”, a vertical separator line, text “Trial” in a mauve container and text “30 days remaining”. On the far right an icon with 3x3 dots for the planned product switcher, then going left: a user avatar, a help icon, a notifications icon with a red indicator showing unread notifications, the Joule icon and a search field.Figure 1: Target design for the updated shell bar. Some of the features shown may come in later releases than others. Alt Text: Image shows only the shell bar, with the menu icon on the left, followed by the SAP logo, text “Product Identifier”, a vertical separator line, text “Trial” in a mauve container and text “30 days remaining”. On the far right an icon with 3x3 dots for the planned product switcher, then going left: a user avatar, a help icon, a notifications icon with a red indicator showing unread notifications, the Joule icon and a search field.

Navigation Menu: Side Navigation

Many SAP products already offer a navigation menu on the left of the screen. With today’s wide screens on desktops and laptops, this is a good use of screen space, and also a pattern already familiar to many people. Hence we have decided to apply that approach to navigation across the SAP Business Suite in upcoming releases.

The new design offers three variants, as depicted in Figure 2. In all cases, the navigation menu appears on the left of the screen. The menu can be always fully visible (“Expanded”), or it can be collapsed to leave more space for the actual application UI (“Collapsed”), or it can appear as an overlay, after the user has clicked on the menu icon (“Overlay Mode”).

The menu can have a hierarchy of entries. In Figure 2, the “Favorites” section has been expanded to show two items below it, each labelled “Favorite item” in the example.

Figure 2: Side navigation variants. Alt Text: three variants shown for a vertical list of navigation targets: Expanded, Collapsed and Overlay Mode: The collapsed mode shows only icons, Expanded and Overlay Mode show names next to each item. At the top, the list starts with “Home” and “Favorites”. Below that that a “Navigation Group” which has been expanded to show five “Nav Item” entries, one of which is expanded to show two “Child Item” entries. At the very bottom, separated by vertical white space from the navigation targets, two quick actions are displayed (“Quick Create” and “New Item”).Figure 2: Side navigation variants. Alt Text: three variants shown for a vertical list of navigation targets: Expanded, Collapsed and Overlay Mode: The collapsed mode shows only icons, Expanded and Overlay Mode show names next to each item. At the top, the list starts with “Home” and “Favorites”. Below that that a “Navigation Group” which has been expanded to show five “Nav Item” entries, one of which is expanded to show two “Child Item” entries. At the very bottom, separated by vertical white space from the navigation targets, two quick actions are displayed (“Quick Create” and “New Item”).

Figures 3, 4 and 5 show design mock-ups of an imaginary application listing sales orders using the patterns “Expanded”, “Collapsed” and “Overlay Mode” respectively.

Figure 3: Side navigation: example of the “Expanded” pattern. Alt Text: The expanded pattern on the left of the screen. The majority of the screen to the right shows a tabular list of sales orders.Figure 3: Side navigation: example of the “Expanded” pattern. Alt Text: The expanded pattern on the left of the screen. The majority of the screen to the right shows a tabular list of sales orders.

Figure 4: Side navigation: example of the “Collapsed” pattern. Alt Text: The collapsed pattern on the left of the screen, which shows a tabular list of sales orders.Figure 4: Side navigation: example of the “Collapsed” pattern. Alt Text: The collapsed pattern on the left of the screen, which shows a tabular list of sales orders.

Figure 5: Side navigation: example of the “Overlay Mode” pattern. Alt Text: The overlay mode pattern on the left of the screen, covering the first two columns of the tabular list of sales orders.Figure 5: Side navigation: example of the “Overlay Mode” pattern. Alt Text: The overlay mode pattern on the left of the screen, covering the first two columns of the tabular list of sales orders.

Side Navigation in SAP S/4HANA Cloud and SAP S/4HANA

Figures 6, 7 and 8 give you a preview of what this would look like for SAP S/4HANA Cloud and SAP S/4HANA (on-prem) later this year (Q3/2025 and Q4/2025 respectively) – as you can see, we have opted for the “Overlay Mode” pattern. Note that some minor details of the design are likely to change before being released.

Figure 6 shows the initial menu, as it would look when a user clicks on the menu icon the first time. What is new compared to the current navigation menu is the section “Favorite Apps” which contains the user’s favorite apps, which they have personalized on the My Home page. As before, the menu provides direct access to a user’s Spaces and Pages.

Figure 6: Planned side navigation for SAP S4HANA Cloud and SAP S/4HANA: Initial menu. Note that the design is subject to minor changes before being released. Alt Text: The image shows the top left of the My Home screen with the menu opened in overlay mode. The list starts with the entry “My Home”, followed by “Favorite Apps” with an “>” indicator that it is not expanded, “My Spaces” which has been expanded and shows entries “Billing”, “Sales Management”, “Price Management”, “Order Fulfillment Managem…”, “Order Fulfillment Execution”. “Price Management” and “Order Fulfillment Execution” are single entries, the others have ”>”  indicators that they have not been expanded. At the bottom of the overlay, below a horizontal separator line: “All Spaces” can be chosen.Figure 6: Planned side navigation for SAP S4HANA Cloud and SAP S/4HANA: Initial menu. Note that the design is subject to minor changes before being released. Alt Text: The image shows the top left of the My Home screen with the menu opened in overlay mode. The list starts with the entry “My Home”, followed by “Favorite Apps” with an “>” indicator that it is not expanded, “My Spaces” which has been expanded and shows entries “Billing”, “Sales Management”, “Price Management”, “Order Fulfillment Managem…”, “Order Fulfillment Execution”. “Price Management” and “Order Fulfillment Execution” are single entries, the others have ”>”  indicators that they have not been expanded. At the bottom of the overlay, below a horizontal separator line: “All Spaces” can be chosen.

Figure 7 shows the “Favorite Apps” expanded while on the My Home page. You can see that the list of favorite apps corresponds to the apps in the Favorites section of My Home (the section directly below the navigation menu). The user has defined two folders in the Favorites section (“Sales” and “Billing”); these are also shown as folders in the navigation menu. Similarly, the “My Spaces” section of the navigation menu lists the spaces which the user has pinned to the top of the My Home page.

Figure 7: Planned shell bar and side navigation for SAP S4HANA Cloud and SAP S/4HANA: Favorites expanded. Note that the design is subject to minor changes before being released. Alt Text: The image shows the whole My Home page, with the navigation menu on the left, showing the Favorites expanded, containing a list of eight apps followed by two groups “Sales” and “Billing”. These have the same names as the two groups and eight apps shown in the My Home page, in the same order (from left to right in My Home).Figure 7: Planned shell bar and side navigation for SAP S4HANA Cloud and SAP S/4HANA: Favorites expanded. Note that the design is subject to minor changes before being released. Alt Text: The image shows the whole My Home page, with the navigation menu on the left, showing the Favorites expanded, containing a list of eight apps followed by two groups “Sales” and “Billing”. These have the same names as the two groups and eight apps shown in the My Home page, in the same order (from left to right in My Home).

The main advantage of the new side navigation for users is the fact that they can access their favorite apps as well as their spaces and pages directly from any application, without first having to navigate to the My Home page. Figure 8 shows what this would look like, using the “Manage Sales Orders – Version 2” application as an example.

Figure 8: Planned Side Navigation for SAP S4HANA Cloud and SAP S/4HANA: available from within every application. Note that the design is subject to minor changes before being released. Alt Text: Image shows the top left of the screen, showing the same navigation menu as in Figure 7, but overlayed above the “Manage Sales Order – Version 2” app, which shows a list with only one entry.Figure 8: Planned Side Navigation for SAP S4HANA Cloud and SAP S/4HANA: available from within every application. Note that the design is subject to minor changes before being released. Alt Text: Image shows the top left of the screen, showing the same navigation menu as in Figure 7, but overlayed above the “Manage Sales Order – Version 2” app, which shows a list with only one entry.

User Menu

The user menu, which appears when clicking on the user’s avatar icon at the top right of the screen, has also been redesigned. Figure 9 shows the target design, which gives more space to show the user’s photo, if one is maintained. The design specifies that the settings should always appear at the top of the list, followed by the product-specific menu items. The sign-out option is now more clearly visible in its own separate section.

Figure 10 shows what the new design is planned to look like for SAP S/4HANA Cloud and SAP S/4HANA later this year, comparing it with the current user menu.

Figure 9: Target design for updated user menu. Alt Text: Two images of an overlay are shown. The image on the left, below a heading “Simple”, shows a centered circular photo of the user, with their name, e-mail address and role below it. Below that, left aligned, three items are listed, each first with an icon and then the name “Settings”, “Legal Information”, “About”. At the bottom, below a horizontal separator bar, right aligned in blue an icon and text “Sign Out”. The image on the right, below a heading “With Other Accounts”, is identical to the one on the left except for a “Manage Account” button below the user’s role, and below that an item “Other Accounts (3)” followed  by a an edit icon. There is an expand indicator “>” to the left of the “Other Accounts (3)” text.Figure 9: Target design for updated user menu. Alt Text: Two images of an overlay are shown. The image on the left, below a heading “Simple”, shows a centered circular photo of the user, with their name, e-mail address and role below it. Below that, left aligned, three items are listed, each first with an icon and then the name “Settings”, “Legal Information”, “About”. At the bottom, below a horizontal separator bar, right aligned in blue an icon and text “Sign Out”. The image on the right, below a heading “With Other Accounts”, is identical to the one on the left except for a “Manage Account” button below the user’s role, and below that an item “Other Accounts (3)” followed  by a an edit icon. There is an expand indicator “>” to the left of the “Other Accounts (3)” text.

Figure 10: Current and planned user menu for SAP S/4HANA Cloud and SAP S/4HANA. Note that the “Adapt UI” entry is not included on the right since the example user does not have the necessary key user authorization. Alt Text: Two images are shown, each only showing the top right of the screen with the user menu pop-over under the user avatar in the shell bar. On the left the current user menu is shown, on the right the planned menu, which is larger, and starts with a user avatar followed by the user name and e-mail address, and then the menu items left-aligned. At the bottom, below a horizontal separator bar, an icon and “Sign Out” text is shown, right-aligned.Figure 10: Current and planned user menu for SAP S/4HANA Cloud and SAP S/4HANA. Note that the “Adapt UI” entry is not included on the right since the example user does not have the necessary key user authorization. Alt Text: Two images are shown, each only showing the top right of the screen with the user menu pop-over under the user avatar in the shell bar. On the left the current user menu is shown, on the right the planned menu, which is larger, and starts with a user avatar followed by the user name and e-mail address, and then the menu items left-aligned. At the bottom, below a horizontal separator bar, an icon and “Sign Out” text is shown, right-aligned.

Notifications

The new target design for notifications standardizes how notifications are to be displayed across the SAP Business Suite in the future, for applications as well as for central services such as SAP Build Work Zone. Figure 11 shows the target design, which shows what notifications from a central notification service could look like, with notifications from various products. Users will be able to sort the list: by date or by importance. As you can see in figure 11, the results in the list are grouped, e.g. by today, yesterday, last week and so on. Clicking on the settings icon takes you directly to the notifications section in the user settings dialog.

Figure 11: Target design for notifications. Alt Text: The image shows the top right of the screen, with the notification pop-over below the shell bar notification icon. It shows two expanded groups “Today” and “Yesterday”, each showing two items with header in bold and two lines of text. Below the text a line indicating the source product and application along with a date or time. The first item has an additional line containing a red “Important” indicator. The header of the pop-over has “Clear All” text, a sort icon and a settings icon on the very right.Figure 11: Target design for notifications. Alt Text: The image shows the top right of the screen, with the notification pop-over below the shell bar notification icon. It shows two expanded groups “Today” and “Yesterday”, each showing two items with header in bold and two lines of text. Below the text a line indicating the source product and application along with a date or time. The first item has an additional line containing a red “Important” indicator. The header of the pop-over has “Clear All” text, a sort icon and a settings icon on the very right.

Search in the Shell Bar

Finally, we are also planning to standardize the design of search in the shell bar, as you can see in Figure 12. The most relevant items should appear at the top of the suggest list, followed by groups of further search hits.

 

Figure 12: Target design for search in the shell bar. Alt Text: The image shows the shell header bar with the text “John Walters” entered in the search field, below which a drop-down menu lists five hits (“John Walters”, “John’s Digital Services”,…), followed by a section “Sales Orders” followed by two entries (“15665566 – Media John Productions”,…) and a section “Sales Quotes” (“46465464 –John’s Ventures”,…). At the very bottom, below a horizontal separator bar, the text in blue “Show All search Results [N]”.Figure 12: Target design for search in the shell bar. Alt Text: The image shows the shell header bar with the text “John Walters” entered in the search field, below which a drop-down menu lists five hits (“John Walters”, “John’s Digital Services”,…), followed by a section “Sales Orders” followed by two entries (“15665566 – Media John Productions”,…) and a section “Sales Quotes” (“46465464 –John’s Ventures”,…). At the very bottom, below a horizontal separator bar, the text in blue “Show All search Results [N]”.

Final words

I hope you are looking forward to seeing these design updates in our products as much as I am!

In case you missed my recent series of blog posts about our recent UX innovations, do have a look, it starts with this one:

SAP User Experience Q1/2025 Update – Part 1: Many New Innovations Available (AI, Joule and More)

Particular highlights in the series are the great uses of GenAI in SAP S/4HANA Cloud Public Edition and in SAP SuccessFactors, which are covered in parts 2 and 3. But you’ll also learn about the new Home Page in Fieldglass, new applications and innovations in Ariba and SAP CX, SAC and BTP with Horizon, plus UI design and technology updates. Here is the full list of the posts with links:

  1. Central UX Services (the first post)
    • Joule – latest UX innovations
    • Central entry points and services:
      • SAP Start / SAP Build Work Zone
      • SAP Task Center
      • SAP Mobile Start
  2. ERP: SAP S/4HANA Cloud Public Edition 2502 and SAP Fiori launchpad (AI, Joule and More).
  3. HR: SAP SuccessFactors (AI, Joule and More).
  4. Spend: SAP Ariba and SAP Fieldglass.
  5. Selling: SAP Customer Experience and SAP Industry Cloud – Retail.
  6. Analytics and Platform: SAP Analytics Cloud and SAP Business Technology Platform.
  7. UI Design and Technology for web and mobile.