Technology Blogs by Members
Explore a vibrant mix of technical expertise, industry insights, and tech buzz in member blogs covering SAP products, technology, and events. Get in the mix!
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: 

Situation Handling in SAP Fiori

Former Member
‎01-02-2020 2:20 PM


In my introductory article about situation handling, I explained how software can help business users to deal with unexpected business issues.

However, the real power of situation handling unfolds you apply the concept to an entire ERP system. In this article, I want to discuss several aspects of integrating situation handling with the SAP Fiori design system.

Integration Strategy


A design system consists of a set of interconnected components. It aims at making product adoption efficient and cohesive across different platforms and devices.

The concept of situation handling has a dual role. On the one hand, it is a product that adopts the SAP Fiori design system. At the same time, it is a reusable cross-component that extends the design system.

This positioning requires a careful strategy to balance the following goals:

Goal #1: Enable adoption of the concept by product teams at high speed and low cost.

Goal #2: Do not break or complicate the existing ecosystem.

The strategy we have chosen follows three principles:

  • Reduce. Keep your footprint in the design system as small as possible. Reduce the complexity and scope of the features in the first releases to speed up the adoption by product teams.

  • Reuse. Reuse the existing components of the design system: its visual core, control library, and central services. Utilize the mental models of the users for navigation paths and interaction patterns.

  • Recycle. Inherit or adopt existing controls and modify them as needed.


You will recognize the elements of this strategy as we explore the main aspects of design system integration in the sections below.

Progressive Information Disclosure


Progressive disclosure is an interactive design pattern used to avoid overwhelming the user with too much information at once. As we also want to keep our footprint on the UI reasonable, the technique is well-suited for integration in a design system.
Design exploration  –  Progressive disclosure of situation handling elements (Copyright: SAP SE)

 

The foundation for progressive disclosure is a solid information architecture, which allows you to apply the pattern at several levels. The first level (S) contains only the situation indicator. The second level (M) adds a title and description. The third level (L) shows a preview of the situation, including the status and processor. The final level (XL) is the situation page, which contains all the information about the issue, as well as related information and solution proposals.

 

Visual Integration: Situation Indicator


The integration into visual core starts with the choice of icon and semantic color for the situation indicator element.
Situation Indicator (Copyright: SAP SE)

 

Instead trying to find a good metaphor for a new icon — with the associated risks — we decided to recycle an existing “alert” icon from the SAP icon font. This icon is already a part of the design system, but hasn’t been used in any central concepts so far. We may still opt to change this icon in the future, but our first user validations proved it to be good enough to start with.

We also reduced the choice of semantic states for situations to “critical”, based on the use cases available for adoption. The distinction between “severe” and “less severe” was descoped to keep the concept and its integration simple. We may add this distinction in the future as new use cases appear.

The examples below show how situations are visualized in different parts of the SAP Fiori UI.
Examples of visual integration of situation handling in SAP Fiori. 1 — Situation Indicator, 2 — Situation Notification, — Situation Indicator in Object List, 4 — Situation Preview, 5 — My Situations Launchpad Tile, 6 — My Situations List, 7 — Situation Indicator in Object Header, 8 — Situation Page. (Copyright: SAP SE)




Consistent Interaction


The situation indicator is the smallest element of the information architecture. It serves both as a visual cue and an interactive button for displaying more information.

Depending on the use case, the interactive situation indicator can appear on different parts of the screen. But the interaction with indicator always remains consistent.
Examples of consistent interaction using situation indicator. A — Indication in List Report, B — Indication in Object Page, C — Indication at Home Page, D — Situation Preview, E — Situation Page (Copyright: SAP SE)



We reuse existing interaction patterns and controls (in this case, the SAP Fiori popover) to preview the situation (D) and guide the user to the source of the issue (E). Regardless of where users encounter the situation indicator, they can always expect the same consistent interaction.

Navigation


To ensure flexible navigation to the source of the problem, we support multiple navigation paths and reuse existing SAP Fiori communication channels.
Main navigation paths for Situation Handling (Copyright: SAP SE)

 

A. Navigation from notification: The user receives a notification and navigates to the situation page.

B. Navigation from “My Situations” app: The user opens the My Situations app using a tile on the home screen. In the app, the user selects one of the situations and navigates to the situation page.

C. Contextual navigation from an app: The user sees a situation indicator for an affected object (for example, within a list report).

Providing alternative navigation paths for the user is an example of good redundancy. In the case of situation handling it makes the transition to the source of the problem convenient for any use case

Ready for your own use case?


I hope the ideas from this article will help you to develop the situation handling strategy for your own product. Below are several final hints for your future success.

  • Keep it simple. Avoid a long tail of features that make the concept and the resulting product complex, time-consuming to develop, and hard to adopt.

  • Stay “non-invasive”. Make sure that situations don’t conflict with existing approaches in the respective business domains.

  • Be consistent. Keep the indication and interaction consistent with other situation handling use cases. Invest in your information architecture to support progressive information disclosure.

  • Support good redundancy. Use multiple channels to inform users about situations. Allow flexible navigation from the first indication to the detailed problem description.


***

Of course, there are many more things to explore and discuss. For example, how might situation handling be handled on mobile devices? Or how could situations be combined with the automation of business decisions?

We will continue to share our experiences around the design of situation handling in future blogs. In the meantime, feel free to add your thoughts in the comments.

Want to learn more?



Special thanks to Joachim Sander and  Susanne Wilding for reviewing and editing this article.
This article originally appeared on SAP Design on Medium.
Labels in this area
Popular Blog Posts