Animation is a word that used to make me shudder.
I’m from a generation of devs that grew up in the era of Flash splash screens. Say no more.
But Val Head has changed all that for me.
She has successfully demonstrated that if you are smart about how and when you use animation in your work, the results can be spectacular. Take Stripe’s checkout experience for example. It uses animation to guide you through a process, reducing cognitive load and adding delight. And that is just one of the great examples we chatted about.
If you’ve always been a skeptic, read through Val’s transcript. You won’t be disappointed.
If you didn’t make the session because you didn’t know about it, make sure you join our community to get updates of upcoming sessions.
If you’re interested in seeing what we discussed, or you want to revisit your own questions, here is a full transcript of the chat.
Transcript
hawk
2017-04-26 22:02
First up I want to say a huge thank you to @valhead for her time today. She doesn’t know me from a grain of salt, but I cold emailed her and here she is.
hawk
2017-04-26 22:02
Legendary and much appreciated.
hawk
2017-04-26 22:02
For those of you that haven’t been to one of these sessions before – they’re very simple. I intro Val, she intros the topic, and you get to ask questions.
hawk
2017-04-26 22:03
If it gets crazy busy, I’ll acknowledge your questions like this
hawk
2017-04-26 22:03
:grey_question:
hawk
2017-04-26 22:03
And queue them behind the scenes to Val to answer in order
majabrugos
2017-04-26 22:03
has joined #ask-the-uxperts
tatianap
2017-04-26 22:03
has joined #ask-the-uxperts
hawk
2017-04-26 22:03
So, the formal intro:
hawk
2017-04-26 22:04
@valhead is a web animation expert and author with a talent for getting designers and developers alike excited about the power of animation. She is the author of Designing Interface Animation on Rosenfeld Media and teaches CSS Animation on http://lynda.com.
hawk
2017-04-26 22:04
She curates the UI Animation Newsletter, co-hosts the Motion and Meaning podcast, and leads web animation workshops at companies and conferences around the world.
hawk
2017-04-26 22:05
And she’s here today to talk to us about animation and how we can use it successfully in our work
hawk
2017-04-26 22:05
@valhead The mic is yours. Can you give us an intro to the topic please?
valhead
2017-04-26 22:06
Thanks @hawk! (And thanks for inviting me to do this session)
valhead
2017-04-26 22:06
Hello everyone! I’m really glad you joined us to talk UI animation today.
valhead
2017-04-26 22:06
It’s awesome to see so many people here from so many places!
valhead
2017-04-26 22:07
Our topic tonight is UI animation for the web. And I’ve found that it’s some people are hesitant to use in their work.
valhead
2017-04-26 22:07
Sometimes because they feel they don’t know it well enough.
valhead
2017-04-26 22:08
But often times I think it’s more not being sure how to use it.
valhead
2017-04-26 22:09
And, of course, there’s also some folks who are totally against web animation at all because they only associate it with things like skip intros or banner ads and such.
valhead
2017-04-26 22:09
but animation on the web does not have to be those things if you don’t want it to.
valhead
2017-04-26 22:09
(I’ve most definitely seen Flash-like skip intros made with CSS, and maybe you have to, but there’s so much more animation can do on the web.)
valhead
2017-04-26 22:11
For example, Stripe’s Checkout uses animation in nearly every interaction in the checkout process. https://stripe.com/checkout But buying something with that services doesn’t feel over done or flashy
valhead
2017-04-26 22:11
(You can use the “donate to watsi” button on their site to see it in action for yourself)
valhead
2017-04-26 22:11
And sites likes http://shantellmartin.art/ use animation to bring the artist’s work to life.
valhead
2017-04-26 22:12
Both of those examples provide top-notch experiences, and neither would be the same without the animation because it’s truly part of the design.
valhead
2017-04-26 22:13
Every animation in Checkout is there for a reason. They’re there to help you, the person using it, to buy a thing.
valhead
2017-04-26 22:13
The key to great UI animation is that combination of purpose and style.
valhead
2017-04-26 22:14
There are a number of ways animation can add to UX in ways that some of our other design tools may not be quite as good at
valhead
2017-04-26 22:15
Maintaining spacial orientation is one thing animation can be a big help with.
valhead
2017-04-26 22:16
Often times, parts of an interface or some functionality needs to live off screen or out of view, or even behind other elements. We can use animation to help users get a sense of the space and layering of an interface even when they can’t see eveything
valhead
2017-04-26 22:17
Cotton Bureau uses animations to reveal the steps of their checkout process, and to reveal their navigation even though both are offscreen initially https://cottonbureau.com/shop
valhead
2017-04-26 22:18
the nav slides on from the left and the checkout flow continues on to the right of what’s visible on screen. The animations that transition each in and out of view show users where those things “live”.
valhead
2017-04-26 22:18
This helps to reduce the cognitive load for the users by showing them this relationship visually instead of them having to keep track in their heads.
valhead
2017-04-26 22:19
Animation can also be a huge help for giving feedback for two reasons
valhead
2017-04-26 22:19
First because motion tends to draw our eye, and as designers we can use motion to direct users’ attention to where an important thing is happening. Or, even where a mistake has been made.
valhead
2017-04-26 22:20
That aspect can be really helpful for avoiding change blindness too.
valhead
2017-04-26 22:20
Second because animation can help us display multiple kinds of feedback in a small space.
valhead
2017-04-26 22:21
Stripe’s donate or pay button is a good example of this. The loading time and success state confirmation are all taken care of by that button thanks to the animation they use.
glennveugen
2017-04-26 22:21
Q: “motion tends to draw attention to our eye”. Does this lose its effect over time? Should we maybe distinguish between animations for first time use, and repeat use, where animation might lose its effectiveness?
valhead
2017-04-26 22:22
The third useful thing animation can help with that I want to mention tonight is animation’s affect on perceived performance.
valhead
2017-04-26 22:23
By using animation during times of un-avoidable waits (loading, saving, etc) animation can help make it seem like those wait times are shorter by focusing users on the progress instead of the wait. Or by building trust with a well designed (not generic) loader.
valhead
2017-04-26 22:24
Shopify has a great progress focused loader when you create a new account. It lists a series of steps over time like “1. Preparing your store” “2. starting your theme” as your wait for your new account to be made.
valhead
2017-04-26 22:24
Those steps certainly aren’t happening as they’re listed, but they keep you focused on the progress, not the wait.
valhead
2017-04-26 22:25
Viget did a really interesting study a while back on loaders, seeing what kind of animation people would wait for the longest. Their conclusion was that people would wait longer for more detailed and designed loading animations, but got frustrated sooner with generic loaders. Really interesting!
valhead
2017-04-26 22:25
valhead
2017-04-26 22:26
@glennveugen I’m not sure it loses effectiveness over time as much as it could become annoying if you use large amounts of animation for a very repetitive task.
valhead
2017-04-26 22:27
For example, banner ads were animated to get our attention. And i’m not sure that ever stopped working so much as we all got so annoyed with it we learned to ignore the whole section of where banners typically were or blocked them entirely.
valhead
2017-04-26 22:28
So, I would say that grand animations for bringing something on to the screen, or transitioning between views could get old fast if used more than just on the first time around.
valhead
2017-04-26 22:28
But things like shaking the form field that has an error, or a pulsing tool-tip probably wouldn’t suffer from that same effct.
valhead
2017-04-26 22:29
Context matters too, of course. So it would vary from case to case.
hawk
2017-04-26 22:29
Ready for questions @valhead ?
valhead
2017-04-26 22:29
Yes! let’s do some questions :slightly_smiling_face:
hawk
2017-04-26 22:30
Hit Val with your questions!
glennveugen
2017-04-26 22:30
when is a good time in the design process to start taking animation into account, and what is a good approach to it?
valhead
2017-04-26 22:30
Ah, that’s a good question for sure
glennveugen
2017-04-26 22:31
animation is usually the first aspect that’s being sacrificed, unfortunately :slightly_smiling_face:
valhead
2017-04-26 22:31
As early in the design process as possible, really. Right from the beginning. The earlier you start thinking about where animation could be useful in specific tasks or user flows, the better chance you’ll come up with something good.
stuartmurray
2017-04-26 22:31
as far as accessibility is concerned, what would be some good fundamentals to keep in mind when including animation in design?
valhead
2017-04-26 22:31
And the better chance that your entire team will see its value.
valhead
2017-04-26 22:32
@glennveugen For better or worse, I think the main reason animation is the first thing to be sacrificed is that we allow it to be seen as just “extra” or “decoration”.
mynameischad
2017-04-26 22:33
Do you / how do you use storyboarding a lot to work out interactions and CTA animations?
valhead
2017-04-26 22:33
But if we treat it as a true design tool, it becomes part of the whole design effort.
valhead
2017-04-26 22:33
So, to avoid animation being seen as just an “extra” we need to include in it our design discussion and process early on and be able to articulate its value. Just like we would for other design tools like type and colour and such.
valhead
2017-04-26 22:35
@stuartmurray Definitely. Accessibility concerns can be a bit different with animation
glennveugen
2017-04-26 22:35
And how to convey design specs to developers? Type and colour are rather simple, also in terms of CSS setup? How is this with animations? There are lots of aspects that come into play when dealing with animation: duration, easing, … Any tips or tools to make design specs for animation?
valhead
2017-04-26 22:36
There’s the basic stuff in the WACG like not flashing the screen and including pause/play controls and such
valhead
2017-04-26 22:36
But since that was written for a slightly different era of web design, we need to connect some of the dots ourselves
mynameischad
2017-04-26 22:36
Not flashing is, I’m assuming, to avoid epileptic shock?
valhead
2017-04-26 22:37
For example, rotating carousels and such are long playing animations really, and they should have some kind of pause/play controls
valhead
2017-04-26 22:37
Not moving the actionable items is another thing to keep in mind
valhead
2017-04-26 22:37
And that sounds like something that’s easy to avoid. Like, who would want to move a button someone is trying to click on, right?
stuartmurray
2017-04-26 22:38
yes that’s a pet hate actually, I think I’ve used sites or apps that moved the buttons I was trying to tap or click on
valhead
2017-04-26 22:38
But I’ve seen more than one slideshow/carousel of content out there that is on an auto timer with no way to pause it and the button fades away before someone can click on it if they have any mobility issues at all. (Or even if they were just like, distracted for a second)
valhead
2017-04-26 22:39
Triggering issues with motion sickness and vestibular disorders is possible with animation. And that’s not something we’ve really had to think about before
valhead
2017-04-26 22:40
I wrote an article on what that means, and how we can avoid triggering people on A List Apart a while back: https://alistapart.com/article/designing-safer-web-animation-for-motion-sensitivity
valhead
2017-04-26 22:41
Browsers are starting to implement a reduce motion media query to help with that too
mra.kumar
2017-04-26 22:42
What are the tools we can use for creating an Anemation for any application?
valhead
2017-04-26 22:42
@mynameischad I use storyboards often as initial sketches for animation ideas.
valhead
2017-04-26 22:43
I find they can be really helpful for getting groups of people to give input on animations too. Project managers, designers, UX folks…. everyone can draw some simple storyboards to show a possible animated solution.
valhead
2017-04-26 22:43
So they can be really useful for getting a conversation going around animation and where it could possibly be useful.
mynameischad
2017-04-26 22:43
When I do it, I tend to treat them like keyframes (using arrows and such to denote motion)
mynameischad
2017-04-26 22:44
Are there techniques that you tend to fall back on?
valhead
2017-04-26 22:44
When it comes to actually evaluating if an animated CTA is effective though, I think interactive prototypes can be more hepful. It can be difficult to really judge things like that without testing out how they feel to interact with.
valhead
2017-04-26 22:44
But starting with storyboards to narrow down the possible approaches or ideas can be really useful before jumping into a prototype too.
valhead
2017-04-26 22:46
@mynameischad Yep, drawing out the key aspects of the motion in boxes, or frames, is pretty much how I use them. I really like Eva Lotta-Lamm’s approach for sketching animated interactions.
valhead
2017-04-26 22:46
She doesn’t call them storyboards by name, but her approach works great for storyboards.
valhead
2017-04-26 22:47
Her advice is to sketch out the trigger of the interaction, the action that will be animated and then write out some description of the quality, or how the animation should look/feel
valhead
2017-04-26 22:47
I thought her approach was so useful I interviewed her about it for the UI Animation Newsletter: http://valhead.com/2016/12/08/sketching-interface-animations-an-interview-with-eva-lotta-lamm/
mynameischad
2017-04-26 22:48
YES! Awesome
valhead
2017-04-26 22:48
(She’s the best at sketching interface things!)
valhead
2017-04-26 22:48
@glennveugen conveying animation design decisions to developers doesn’t have a really great solution yet
valhead
2017-04-26 22:48
I know that at least a couple of the prototyping tools are working on better ways to do this
valhead
2017-04-26 22:49
because it’s so essential
valhead
2017-04-26 22:49
my advice is to give developers some visual representation of the animation. Either a motion mock up (video of how it should work/look essentially) or even a basic prototype.
valhead
2017-04-26 22:50
Then also provide them with duration and delay values for the animations, details of the easing used (the cubic-bezier curve or spring values, or however else they’re expressed) along with any repeat values or iteration counts
valhead
2017-04-26 22:51
I know some larger teams have developed their own internal tools for pulling the data devs need out of After Effects-made motion comps. But even just writing it out by hand will be helpful.
valhead
2017-04-26 22:52
And if you’ve just been working out all the details of a particular animated interaction, you can probably rattle most of that stuff off right off your head. So it’s best to write that all down right after working on the design side of the animation. Much easier that way :slightly_smiling_face:
valhead
2017-04-26 22:53
@mra.kumar Sorry, I’m not sure I understand your question. Are you looking for a tool that exports animation for all possible platforms?
mra.kumar
2017-04-26 22:54
Yes for Android and other devices
hawk
2017-04-26 22:55
We have time for one more question after this. Anyone got one?
valhead
2017-04-26 22:55
@mra.kumar Depending on what kind of animations you’re looking to create a tool like Airbnb’s Lottie might do the trick.
valhead
2017-04-26 22:56
It uses the bodymovin’ library to export animations from an After Effect composition to android, iOS or React Native compatible files
vedanthk
2017-04-26 22:56
Are there certain parameters to look out for when we picture adding UI animations?
valhead
2017-04-26 22:56
Bodymoinv’ itself can be used to translate After Effects compositions to SVG or canvas for the web as well https://github.com/bodymovin/bodymovin
mra.kumar
2017-04-26 22:56
@Valhead Thanks
valhead
2017-04-26 22:57
Those tend to work best for animations that aren’t dependent on interaction though
valhead
2017-04-26 22:58
@vedanthk It’s hard to make over-arching rules that can apply to every variety of UI animation out there, but I think if there’s one thing to keep in mind across the board, it’s context.
valhead
2017-04-26 22:59
Or maybe more specifically, how well the animation fits with the current context.
valhead
2017-04-26 22:59
A good fit with the context is what makes animations feel right or work well.
valhead
2017-04-26 23:01
The same animations that are great in a game’s UI, for example, may not be great for a corporate web site, no matter how well those animations were designed.
valhead
2017-04-26 23:01
In the same way, an animation that’s perfect for calling attention to an error, may not work at if it’s used on every button in a navigation bar.
valhead
2017-04-26 23:02
The purpose of the animation has to fit the context it’s in for it to feel right, essentially.
valhead
2017-04-26 23:03
If the context and the animation gel, it makes for a great experience. So much so that the animations almost become invisible because they’re just part of the experience and the overall design.
hawk
2017-04-26 23:04
And we’re about out of time!
mra.kumar
2017-04-26 23:04
What type of sound effect we can use in Anemation
Music
Or interactive voice
Music
Or interactive voice
mynameischad
2017-04-26 23:04
THANK YOU SO MUCH!!!!!!!!
hawk
2017-04-26 23:04
Thanks so much for your time today @valhead – super insightful session
valhead
2017-04-26 23:04
@mynameischad you’re welcome :slightly_smiling_face:
hawk
2017-04-26 23:05
You rocked it!