SAP Fiori Design Guidelines
SAP is proud of a strong ecosystem: partners that support our customers with tailor-made solutions; and, customers who make the most out of their capabilities SAP offers by extending and adapting standard solutions to their needs. We want to support this ecosystem by sharing with you what we have learned as best practices, by sharing the tools that we use internally to make your development and design more efficient.
At SAPPHIRENOW 2015 we have released our completely new design guidelines to the public.
While the previous external version of the guidelines was a separate edit with reduced contents we have now introduced a completely new strategy:
- The external version of the design guidelines now is identical with our internal version (except for internal references and process-related resources). This means that the depth and richness of information has been increased considerably. You will be able to create applications that are consistent with the standard applications delivered by SAP.
- With every new version of SAP UI5 we release a new version of the design guidelines with updated contents reflecting the corresponding state of technology. You will always be up to date with what has changed and what is new.
- Users are able to switch between versions within the guidelines so that they can not only make sure they design for the right technical version but they can also compare the changes between the versions.
- We have integrated more references and resources related to design and development so that most articles point to the corresponding sample implementation in the SAP UI5 Explored app and to the API references.
- We have introduced a number of usability improvements for the guidelines to make it even more simple to learn how to design modern business applications and we continue improving it.
In this article I want to quickly walk you through some of the main contents in the SAP Fiori design guidelines to make you aware of the great benefits you can get from using it.
The „What’s New“ section… well, it gives you an overview of what has been added or changed in the present release. This overview is available for each release and all updates are linked to the corresponding article that has been modified. It is a handy way for you to learn what has been changed in a new release. As everything in the design guidelines, the focus is on the best usage of the technology. It is less about what technology has introduced as new feature which will help you take the right decision about what features to include in new designs.
Is a great way to explore all available components in the guidelines. You can easily filter controls, floorplans or entire application types by different criteria and you get handy cards that give you a visual preview as well as some short description of the component. You can quickly differentiate between different controls and decide which control might be the best suitable for you. If you just want to get an overview you can scan through the cards and get an impression of the richness of the SAP UI5 control library and the 75+ components that are listed in the current version of the guidelines.
The foundation topics include a „getting started“ section that gives you a synopsis of the most important elements of the guidelines. You learn more about the design principles that guide us in designing SAP Fiori applications, which will help you to better take your own design decisions and better understand ours.
Responsive design and adaptiveness to different form factors is an important ingredient for SAP Fiori. We believe, that any application should have a representation on any device as we see the world converging. Many users freely move between their desktop computers to tablets, smart phones and wearable devices and they expect the right functionality to be available where they are. This is a great challenge for the entire market today but we believe that with SAP Fiori we have the right basis to provide the right solution on any device. A good part of the foundations discuss how applications can prepare and design for cross device usage and optimization.
SAP Fiori relies on an icon font to render icons independent of device and resolution. In this section you can find the icons we have available already and where you can get access to the icons font.
As all good designs, SAP Fiori values great typography. Also, we want to make sure that our applications support many languages and type systems, run fast and on a small footprint and support custom themes. This brought us to the decision to step back from custom fonts (remember, in the first release SAP Fiori was using the web font Open Sans) and to work with the default sans-serif system font of the corresponding platform.
Many aspects of the design apply across individual applications. A core element of integration is the SAP Fiori Launchpad. While the name misleadingly gives the impression that this is about the beautiful start page with the tiles only, the SAP Fiori Launchpad is much more than that. On the UI-side, the launchpad holds all elements around the application itself including the home page, the catalogue, the navigation bar, etc. Technically, the launchpad is a bundle of services that can be used by the applications to navigate, share context, define settings, persist personalization, etc. Other cross-functionality like handling of UI messages or (the newly supported) draft handling are must-reads for everyone. Such cross-application infrastructures should be applied consistently in order to achieve a coherent user experience.
For many use cases, SAP Fiori has developed standard ways to address them. Such standard screen layouts and page flows are called floorplans. Such floorplans represent a best practice that can be reused across different scenarios. The number of floorplans is growing and there are already new floorplans on the horizon.
Today we have the following basic floorplans defined in the guidelines:
- Object View – is used to display an object with multiple facets ordered on different tabs and with the possibility to drill down into details and related objects.
- Flat Object View – is a variant of the Object View with no tabs but with all content elements laid out below each other.
- Edit Page – is a form-based page grouped in different sections to edit (or create) objects or information.
- List Report – is a page to display and handle large sets of data with powerful filter and table (or other visualization controls)
- Work List – is optimized to work through lists of assigned work items
- Initial Page – is a floorplan specific to tasks that require an initial selection (e.g. entering a document number, scanning a shipment container) before entering or checking associated data.
Fundamentally, in SAP Fiori we distinguish between full screen applications that make use of the entire width of the screen and applications that are split into a master-list and the corresponding details. The split screen layout stems from the responsive pattern where the master list and the details are split on a phone or narrow screen while being shown side-by-side on a wider screen. Most floorplans can be embedded into both layouts.
App Types and Frameworks
Some application patterns have been established during the still young life of SAP Fiori. Some of the most commonly known patterns are the approval apps and other master-detail apps that represented the main part of the initial scope of SAP Fiori. The big advantage of this application pattern is the fact that responsiveness comes for free as it easily adapts to different device sizes and that the interaction pattern is so commonly known in existing consumer applications. We have described some prototypical application types like approval apps, master-detail apps or a shopping cart in this section. These articles contain cross references to the individual floorplans and controls and describe how to use them in composition of an application.
This section contains all details related to the controls available through the SAP UI5 control library as part of the SAP Fiori design language. With more than 150 controls SAP UI5 is one of the most comprehensive HTML5 control libraries available in the industry wich fully supports product standards like accessibility as well as enterprise qualities like localization, theming, RTL, and others. A major part of these controls have been designed as responsive controls to be used in SAP Fiori applications. These controls are documented in this section. The Explore section is an alternative access to the articles in this section.
Services and Resources
There is a number of resources that we offer to our customers and partners to make it easier for them to create their own designs consistent with the standard solutions delivered by SAP. For designers, the most valuable tool will be the design stencils for Axure that allow you to quickly create interactive design mockups for testing purposes that reflect the implementable state. In a separate post I have discussed the advantages of prototyping SAP Fiori applications with Axure more in detail.
The SAP Fiori Client is a native container in which SAP Fiori applications can be deployed. The client acts like a specialized browser which handles authentication, caching optimization and some native device integration features. This SAP Fiori client can be downloaded from the native app stores.
Finally, SAP offers some sample implementations that reflect the best practice in design and development. These so-called „Reference Apps“ can be used to learn developing SAP Fiori applications as well as blueprint for your own projects. SAP UI5 itself offers a wealth of documentation and support that will help you to get started. This includes the new web-based development tools.
We are very keen on your feedback and suggestions. Please use this section to get in touch with us and let us know what you like and what could be improved.
Visit our guidelines at http://experience.sap.com/fiori-design/