Fitting Animations into Your UX Strategy
Animations are great, when properly utilised they can be used for both usability and delightful reasons. I recently watched Jared Spool give a talk about Using the Kano Model to Build Delightful UX. In it, he raised some excellent points about a user’s satisfaction level and I drew a lot of parallels on how we, at Lukibear, feel about giving users delight through animations.
Interactions and Animations
There are many types of animations, but there are two main causes for animations to occur in a user interface: macro-interactions and micro-interactions.
What’s the difference?
Macro-interactions are when a user is performing key tasks or reaching the goals of the product; this often means navigation or screen to screen transitions.
Micro-interactions are based on the behavior of an individual element in reaction to a user’s input or action.
Animations and Their Relationship to UX
Animations are delightful but there are a few things you should address before aiming to delight users.
Going from frustration to satisfaction (usable)
You must remove frustration before attempting delight. Imagine you are recommended a restaurant because it had “the most amazing, delicious steak” that your friend has ever had. When you get there and receive your order, you realise that there are no tables or chairs… “How am I supposed to eat my steak?”, you ask yourself. It could be “the most amazing, delicious steak” you have ever tried but you’re left with the puzzling question of why they didn’t have tables and chairs in the restaurant. Most of all, you can’t enjoy your steak. As humans, we have an overwhelming tendency to only focus on the bad and we get frustrated very easily, so you need to meet a user’s basic expectations.
Going from satisfaction to delightful
Using Dana Chisnell’s framework for The Three Levels of Happy Design, you can break down delight into three categories
- Pleasure — storytelling, product descriptions, visual aesthetic, animation, etc
- Flow — speeds up and simplifies the process
- Meaning — building authentic relationships with users
These categories show how animation can delight your users but it also augments how animation is only a very small portion of the strategy. As a design, developer, whatever of your product, you need to weigh up the pros and cons of creating animations. Is the time spent worth it? Could we focus on the flow or meaning of the product? Have we met the basic expectations of the user? What value does this animation bring to the user’s interaction? These are some of the questions you should be asking yourself and your team because delightful experiences, over time, become basic expectations.
Animation isn’t for everyone, side effects may include…
Epilepsy and nausea are just a couple of examples of uneasiness a user can feel while experiencing an animation. Apple’s use of accessibility to turn off certain animations helps alleviate some of these issues. So before going all in on animation, consult your UX professional or refer to the questions above.
Don’t be too flashy
Keep animations simple and animate with intent. Where does this element come from? Where does it go? What’s its mass and speed? Consider these questions to help avoid confusion with your users.
Usability through consistency
The best thing you can do is make animations part of your style guide. You don’t necessarily have to come up with every animation you want to do, ever, but you can start to convey personality through the types of animation you create. Take Material Design for instance, they have given designers and developers a few key principles to follow their metaphor; this provides consistency and therefore, expectation that the app will behave in a certain way and increase the usability of your product. Be an advocate for consistency and usability.
When should I start thinking about animations?
Straight away. Animations aren’t just pretty things you see on Dribbble, they can help further a metaphor, convey meaning or assist users to derive context. Don’t be late to the conversation with animations, creating animations as an afterthought can hurt the product.
State of Play for Interaction Animation Tools
Currently, there are a lot of tools out there. Brand new ones feel like they are coming out every week. It’s fun to play around with these tools but I can also see why a lot of people want to wait until the dust has settled before they choose their toolset.
Macro-interactions
I can only speak to the products that we’ve used. What we use at Lukibear as our main toolset right now is Sketch for visual design and InVision for macro-interactions.
InVision is a jack of all trades and master of most. It has a great tool for creating macro-interactions, communicating ideas and feedback. They recently acquired a company called Silver Flows that brings macro-interaction prototypes into Sketch. This is quite interesting. Who knows, maybe InVision will acquire Sketch or will make their own visual design tool. If Craft is anything to go by, they are certainly capable of doing it. InVision is also keeping themselves busy with a soon to be released micro-interaction tool called Motion that works with both Photoshop and Sketch files.
Marvel is another great tool for macro-interactions, it’s also a great tool for the overall communication on a product’s progress. Their team recently added the ability to create the visual design of the product in Marvel, so you don’t need your design tool of choice, just Marvel!
Adobe XD (formerly Project Comet) is a tool that Adobe is using to focus on user interface and user experience design. It also has the ability to make macro-interactions directly in the app and share them with the world. I’m looking forward to see how Adobe will approach communication and if they will tackle micro-interaction animations.
Micro-interactions
Again speaking only to the products that we’ve used. We found that the best toolset for us is Principle for micro-interactions.
Principle is good at producing interaction animations really, really quickly. It is also quite capable being a macro-interaction tool since it uses multiple artboards.
Pixate is the closest thing to coding animations without feeling like you’re coding. It has some pretty powerful features but really falls short when trying to put together a multiple screen prototype.
Honourable Mention: After Effects is really powerful but I wouldn’t consider it as an interaction animation tool. It can do stuff that Principle and Pixate could only dream of.
Takeaways
- Make sure you have addressed basic expectations before diving into animations. The product being usable is much more important than a quadratic ease-in-and-out curve.
- Consider animation accessibility. Don’t make your users throw up on their screens as a result of motion sickness.
- Keep it simple, stupid. Users can experience confusion when there are too many elements moving at the same time.
- Add animations to your style guide. Users will start to learn how your products work through consistency.
- Find the tool that works best for you. Different circumstances call for different tools, use what gets the job done.
For more info about Lukibear, take a look here. If you like what we do, we’re always looking for awesome people to create great things with.
