Motion, also sometimes referred to as animation, is a way to simulate real life activities in digital experiences. Through depth, gestures, and movement, motion is functional animation. It is no longer just “icing on the cake” or “lipstick” — instead motion becomes a core component of our product and our user experience. To craft a more informative and delightful user-experience, motion focuses on three main principles: inform, orient, and delight.
- Informative motion instructs users about new features or system status
- Orienting motion guides users to pertinent information, reduces cognitive load, and assists in decision making processes
- Delightful motion adds a sense of care and delight to the user experience
Here at Alkami, interface animation plays a crucial role in achieving our product vision: Personalized financial insights today for financial freedom tomorrow. Animation helps us accomplish this in two ways:
- Functional animation creates a more holistic user-experience, one that is delightful and informative.
- Animating elements of the interface makes the UI itself more informative and engaging, adding an additional layer of insight to the product.
As our users develop an increasing preference for mobile banking, we must work to ensure that our product meets and exceeds the standards set for mobile experiences. Animation plays a fundamental role in this effort. A core component of the mobile experience is its tactile nature — users engage our products with their hands and expect the interface to interact like objects in the real world. By utilizing well-informed principles of motion, we can create experiences that feel natural, intuitive, and responsive.
As user expectations evolve, the value added by functional animation increases. It is no longer just “icing on the cake” — instead, animation becomes a core component of our product and our user experience.
Animation has been shown to make products feel more modern and sophisticated, helping the financial institutions we serve stand apart from their competitors. Animation also serves a functional role in making our product easier to use because it can help users learn and understand both the architecture and spatial relationships. Studies have shown that animation between UI states reduces cognitive load and improves decision making abilities. Animation also serves a functional role in making our product easier to use because it can help users learn and understand the architecture and spatial relationships present in our app. As more and more research is done around the functional and cognitive benefits of interface animation, it is clear that motion must be a core part of our user experience.
Over the years, people have been trained to judge an animation as “good” or “bad” using the standards set by traditional animators, like Disney and Pixar as a benchmark. While we can certainly learn a lot from these animation greats, interface animation requires a new approach in some regards. What traditionally feels like a well-timed or expressive animation might feel sluggish or over-the-top on a phone or on the web. So how should we design animations for our products? Here are some guidelines.
Timing refers to how long an animation takes as well as how the speed of the animation changes over time. Timing in interface design requires special attention.
Duration & Speed
While traditional animators operate in a world of seconds, interface animation should be done in milliseconds. We suggest limiting your animations to a range of 100ms–500ms. We use this scale because 100ms is the largest amount of time an event can occur while the human brain still perceives it as instant.
While state-change animations can be used across devices, movement animations should vary in duration depending on the device. For instance, an animation may only take 200–300ms on mobile, while, on a tablet, the duration should last around to 400–450ms simply because the screen is larger. This is because moving the object a larger distance in the same amount of time requires the object to move faster. This faster movement may or may not be appropriate depending on the content.
Additionally, animations that take 200–300ms should be truncated to 100–150ms on desktop web. This is because desktop web lacks the physicality users are accustomed to on mobile devices, causing animations over 300ms to feel laggy and unresponsive. Screen transitions should generally be avoided on desktop web.
If a movement animation is required for a desktop flow, consider only showing the beginning and end of the animation so that users perceive the full range of movement without compromising the experience.
Easing refers to the acceleration pattern of any given animation. Objects in the real world rarely move at a linear pace. They are often accelerating and decelerating as they move. Developing a keen sense for how to ease your animations will help them feel natural and well crafted. Animations that use no easing or improper acceleration patterns often feel elementary and flawed. Our system incorporates five easing curves that cover a diverse range of use cases:
- Standard (ease-in-out)
- Acceleration (ease-in)
- Deceleration (ease-out)
- Linear (no ease)
- Bounce (modified Standard curve)
Our primary curves are modified from system defaults for ease-in-out, ease-in, and ease-out, so please use the corresponding curve functions whenever possible.
Cubic-bezier function: [0.50, 0.00, 0.20, 1.00]
The standard easing curve is the most commonly used. It uses an asymmetric ease-in-out pattern to reflect the natural pace of objects as they begin to move and come to rest. This curve will work for most transformations (scale, rotation, position), giving life to the elements on screen without compromising the user’s experience.
Cubic-bezier function: [0.40, 0.00, 0.90, 0.30]
The acceleration easing curve is best used with controlling the movement of an object that begins at rest in view and moves outside of view. It creates a natural sense of energy building as an object exits without drawing attention to the object as it exits. Perhaps the most common use of this curve is found on the exit animation of a bottom sheet. The sheet slowly builds momentum then moves quickly out of sight, where, presumably, it slows to a rest off-screen.
Cubic-bezier function: [0.20, 0.20, 0.10, 1.00]
The deceleration curve functions much like the acceleration curve, only in reverse. It is best used when an object is entering the screen or field of view for the first time. It implies that the object began moving outside of the screen and is arriving at full velocity. The shallow ease at the end of the curve adds extra emphasis on the arrival of the object without being distracting.
Cubic-bezier function: [0.00, 0.00, 1.00, 1.00]
The linear “curve” is a straight line, having no impact on the acceleration rate of your animation. Because this curve implies no sense of acceleration or deceleration, it often feels unnatural and sluggish. It is, however, very useful for some property animations, or for slow, steady movement. Linear easing curves are most often used when animating the opacity of an element so that the fading in or out is understated and natural. Even still, some transitions will require an eased opacity for the animation to appear cohesive. In most cases, linear is not the correct curve to use. When in doubt, use the standard easing curve.
Cubic-bezier function: [0.50, 0.00, 0.20, 1.40]
The bounce curve is an exaggerated variant on our standard curve, offering a quick overshoot at the end of the animation. Animations utilizing the bounce curve will attract a lot of attention, and can be overly distracting at times. Use these rarely, only when a component calls for exaggerated movement. Overuse of this curve will change the voice/tone of our product substantially, detracting from the professional, understated voice that is appropriate for our product and the financial institutions we serve.
Voice & Tone
Because our product serves a wide variety of financial institutions, all motion within the product should be crafted to suitably fit a wide variety of contexts. In order to achieve this, all animations should be subtle, without frill, and minimal in essence. Bounce movements should rarely be used. The speed of each animation should be quick enough to feel responsive, but slow enough to convey a relaxed yet professional voice.
All animations should be designed keeping the financial institution’s brand position in mind. The motion should reflect a voice of professionalism, trustworthiness, and stability.