The first part of this article described how we have significantly improved the application management in the new evolution of SAP Fiori, making it easier for the user to navigate between applications or to discover new functionalities.
This second part now will focus on the most prominent design changes to the launchpad in SAP Fiori 2.0, with a focus on the viewport.
The Viewport Metaphor
Let me elaborate a bit on the design rationale behind this, and where this might take us going forward. Please note that this is not a product commitment, but rather an explanation of the underlying design rationale beyond the current product scope.
Metaphorically, the viewport represents a partial view of a larger surface. By opening up this surface beyond the borders of a window—beyond the borders of the actual screen even—we are preparing SAP Fiori to extend to larger screens and collaborative wall displays going forward.
If the screen or window is too small, the user will only see the viewport that fits to the screen or window. On the other hand, if the virtual screen is wider (think multi-screen displays), we might in the future be able to better leverage such arrays by widening the viewport and by offering a more panoramic view of the surface. An example of this approach is the SAP Digital Boardroom, which runs on three displays, but which can also run on a single display by narrowing the viewport and by offering navigation between the screens, thus translating the viewport experience. While maintaining the promise to responsively support small devices, this offers us the possibility to also target larger displays.
The viewport also provides us with a more natural user experience compared to the classical off-canvas designs that are common in mobile applications. Currently, we have two off-screen areas: on the left we offer the Me Area with user-specific information, and on the right, we offer notifications using system-driven information. Users can access these areas through actions in the shell bar on the top left and top right corners, but the transition itself is what’s really unique. It’s a smoothly animated lateral move that mimics the user’s head turning to the left and to the right in a panoramic view. It is easy to imagine that these interactions will be mapped to mimic more natural gestures or input controls in the future.
Video of an HTML prototype we created to evaluate and specify the viewport animations. The final product design might differ.
To summarize this, the viewport is the metaphor we have chosen to extend the flexibility of the SAP Fiori environment to allow us to make use of wider screens and larger displays in the future, without having to sacrifice the mobile capabilities. The surface we created therefore removes any screen limitations.
Today, SAP Fiori 2.0 uses this surface to offer additional space for user-specific and system-driven data. The next section will go into these two topics in more detail.
Figure: Screenshot of an HTML prototype we used to evaluate and specify the interactive behavior of the Me Area. The final product design might differ.
The Me Area can be found to the left of the off-screen area in SAP Fiori 2.0. Because this area is located off-screen, it is not permanently visible to the user. In order for the Me Area to slide into view, the user must click on the profile image located on the top left corner of the screen – an action that mimics the user turning his or her head to the left. This action will also trigger the viewport to move to the left and the main content area to zoom out.
As the Me Area slides into view, the user will be able access information relevant to both the user and his or her usage environment. This includes:
- The user’s profile picture and access to online state
- Settings and preferences
- A catalog of available apps (App Finder)
- Tools to personalize the current content in the main area
- Objects and apps recently visited by the user
The Me Area is always available from every screen that is shown in the main content area. On the background surface, the different areas co-exist and influence one another. While most actions in the Me Area are available independently of the current context, some of the actions will be directly tied to the content shown in the main content area. For example, Settings will display the settings page for the specific app in the main content area (not yet available). Additionally, personalization options might only be available if the respective screen is visible in the main area.
Guided by the user feedback from the first version of SAP Fiori, we now introduced the option for users to view a list of their most recently visited items. This is especially useful for those users who are used to working with a limited set of apps or objects as it significantly simplifies their navigation.
Notifications or System Area
Figure: Screenshot of an HTML prototype we used to evaluate and specify the interactive behavior of the Notification Area. The final product design might differ.
The right off-screen area is dedicated to providing system-driven information. Currently, this translates to system-generated notifications of events to which a user has subscribed. With S/4HANA, the system will be able to provide more live insights and actions, making a real-time push channel increasingly important.
While it’s still under development, and while not all features are yet available, the notification center will be able to provide system-generated notifications from various sources such as the workflow inbox or chat notifications. Notifications can be prioritized and grouped into groups of similar items. Through these configurations, the user will be able to access more information about a notification and take immediate action.
Figure: Detailed visual design prototype of the notification area. The final product design might differ.
Similar to the Me Area, the notification area is accessible from every app that is shown in the main content area. Here, too, the user can bring the notification area into focus through a virtual turn of the head – that is, by clicking on the notification icon on the top right corner of the screen.
The notification area exists independently of the application in the main content area. The big difference between this area and the notifications on the home page of the launchpad is that the launchpad home area displays notifications within the launch tiles. By separating the notifications from the tiles, our rationale is to guide the user and make him aware of critical and actionable issues immediately.
If we look at the right off-screen area as an area that contains system-driven information, we can also begin to recognize the potential for including other types of information that might be suitable for that area, such as progress indicators for long-running tasks (for example, for a build or deployment process). There is a lot of potential here, and this is what we’re currently exploring.
With the design of the viewport, we’ve introduced the possibility to concurrently manage different screen areas without sacrificing simplicity and responsiveness.
- The viewport offers a partial view of a potentially infinite surface on which content and functionality can be placed either in a fixed layout, such as with today’s vision of SAP Fiori 2.0 with the three main areas, or in a more flexible layout of multiple areas, such as with the SAP Digital Boardroom or other future products.
- The Me Area in SAP Fiori 2.0 slides into view from the left to offer users access to various user-related information including personalization, profile, settings and interaction history.
- The notification area slides into view from the right to offer users access to system-driven information that helps them to become aware of critical, real-time information. In the future, it might also offer other system-driven content.
In short, the viewport is an important investment into the future scalability and flexibility of SAP Fiori that will allow us to better cover a wider range of devices and interaction styles going forward.