Motion design is a design method that applies animation and visual effects to user interface design. It expands the conventional design space with a time dimension that makes it an ideal medium for storytelling. In the context of SAP Fiori, motion design and microinteractions work together to provide our users with a coherent user experience.

Starting with the big picture, and extending into the smaller details, motion design modernizes the SAP Fiori design language. It helps to make apps simpler, more effective, and more delightful to use, contributing to one look and feel across all SAP Fiori applications.

Motion Design Principles

We’ve established handy motion design principles to follow when designing animations in SAP Fiori:

• Duration
• Easing
• Direction and orientation

We’ll look at each of these principles in turn in the sections below.

Duration

Based on research from previous studies and our findings from testing with prototypes, we have defined four duration classes for SAP Fiori animations:

• Immediate response
• Small moves
• Large moves
• Continuous animations

Different animations are grouped in these classes to define the correct duration for each use case.

How do we define animation duration?

The average eye movement takes 230 ms (based on research ranging from 70-700 ms). We classify our generic animations on a scale from 0 ms to 500 ms. If the duration exceeds 500 ms, we speak of “continuous animation”.

Immediate response (< 150 ms)

This duration applies when the user directly manipulates the content. If animation of this type is needed (for example, to show a hover effect, down state, or drag & drop), the device must react instantaneously and the animation should last no longer than 150 ms.

According to the Nielsen Norman Group, 0.1 s is the response time limit for users to feel like they are directly causing something to happen on the screen. For example, to give users the impression that they are manipulating the table directly, the time it takes between the user clicking a table column and the column being highlighted should be no more than 0.1s. Ideally, this would also be the response time for sorting the column. Users then feel that they are sorting the table, rather than ordering the computer to do the sorting for them.

Small Moves (150 ms – 250 ms)

In some cases, the application responds to an interaction so fast that users can lose track of what’s happening on the screen. To present the feedback in a more natural way, we show short animations when elements move between positions or states.

It is important to keep these animations simple and short, because:

• They reflect a small change on the screen.
• The user should not have to wait.
• It is very likely that the user will see these animations frequently.
• The main purpose of the animation is to enable the user to track a change.

Large Moves (250 ms – 500 ms)

If you need to depict a large movement on the screen, use a longer animation duration to avoid fast flashing movements.

Continuous Animations (500 ms – ∞)

The duration of these animations is unpredictable. Anything that takes less than a second should be reflected on the screen as fast as possible. However, some interactions have unknown response times. Placeholder animation is a typical example of a continuous animation.

Easing

To enable natural movement for screen elements, most coding languages and animation tools offer functions for easing. To understand the term “easing”, we need to break down the main components of motion.

Motion or movement is described by the position and time. For a given initial position at time “0”, movement is the the change in the position value over time.

• Position value: The position value is expressed numerically for a certain time, and can be one of the following properties:
  • Position (space)
  • Scaling
  • Rotation
  • Alpha
• Time: To standardize motion for practical purposes, the time is generally measured in positive numbers. At any moment in time, there is a position value.

Curves and Transition Timing

The property for the transition timing function specifies the speed curve of the transition effect. This property allows a transition effect to change speed over its duration.

Ease-In

Ease-Out

Ease-In-Out

Linear

Direction and Orientation

The direction and orientation determine how elements behave within SAP Fiori.

• Direction gives users the ultimate sense of where an object is coming from, and where it is going to.
• Digital elements use 3-axis directions (x,y,z) to emulate real-life movement.
• Spatial cases without direction, such as popups, use other animiation methods when rendered on the screen (for example, fading).

The examples below illustrate the principle of direction.

Choreography

By combining easing, duration, and direction, you can design precise movement sequences. This is known as choreography.

Choreography relates to the sequential movements, steps, and patterns composed for a single element or set of elements on the screen. Elements on the screen appear, disappear, and behave in certain way, depending on their depth on the screen, their importance, and the message they convey. The word choreography literally means “dance-writing”. In the context of motion design, this refers to a series of planned situations that are linked to create consistency and harmony.

Entry and Exit Animations

Often, the entry behavior of a certain element will vary from the exit behavior of the same element. This is because entering the screen has one flow and purpose, and exiting may have another. For example, when a dialog is opened, the animation should last 150 ms, since the purpose of the animation is to reflect the change on the screen. However, closing the dialog should last only 50 ms to avoid waiting situations.

Choreography Behaviors

The choreography behaviors below allow you to optimize your motion design.

Resources