In SAP Fiori, animations are used to emphasize actions, provide orientation, and help users to perform actions by providing transitions and additional multiple actions. The aim is to improve the overall user experience.

Responsiveness

The same transitions (swipes, drop effects, and dissolve effects) are used for all devices and screen sizes.

Types

Curves

Timing : To focus the user’s attention on certain objects, changes in acceleration or deceleration should be smooth during an animation. The variation in speed gives motion a personality and an aesthetic look, thus avoiding monotonous linear movement.

In SAP Fiori, we differentiate between three animation types: transitions, interactive motions, and functional animations.

Transitions

These help the user to remain oriented while navigating through the user interface. The user gets a sense of moving along a path. To keep this metaphor alive, a new screen always needs to appear from the right, while backwards navigation brings in the old screen from the left.

Interactive Motions

These are driven by the user and enhance the user experience by giving responsive feedback through motion. They are objects that move or change shape on the screen, such as to indicate a loading process. Interactive motions tell the user that something is happening. For example, a change in the state of a button helps the user understand that the system is reacting to the user’s input.

Functional Animations

Is the tool that serves a design concept that follows a clear and logical propose as it’s only goal.

Orientation Focus on the direction and structure according to the page layout.  (e.g. Navigation) Purpose: Avoid surprising actions and transitions and orient the user.

Same Location, New Action  Used when the space is limited and when a new functionality changed under certain conditions. (e.g. Action buttons) Purpose: show that a function changed to a different state)

Zoom Selected as a visual clue to expand or relocate an object to a prominent position. (e.g. Click on a Image inside a gallery) Purpose: Associate an low definition object or a thumbnail with its detailed or high definition view.

Visual Hints  Assist users to better understand how to interact with a product’s interface. It is especially needed in designs that contain an unconventional object or a unique navigation method. (e.g.Quick tour in a first installed app and shows how certain functionality in the design operates, so a first time animation is displayed the “how to”) Purpose: Explain unconventional functionality or a hidden action.

Highlight  Applied in case of a noisy layout or multiple visual content. Motion is used to bring the element to a higher level, directing the attention to this action. (e.g. add an item to the shopping cart inside a crowded page full of items) Purpose: Attract the user’s attention, and move the object above a noisy layout.

Simulation or Customized animations,  when a simple motion doesn’t describe what the user wants, simulation is needed just for special cases. In Fiori it is common to achieve this due to the complexity of its functionality and the quantity of controls, so it is possible to differentiate each one of them. (e.g horizontal wipe transitions to other sections in Fiori home screen )  Purpose: Simulate topics that are different and somehow hard to demonstrate.

Visual Feedback  Buttons, controls and objects respond to interaction. This topic can be confused with the previous themes but the difference of this particular animation ends by being extremely subtle and very well thought, always constrained to just show and minimal interaction. (e.g. a simple rollover button mostly for mobile experience) Purpose: Acknowledge the user’s action.

System Status  Implemented to show control and understanding the current context in the system at any time.  Indicates when a process has initiated, in progress and terminated. (e.g. Loading page bar) Purpose: Sense of control in a linear time process.

Marketing Functional animation can be used to promote brand’s value or product’s behavior, as an effective way to sell or to be recognize in the market. The difference is based in the freedom to experiment with graphics and visual styles (e.g. skype logo animation) Purpose: Support a company’s brand values and product’s strengths.

Behavior and Interaction

There are different animations in SAP Fiori. Starting an app from the launchpad requires a different transition than navigating within an app. An overview of all animations in SAP Fiori is shown below.

Launch App

Full Screen

Navigate (App to App)

Styles

Approach the Styles as a basic motion structure (not implemented) to have an idea of the goal in your object/control. This represents a graphic way that helps to classify the motion in different groups depending on their functionality.

The posible groups we could find in Fiori are:

Hoover

Transitions