With SAP S/4HANA 1908 we take you on the first step of the SAP Fiori 3 journey, which evolves the award-winning SAP Fiori design for all SAP products to fully support the Intelligent Suite, running on any device.
Rather than holding back some of the innovations and delivering everything later in one big bang, SAP has chosen to deliver the SAP Fiori 3 innovations in a stepwise approach. With SAP S/4HANA Cloud 1908, the very first step becomes available to end users: the new Quartz theme as a successor of the Belize theme used with SAP Fiori 2.0, and the new shell header bar, which also replaces the viewport introduced with SAP Fiori 2.0.
Have a look at this short video to get a brief overview of SAP Fiori 3 and to see this first step in action with SAP S/4HANA Cloud 1908:
The new Quartz theme is lighter and more neutral, to blend more into the background, giving application content the center stage. It is simple and minimalistic, making it easy for customers to theme it to their brand. Here you see the new theme applied to an SAP S/4HANA Cloud 1908 home page:
In addition to the new Quartz theme, the new shell header bar available today has been aligned to be a best fit for all SAP products, and to be as simple as possible. Instead of having a company logo and a home button, we now use the company logo to take you to the home page. When on the home page, you can now use a navigation menu to go directly to all apps available to you quickly and easily – as demonstrated in the video.
Probably the most noticeable change is the simplification achieved by removing the SAP Fiori 2.0 viewport (the two animated areas on the left and right of the screen – the Me-Area and the Notifcation Area). Instead of the animation, more simple menus have been introduced, making it easier for all our products to adopt the new design. The functionality of the Me-Area continues to be accessed by clicking on the user image, which now gives access to the user action menu, as this is very common in web applications (see below).
In addition to updating action placement in the shell header bar, we have also updated action placement and terminology in apps, so that action buttons are positioned more intuitively.
One of the central motivations of Fiori 3 was the development of a design that could be adopted across all products at SAP leading to a more consistent and integrated experience across the entire portfolio – so as to provide a consistent user experience across the various SAP products that an end user needs to work with. Many of the design changes were motivated by this goal.
To ensure this, SAP Fiori 3 has been designed and developed jointly with all product design teams. Some common rules have been agreed upon and are planned to be followed across all products such as the consistent use of the new theme and shell bar, but also more detailed aspects like a consistent iconography, terminology or placement of common actions across all products – so that your end users have a better user experience overall, not just for SAP S/4HANA Cloud.
As an example, this first step of SAP Fiori 3 is planned to be released with SAP S/4HANA on-premise in the 1909 release in September.
Today, with SAP S/4HANA Cloud 1908, we are delivering this first step of SAP Fiori 3 with a new theme and a simpler shell bar. These are planned to be adopted by further products going forward, as a first step towards a consistent user experience. But this is just the beginning – let’s have a look at the further innovations we are planning.
New home pages – One of the new aspects most requested by the various product units was being able to provide more information on home pages, which the design is supporting via cards; here is a preview of this feature, which we expect to be one of the next steps to become available for SAP Fiori 3:
More options to structure content – In addition to the simple launchpad approach that was introduced with SAP Fiori, customers are asking for the possibility to offer multiple home pages and sub-pages and to combine structured and unstructured content.
Central inbox and task list – The central inbox is planned to provide access to all work items a user has, from all products they are using. Notifications will draw the user’s attention to critical tasks.
Intelligence – We have reimagined how artificial intelligence can become a key part of the experience by deeply integrating them into the foundation of the design to provide:
As I mentioned, these innovations of SAP Fiori 3 are planned to come step by step.
Coming back to what is available today: the good news for developers of SAP Fiori apps is that the SAP Fiori 3 theme Quartz is compatible to the SAP Fiori 2.0 theme Belize: as long as you have built SAP Fiori apps using SAP Fiori elements, SAPUI5 or OpenUI5, without adding your own CSS and without developing your own UI5 controls, your app will work fine with SAP Fiori 3 without any technical adoption effort. If you have built your own controls, or you have your own CSS (which we advise against), you will need to check whether they still look OK with the new Quartz theme. If you do have your own controls or CSS, do also check your apps for mobile devices, since we have made the metric for the cozy mode slightly more compact, so that for example more lines in a table can be shown on the screen.
Further good news for developers using SAP Fiori elements: the updated action placement in apps, so that action buttons are positioned more intuitively, is provided out of the box for developers by SAP Fiori elements.
Finally: should you have created your own custom theme, then don’t worry: it will continue to work without you needing to make any adjustments.
To have a closer look at how to work with the SAP Fiori 3 launchpad, watch the SAP Fiori launchpad guided tour.
For developers interested in details on the above first steps of SAP Fiori 3 available with SAP UI5 1.65, have a look at the documentation: SAPUI5 – What’s New in 1.65 and What’s New in the SAP Fiori launchpad for SAP S/4HANA Cloud 1908.
If you want more information on SAP Fiori 3 plans, a great way to get an overview is via the openSAP course Intelligent Enterprise User Experience with SAP Fiori 3 (one week with five units of 15 minutes each). You can always find out more about our plans in the SAP Fiori Road Map, which can also be found on http://www.sap.com/roadmaps by searching for “Fiori”.
Should you plan to visit SAP TechEd this year, then we’d be happy to welcome you and tell you more about SAP Fiori 3.
Rather than holding back some of the innovations and delivering everything later in one big bang, SAP has chosen to deliver the SAP Fiori 3 innovations in a stepwise approach. With SAP S/4HANA Cloud 1908, the very first step becomes available to end users: the new Quartz theme as a successor of the Belize theme used with SAP Fiori 2.0, and the new shell header bar, which also replaces the viewport introduced with SAP Fiori 2.0.
Have a look at this short video to get a brief overview of SAP Fiori 3 and to see this first step in action with SAP S/4HANA Cloud 1908:
The new SAP Fiori 3 theme “Quartz Light”
The new Quartz theme is lighter and more neutral, to blend more into the background, giving application content the center stage. It is simple and minimalistic, making it easy for customers to theme it to their brand. Here you see the new theme applied to an SAP S/4HANA Cloud 1908 home page:
The new SAP Fiori 3 shell header bar
In addition to the new Quartz theme, the new shell header bar available today has been aligned to be a best fit for all SAP products, and to be as simple as possible. Instead of having a company logo and a home button, we now use the company logo to take you to the home page. When on the home page, you can now use a navigation menu to go directly to all apps available to you quickly and easily – as demonstrated in the video.
Probably the most noticeable change is the simplification achieved by removing the SAP Fiori 2.0 viewport (the two animated areas on the left and right of the screen – the Me-Area and the Notifcation Area). Instead of the animation, more simple menus have been introduced, making it easier for all our products to adopt the new design. The functionality of the Me-Area continues to be accessed by clicking on the user image, which now gives access to the user action menu, as this is very common in web applications (see below).
In addition to updating action placement in the shell header bar, we have also updated action placement and terminology in apps, so that action buttons are positioned more intuitively.
Consistent user experience across SAP’s product portfolio
One of the central motivations of Fiori 3 was the development of a design that could be adopted across all products at SAP leading to a more consistent and integrated experience across the entire portfolio – so as to provide a consistent user experience across the various SAP products that an end user needs to work with. Many of the design changes were motivated by this goal.
To ensure this, SAP Fiori 3 has been designed and developed jointly with all product design teams. Some common rules have been agreed upon and are planned to be followed across all products such as the consistent use of the new theme and shell bar, but also more detailed aspects like a consistent iconography, terminology or placement of common actions across all products – so that your end users have a better user experience overall, not just for SAP S/4HANA Cloud.
As an example, this first step of SAP Fiori 3 is planned to be released with SAP S/4HANA on-premise in the 1909 release in September.
SAP Fiori 3 target design: consistent, intelligent, integrated
Today, with SAP S/4HANA Cloud 1908, we are delivering this first step of SAP Fiori 3 with a new theme and a simpler shell bar. These are planned to be adopted by further products going forward, as a first step towards a consistent user experience. But this is just the beginning – let’s have a look at the further innovations we are planning.
New home pages – One of the new aspects most requested by the various product units was being able to provide more information on home pages, which the design is supporting via cards; here is a preview of this feature, which we expect to be one of the next steps to become available for SAP Fiori 3:
More options to structure content – In addition to the simple launchpad approach that was introduced with SAP Fiori, customers are asking for the possibility to offer multiple home pages and sub-pages and to combine structured and unstructured content.
Central inbox and task list – The central inbox is planned to provide access to all work items a user has, from all products they are using. Notifications will draw the user’s attention to critical tasks.
Intelligence – We have reimagined how artificial intelligence can become a key part of the experience by deeply integrating them into the foundation of the design to provide:
- Intelligent home pages showing everything you need to focus on.
- Dynamic content to support intelligent apps with embedded AI, for briefings, analytics, tasks, notifications, recommendations ranked by relevance and for situation handling.
- Proactive business situation handling, with explanations, insights and proposed actions.
- Digital assistant with conversational UI fully integrated into the experience.
As I mentioned, these innovations of SAP Fiori 3 are planned to come step by step.
Some hints and good news for developers
Coming back to what is available today: the good news for developers of SAP Fiori apps is that the SAP Fiori 3 theme Quartz is compatible to the SAP Fiori 2.0 theme Belize: as long as you have built SAP Fiori apps using SAP Fiori elements, SAPUI5 or OpenUI5, without adding your own CSS and without developing your own UI5 controls, your app will work fine with SAP Fiori 3 without any technical adoption effort. If you have built your own controls, or you have your own CSS (which we advise against), you will need to check whether they still look OK with the new Quartz theme. If you do have your own controls or CSS, do also check your apps for mobile devices, since we have made the metric for the cozy mode slightly more compact, so that for example more lines in a table can be shown on the screen.
Further good news for developers using SAP Fiori elements: the updated action placement in apps, so that action buttons are positioned more intuitively, is provided out of the box for developers by SAP Fiori elements.
Finally: should you have created your own custom theme, then don’t worry: it will continue to work without you needing to make any adjustments.
Find out more
To have a closer look at how to work with the SAP Fiori 3 launchpad, watch the SAP Fiori launchpad guided tour.
For developers interested in details on the above first steps of SAP Fiori 3 available with SAP UI5 1.65, have a look at the documentation: SAPUI5 – What’s New in 1.65 and What’s New in the SAP Fiori launchpad for SAP S/4HANA Cloud 1908.
If you want more information on SAP Fiori 3 plans, a great way to get an overview is via the openSAP course Intelligent Enterprise User Experience with SAP Fiori 3 (one week with five units of 15 minutes each). You can always find out more about our plans in the SAP Fiori Road Map, which can also be found on http://www.sap.com/roadmaps by searching for “Fiori”.
Should you plan to visit SAP TechEd this year, then we’d be happy to welcome you and tell you more about SAP Fiori 3.
- SAP Managed Tags:
