Design animation
How do you act when you’re talking to a friend? Most likely, you make eye contact, smile, laugh, and use light physical affection to convey that you’re interested and engaged in what they have to say.
These subtle acts of comfort and reassurance are so ingrained in our social mores, you probably don’t even notice you’re doing them. Yet they’re essential skills for maintaining meaningful relationships. In the same vein, animations add life to your designs, providing context and giving warmth to the way your users interact with your interfaces.
What is design animation?
Design animation describes the use of moving digital imagery to supplement a digital design. Good design animation is functional and delightful, a welcome addition that enhances the overall usability of your website or app.
Issara Willenskomer, founder of UX in Motion and former IDEO consultant, has identified four ways design animation supports usability:
- Expectation. Design animation can shorten the distance between the way your user perceives what an object is, and how it actually behaves. It sets expectations.
- Continuity. Design animation can add to the user flow and consistency of the user journey. It creates a comprehensive experience.
- Narrative. Design animation can help connect the linear events and moments that make up the user experience. It tells a story.
- Relationship. Design animation can bridge the gap between user understanding and interface. It guides the decisions your users make.
Why you should use design animations
In a world where people have entire conversations with gifs, it’s safe to say that design animation is no longer novel. It’s expected. And when done right, it can make your website or app easier to use while imbuing every interaction with delightful purpose.
Design animation is like the Swiss Army knife of design tools: Its multifunctionality allows it to improve the experience of almost every part of your design. That’s why it’s so important.
In The Importance of Good Animation in UX, InVision content strategist Will Fanguy breaks down how animation can make the user experience better:
When we talk about functional animation, what we're talking about is the type of subtle animation that has a clear, logical purpose. It reduces cognitive load, it prevents change blindness, and it establishes a better understanding of spatial relationships.
Will Fanguy
Content Strategist, InVision
Design animation does no good if you just throw it sporadically into your designs. It needs to be useful, supporting the actions your users make and helping them get from point A to Point B more efficiently.
Design animation creates a more seamless navigational experience. Doors open gradually instead of abruptly. Nobody wants to scream every time they open a door because it keeps flying off its hinges or slamming into a wall.
In a similar way, design animation helps your users ease into transitions when they’re navigating your website or app. It reinforces your user’s spatial awareness, connecting them from one part of the interface to another.
Design animation gives the user key visual affirmations and feedback that say either:
- Yes, the site is working properly and behaving the way you expect it to, or
- No, the action you took wasn’t correct for this part of the interface. Please try a different approach.
Buttons and controls that live behind a screen can feel too static to the user. Design animation gives those images the oomph they need to let the user know they’re interacting correctly with your interface, and in real time.
Hover animations are a good example of how to show the user they’re effectively manipulating the interface. Pull-to-refresh animations and password shakes are also helpful ways design animation can either confirm or deny a user’s action.
Design animation deepens your user’s understanding of what’s happening. For example, animated loading bars set reasonable expectations of how long a process should take, while animated notifications give the user an accurate portrayal of the information they’re receiving in real time.
When you’re providing a status update, fun animations make for better distractions. It’s like hold music. If someone puts you on hold and you hear silence, you’re probably going to hang up because you think the call was disconnected. Hold music distracts you from feeling frustrated by having to wait.
The Domino’s Pizza Tracker is a good example of how fun design animation can give a user the information they need while offering visual comfort that their food is on the way. They turned a common frustration—the inability to know when your pizza is en route—into an enjoyable and reassuring interaction.
How to create a design animation
To reap its full potential, design animation should be a part of your usability workflows from the start. When you map out your site’s functionality, layout, and navigation, note where functional animation can add value to the user experience.
InVision Studio makes animation a part of your regular design workflow. You can animate as soon as you open Studio, and automatically match layers or create connections between them. And with Studio’s Timeline Editor, you can fine-tune the timing, path, and speed of your design animations.
Now that you know, use that new knowledge and collaborate in real time on a digital whiteboard