Motion
Introduction
Last updated: 18 July 2022, 10:03 by Kristina Gushcheva
Nordea is in constant movement, and so is our design language. Throughout Nordea’s digital services, motion enhances the user experience.
Principles
Clear purpose
- Use motion in error and empty states. Asset library
- Nordea Common Components (NCC) use subtle transition effects in alerts, button states, text fields and step indicators
- Use animations sparingly and ensure that they don’t take focus away from primary tasks
Accessible
- Avoid animations that last more than 5 seconds
- If an animation lasts more than 5 seconds, provide a mechanism to stop or hide the animation
Ease parameters
System reactions
Errors and alerts are less alarming if their motion picks up speed by the end of the animation. An acceleration (moving from slow to fast) or ease-in provides a smoother feeling.
Human-initiated interactions
It feels faster and more organic if an element responds immediately. A deceleration (moving from fast to slow) or ease-out, provides immediate feedback that tapers off.
Alluring
Adds character, attracts more attention, slows out with overshoot at the end of the animation. For example, colour change or icon transition.
Figma preview
Figma’s live embed is currently only supported on Chrome browsers.
