Humans are hardwired to be captivated by movement. From the flicker of a flame to the rustle of leaves in the wind, our eyes instinctively gravitate towards motion. This primal attraction to movement has implications in the digital world, where our screens come alive with dynamic animations: every swipe, tap and scroll is choreographed to engage and inform.
Blade Runner 2049
Why use motion
Strategic use of motion can enhance the user experience through the deliberate integration of moving elements into the user interface, making interactions more intuitive and compelling. These are five key reasons why motion is beneficial in digital products:
To Stand Out: Brands need to differentiate themselves in today's crowded digital landscape. Motion design offers a unique opportunity to captivate users and leave a lasting impression. By incorporating subtle animations or dynamic transitions, digital products can stand out from competitors and capture users' attention.
To Guide Actions: Motion design can serve as a visual cue to guide users through the interface. By animating elements such as buttons, menus and navigation bars, designers can direct users' attention to important actions or pathways, making it easier to navigate the product.
To Give Feedback: Interactive feedback is crucial for users to understand the outcome of their actions. Motion design allows designers to provide an instant visual response when users interact with UI elements, confirming actions and indicating errors.
To Evoke Emotions: Movement has the power to evoke emotions and create memorable experiences. By using animations that convey personality, humour or empathy, designers can establish an emotional connection with users, making the product more relatable and fun to use.
To Tell Stories: Motion design can be used to narrate a story or guide users through a sequence of events. By animating transitions between screens or illustrating user journeys, designers can create a cohesive and engaging narrative that enhances the user experience.
How to use motion
These are 12 motion principles that help create usability on screens.
1. Easing ensures smooth transitions between states by controlling the acceleration and deceleration of motion. It prevents abrupt starts and stops, creating a more natural and pleasing user experience.
2. Offset & Delay introduces variation in timing for multiple animations, preventing them from occurring simultaneously. It adds depth and complexity to motion design, allowing designers to create dynamic and engaging sequences.
3. Parenting establishes hierarchical relationships between animated objects, allowing one object to control the motion of another. It simplifies animation workflows and ensures consistency across related elements.
4. Transformation involves changing an object's properties over time, such as its position, size or opacity. It communicates transitions between states and reinforces user interactions. Transformation adds clarity and context to motion design.
5. Value change alters numerical properties of objects, such as colour or brightness, to convey information or feedback. It enhances visual communication and reinforces user actions. Value Change provides immediate feedback and improves user comprehension.
6. Masking involves revealing or concealing parts of an object to create dynamic effects. It guides users' focus and attention, highlighting important content or interactions. Masking adds depth and dimensionality to UI elements.
7. Overlay creates spatial relationships between layered objects, allowing users to navigate complex interfaces more intuitively. It provides context and hierarchy within the visual layout, improving usability and comprehension.
8. Cloning generates new objects from existing ones, narratively accounting for their appearance and departure. It creates a clear chain of events and reinforces user actions. Cloning supports continuity and relationship building within the interface.
9. Obscuration hides an object to orient users towards a more important object. It communicates additional contextual information, improving user awareness and compensating for limited visual space.
10. Parallax creates spatial hierarchy through the differential motion of interface elements during scrolling. It separates immediate content from ambient elements, improving visual clarity and user focus.
11. Dimensionality provides spatial narrative frameworks for object origin and departure. It overcomes the limitations of flat design, reinforcing mental models and spatial awareness.
12. Dolly & Zoom smoothly transitions between interface objects and spaces, preserving continuity and spatial narrative. It enhances user navigation and comprehension, improving the fluidity and coherence of the interface.
These principles can be used in isolation but quite often they’re used in combination to create meaning. Here is an example of 5 of the principles being used at the same time – parallax, masking, parenting, offset & delay and dolly & zoom:
You’ll see the image inside this card has “parallax”, indicating that you are passing over this card.
“Masking” is applied as it’s tapped on, giving this image the full width of the device.
“Parenting” occurs as this card becomes the category to which the next set of cards belongs.
“Offset & Delay” is used to bring in the new set of cards from the right-hand side.
“Dolly & Zoom” is employed to bring you in and out of this category
Now, imagine this same journey without motion. You'd need to scroll down through these cards instead of swiping, and with each tap, the entire page would reload to present a new set of cards. Additionally, we'd have to prominently display the name of the parent to ensure you didn’t lose track between tapping the last card and revealing the new set. Instead, the motion principles employed here efficiently communicate all that information within a matter of seconds.
Motion design at Adrenalin
At Adrenalin, we not only understand but also deeply value the importance of motion design. Therefore, we have established frameworks and processes specifically tailored to ensure excellence in motion design implementation.
Our motion design process begins with a branding workshop to thoroughly understand your project goals and target audience.
Following this, we collaborate closely with you to identify key moments and interactions that can be created or enhanced through motion.
We then start brainstorming to generate inspirations and meticulously document them for reference.
Our designers then iterate through prototypes using a variety of professional-level tools.
We finish with comprehensive testing to refine the animations and ensure optimal performance.
When it comes to motion in digital products, the creative aspect is just one part of the equation; coding is essential to bring these motions to life. CSS and JavaScript are two primary ways to create animations. The choice between them depends greatly on the specific requirements and dependencies of your project, as well as the desired effects you aim to achieve:
CSS animations and transitions are ideal for implementing simple, "one-shot" effects such as bringing a navigation menu in from the side or displaying a tooltip. While you might utilise JavaScript to manage states like active/inactive or visible/hidden, the animations themselves will be defined within your CSS.
To tackle more intricate animations and interactions, such as collision detection or implementing stop, pause and rewind functionalities, we leverage the capabilities of JavaScript libraries like GSAP to craft dynamic and tailored effects.
Here is an example of our work for Hungry Jack’s:
Motion is expected nowadays. You might not realise it, but the internet has trained you to anticipate motion. When you tap or click on something, you expect to see motion as confirmation that your action has been registered. Motion is not merely a "nice to have" for adding flair any more; it's now an expected standard and integral to the user experience and usability of digital products.
If you would like to explore how motion can enhance your digital products, get in touch with the Adrenalin team.
To stay updated on valuable digital product and technology insights, be sure to subscribe to our newsletter below and follow us on social media channels.
Learn from us
Join thousands of other Product Design experts who depend on Adrenalin for insights
