Design for Interaction: Using Animation to Enhance User Experience
Michelle Schulp presented “Design for Interaction: Using Animation to Enhance User Experience” at UX Camp: Home Edition on Saturday, June 13th. Enjoy!
The following transcript may contain typographical errors. Please forgive any mistakes!
To everybody out there having a great time, the weird thing about doing a virtual presentation, so I’ve done a lot of stage presentations, and the weird thing about virtual presentations is that literally the only engagement I get is looking at my camera, maybe if I’m following Slack channel, but I usually don’t try to do that while I’m speaking, so I’m going to assume that I am charming smart and hilarious, and hopefully you all agree by the end, but otherwise we’ll get going, so super brief introduction. High on Michelle, like you heard.
I have a background in design, that’s what I studied professionally. I’m currently doing primarily Fun and Development and Strategy-focused user experience, but animation to something that has gone a ways back with me in my career, my first freelance job was actually doing Flash banner animations and custom header animations for Career Builder, so right up in there, back when that was the thing, I’m very glad I didn’t invest all the time learn action script ’cause it worked out in my favorite, but even outside a Flash, which is no longer thing, so much of the web is built on interaction, right.
Even native elements of the web, mat of ICH, EML, like links, buttons, forms, controllers, menus details, so many different things you interact with, and then of course, we have a bunch of fancy things now, like drag and drop, moving, hovering, grouping, stacking, sliding, everything on the web, right now, whether it’s mobile or on a desktop is built on interactions, but unfortunately, a whole lot of the web is also powered by cut scenes, such as when you load a new page or when you open something up, and the problem with cut scenes is you don’t have any kind of transition, it’s basically an immediate change, and that leads to a lack of orientation, you have change blindness, your brain kind of internally reset, and you can kinda see in the example here, it’s really hard to know what was on the previous page where you’re at right now, so that’s a bit of a problem with how the web works.
On the flip side, there are a lot of people using animation really poorly.
You’ve probably noticed that it’s pretty resource-intensive, it’s probably resource-intensive even presenting through this thing, so there’s a struggle to load, there’s issues with bandwidth, and also people that are just doing way too much of it. It’s overdone, it’s unnecessary. It’s annoying, if you go on to a website and there’s too much motion or too much flashing, it basically becomes like an ad effect, right.
We think of it as something that we’re supposed to be ignoring one of the biggest patterns of animation right now on the web, I know you’ve all seen it as parallax websites where some clever stuff happens when you scroll… It looks very beautiful. But is it actually useful? So the Nielsen group, who we all know is one of some of the best UX studies out there, did some studies on parallax, and what they found is that it is difficult to control, it takes longer to load, most people find it disorienting, dizzying or distracting. And I believe, to quote the study, they said it was just not that cool, meaning it’s not really worth all of the problems in order to do this, it might be worth it in a very small amount of cases, but in most cases, it’s not really worth ruining everything in order to do this fancy thing, there’s a phrase in the animation industry called junk, and that’s basically it stuttering and halting and breaking flow. This is when the animation can’t keep up or loads improperly, and people notice that and it has a negative impact on user experience, again, that might even happen during this presentation or when you’re watching a video online and suddenly stuff starts breaking up, it pulls you out of the moment… It makes it really hard to focus. So I just spent a whole bunch of time talking about all the problems with the animation, but animation is actually really great, so how can we utilize animation effectively in our interactions?
Well, one of the things that we can use with animation is to provide context through hierarchy, so we’re establishing hierarchical and spatial relationships between something that helps us co-established causality, it helps us show depth, it helps us show that we’re navigating between layers and an app. It directs attention to a lot of important elements, most of the examples that I’m going to be showing here are in a mobile interface, just because animation is a little bit easier to use and kind of a native application, but obviously all of this translates to the web as well, so I just happened to find a lot of mobile examples when I was building this, but this does not just apply to mobile, it applies everywhere, but anyway, you can see the examples here that we are showing how we’re navigating between layers, things bubble up to the surface and kind of expand and then contract back, it helps gives us a sense of what is related to what… It also helps to establish relationships, so a few different kinds of relationships, tab-to-tab relationships are scrolling and swiping relationships between peers, things that are adjacent and hierarchy, a menu button to a drop down, a modal or a pop-over to a main element. So it’s showing where something originates from a line item expanding to a full screen, again, that’s that parent child hierarchy, but showing which child which parent is related to each other, tags and accordions and drop down super great example, we’re showing her something expands and contracts from… Or even not loading icons and placeholder content to show where the content is going to replace, so all of these are about establishing relationships, animation can also be used to provide feedback. One big thing is that if your users taking an action, they want to know that the interface has received that action, right, so animation can be used to provide feedback when you select something or drag something or move something, hovering, pressing even a really great way of being able to show success versus an arrest, you can use innovation to provide that feedback, you can also use animation to indicate status. So for example, again, with loading new content or placeholders, you can show the pre-state versus the post-state versus the transition, if you’re loading more content through an ax behavior, you can show the loading status there. It’s really great also for state changes such as honour of open or closed, Select Select focus on focus. You can use it to indicate progress, like loading bar pagination and indicating the way something is supposed to work, building on that, you can use it to give instructions, so it can be used to help teach your user how something works or where something goes, that can be anywhere from just a small instructional pop-up to a high light to a full video walk-through that’s like Here’s exactly how our apps going to work, so there’s varying levels on the screen right now of using animation to give instruction on how something is supposed to work.
And of course, you can use animation to add to light, right. Part of it is creating personality in character, so making these micro-interactions a little bit more special, creating an entire character animation, I really enjoy this juggling person, you can create entire cut scenes out of it. One of my favorite ones to watch is this one on the blue screen, the loading… I just get a kick out of it. It’s like, come on.
Now it failed me. That’s great, and that’s just a fun, special way of being able to add some delight, and animation has actually been around since the beginning of the digital interface.
The original animation tool. What’s the flashing cursor? Now, normally in person, I’d be like, Hey, who all remembers this? I am assuming all of you do, but the flashing cursor actually provides a ton of information to you just from that simple animation, first of all, it indicates hierarchy by saying This is the element that you’re supposed to focusing on, right, this is the only thing is moving on the screen, look at me, feedback. As you’re typing, the cursor moves, so that’s indicating that your action is working and it’s receiving it, it also indicates status, because if the cursor is still flashing, that means your systems still working, ’cause if it freezes, you’ve got a problem, and of course, instruction because it’s showing you, Hey, this is the spot where you are supposed to type, so even something as simple as the flashing cursor is using animation to communicate a whole lot of different things.
There is the 12 principles of animation were developed by the original animators at Disney animation studios. It’s also a really great coffee tap book, I have it on my shelf behind me, but these principles were created very early in the days of animation to provide a platform that makes animations feel more physically and psychologically believable. And I wanted to walk you through all of them because it’s actually really useful when you’re thinking about developing information and animations to know what these things are.
So the first one is probably when you’re familiar with… Might have heard of it’s called squash and stretch, and what squash and stretch is doing is establishing the physics of mass, so you’re getting here, we talk a lot about physics and psychology throughout all of these things, but it’s showing you how flexible something is, how strong gravity is you can get an idea of maybe what material is made of, you can see this if you ever recorded a bouncing ball in slow motion, you see it kind of squashes when it hits the ground and stretches when it bounces up, the amount of squash and stretch kinda gives you some indications about what the so-called material… This animated object is… There’s also the concept of anticipation, and this also has to do with the physics of mass, specifically about inertia. Now, inertia means an object at rest tend to stay at rest. An object in motion tends to stay in motion and it needs energy to get started, an energy to stop, so you need a little bit of animation to show that it’s getting that energy, or you can also be used to add a little bit of sentience, so your object, right? Something like getting ready at the starting line or winding up before a pitch… That’s a form of anticipation.
There’s also the concept of staging, staging is not necessarily just an animation principle, it’s basically just setting your stage and showing your view or what the important part of the stage is, it could be using movement, but it could just be lay out. It could be how you use focus, it could be hierarchy in relationships, all of that has to do with stage in… There are a couple of different ways to do animations, and if any of you did flash animation, you might be familiar with some of these things, so we have two different concepts, straight ahead action and post post Great Head action is where you literally cooma each frame as it’s going through… Whereas post-pose is a twining, which will get into a little bit more, where you basically just lay out the core POS is that it’s supposed to end up in and let the computer or the junior animator take care of the rest, right.
Another concept Is follow through an overlapping action, this again has to do with the physics of mass, it also has to do with the difference in mass or behavior of different elements, so you can see this thing is all, which means that the bottom actually stops before the top stops because the top wants to keep going while the bottom is already at rest, so this thing, a very wiggly rubbery material has a lot of follow-through and overlapping action, but it just shows different parts starting and not thing at different times.Slow in and slow out. This has to do with the physics of math, known as acceleration, we call this easing, and I’m going to talk a little bit more about using as the presentation goes forward, but basically, things don’t just instantaneously start instantaneously stop again with inertia, there needs to be energy that gets it started. How fast and how slow can give you a lot of information about friction, about energy, about speed, that kind of stuff are…
This is a physics concept where ADC Center in the air tend to move in the shape of an arc because of gravity and because of A… They’re not going to just move in a straight line throughout her, they follow an art it, the plot, gravity, secondary action is a concept. This is a little bit to do with physics and a little bit to do with psychology, so it’s showing the attention to detail and secondary action, but also the psychology of believability, making your animated item feel more like it could exist, a great example that’s talked about a whole lot is When Monsters Inc came out and it was a very big deal that they had animated all of Solis hairs in a very unique way, that was a lot of secondary actions, but it made it a lot more believable because we all know that that’s exactly how hair would be having real life, it’s not just a texture, each piece of hair has it to behavior, and that was pretty revolutionary. A lot of stuff with hair and water and all that stuff in big blockbusters is a big example of secondary action.
Timing, again, has to do with physics. If you look at these two animations next to each other, they are both to squares pushing another square around, but you feel that one square in the other square have a very different story to tell, one maybe is a lighter weight or wiggle the other one might be heavier or on a rougher circus, we’re literally just looking at squares, but because we’ve changed our timing, we’re getting a very different story, exaggeration, this is a psychological concept, so basically over-emphasizing an action actually makes it more believable, it’s kind of like how… If you’re on a stage and you were in normal make-up, your face looks washed out, but if you were a stage make-up, you look normal, but if you saw somebody walking down the street and stage makeup… You would think it was way overdone. Right, but you need it in order to be believable while it’s on a stage, same can up with animation, a solid drawing, it’s just a concept that means that we believe that the thing that is on the stage is following the principles of Space, Time and Matter. It behaves consistently with itself and with its environment, so it does feel like the object could physically exist or psychologically exist, it’s not being a consistent… When things break the rules of solid drying such as there was a big deal in the original Frozen movie during let it go, where she’s singing at her hair kind of goes through her arm, like you see it… If you look at it, you like breaking the concept of solid drawing that could never actually happen.
And again, we’re getting back to the concept of the heart and soul, the personality of your animation, and this is known as a PO in the 12 principles, which is again very psychological, it’s like just given you a little bit of delight, a little bit of joy, and giving your animated object a little bit of personality, so that was super fun to talk about all that stuff, that makes sense, but how is all of that useful to user experience, so what are these things providing to our animations, the running a few different things, the ride realism, so how things behave in the real world, again, all that stuff about physics that I was talking about, the help you get context, like we talked about before, you can establish spatial relationships between different states between different objects and between the state objects and their stage to help you establish causality. So influential relationships between a user action and their object, this thing made this other thing happened, they can be used to focus, to direct attention to the most important elements like, Hey, pay attention to this one, and of course, they can provide delight, giving positive experiences in personality.
So now that we’ve gone through on th philosophy, let’s go to that, some actual practical stuff, what are the properties that we can be in the meeting on the web and in what way? So here’s a little bit of vocabulary lesson for all of the different ways that we can interact with properties on the web, some of the things that we can animate our color, so the fill of something, the border of something, we can animate the opacity or transparency of something how much you can see through it, we can animate something’s location where it is on the stage, we can animate it shape, change it from one shape to another, we can animate it scale how large or small it is, we can animate its focus, whether it’s sharp or fuzzy, there’s a ton of different things that we can animate, and there are several different ways we can look at the duration of animation. So again, back to Nielson, they did a study on three important time limits, and I wanna talk a little bit about all of those things, so the first one is about 100 milliseconds, so like a 10th of a second, and response times that are about a 10th of a second Fel instantaneous. So that’s really good for immediate small transitions, like a toggle or a check box or something like that, that I’m showing right here, it just feels like it happened instantaneously, and for slightly more complex animations like maybe on it’s wiggle or you want it to do a little bit more, somewhere in between that tenth of a second, in one second, it still feels very instantaneous, but it gives your brain a little bit of time to actually process what’s going on at about one second, that’s about the time where things still feel connected. So it was known as the flow of thoughts.
So this is a good amount of time for navigation or major state changes, we don’t wanna completely change our entire page in that tenth of a second, ’cause it would be very disorienting, that would be close to a cut scene, but about one second, you feel like I interacted with a thing, and something happened after that, I understand what’s going on, and then when we’re getting higher and higher, when we start getting close to 10 seconds, your users have lost their train of thought, they don’t remember that the thing that they just did would have been the thing that caused this action, so if something’s gonna take away, alright, we can’t necessarily load a whole bunch of content instantaneously, there are limitations of bandwidth, there’s limitations to processing power, you need to have some kind of intermediary animation that will indicate that, yes. You have done something, we saw what you did, we are in the process of doing something about it, and now stuff is going to happen, you need that thing to transition people because when you get up to 10 seconds, people aren’t going to remember… They’re just gonna think something was broken, another thing to think about when you’re looking at duration is where your element is and how much it’s moving, so if something is larger or is going to be moving a large distance across the stage, you wanna give it a greater amount of time, because if something ending with all the way across the stage, you don’t want it to be instantaneous, again, that’ll look like it just happened, and people won’t be able to see the transition if something is happening closer to the middle, so closer to where somebody’s focusing that you can take a little bit less time because they’re probably already looking at it, if something’s close to to the periphery, you probably wanna take a little bit more time so that people have a chance to notice it before the animation is ever… There’s a few different ways that things can transition, so on element can be persistent, which means that throughout the animation that stays on stage, it was there when it started, and it’s there when it stops, it can be outgoing, so it could start on the stage and then end up leaving the stage, it could be incoming where it started off the stage and wound up entering the stage, or it could be static, which means it’s not being animated, but it is still a consistent element that maybe serves as a landmark to the other elements or something else to establish where everything is, I said I’d talk about using a little bit, I just love staring at this slide, actually, it’s very hypnotic, if you can imagine it being on a giant wall behind me, it’s very distracting, but that’s why I love it.
But using is another word for acceleration and ease in is when something speeds up or accelerates, so it starts slow and ends up fast, and hes out is a deceleration, so it starts out fast and ends up slow.
We also have the concept of a bounce, which is using the principle of follow through where something goes slightly past its destination and then Spring is back, so for example, if I came at you like this, I’m not just gonna stop and freeze, I’m probably gonna relax back a little bit, right?
You can definitely tell it looks way better in person, but it’s totally fine, but that’s the concept of a bounce, and if something’s coming at you really fast and staff’s really fast, it’s probably going to be more believable for it to have a little bit of a bounce.
The concept of tweeting, we talked a little bit about that before, but that’s basically the transition of an object between key frames, and you can see right here, there’s actually a whole lot of different tweeting happening, so we have the shape of the object is changing the mail to a rectangle, we have the color changing from purple to white, we have the scale changing from small to large, we have some of the transparency of the background is kind of changing, there’s like an overlay there we have focus changing all sorts of different things can change when you tween something and that can help establish a relationship.
We also have the concept of the state, and there’s a few different kinds of pads that you can experience, the biggest one is, does the first item of fade all the way out before the second item shows up, or is there a cross-fade where there’s some intermediary state where both elements are showing slightly or are we fading completely out and then fading in again.
That’s why you have to think about when you’re looking at Bates.
There’s also the concept of transformation. Now, the one on the left is the one that I always think of my early days of doing Flash, where you learn about a tween and you’re like, Oh my God, looking between these shapes together, how fun. And it’s kind of pointless, but you can see in the example on the right, this is actually a great example of how the button turned into the Progress indicator turned into the success state, that’s kind of a sweet example of transformation used to convey information.
I wanted to show this slide really quick, I’m not going to speak to all of these things, but if you go to UX and motion dot net, you can look a little bit more about how the 12 principles were applied specifically to UX in motions. It’s slightly different than the 12 principles of animation.
It’s kind of a fun little concept, but I just really like this slide because it was really repetitive and distracting and I wanted something fun to star at, but feel free to look at that. I will make the slides available after this ’cause there are a lot of links in here, so dum panic and feel like you have to re-watch the video to find out what all the resources are, so… Okay, we’ve talked a whole lot about animation, but I remember at the beginning of the presentation, I was talking about how recklessly it can be used and how it can cause problems, so I wanna briefly mention how can we responsibly use animation in a project?
First question to ask yourself is, does your Innovation add value? You want to prioritize animations that will add at least one or multiple forms of value, what do you… I mean, does it show the user where information came from or where they had information went to, does it help indicate progress, show how long something’s taking or how close something is to being done, does it help move the user through the space… Does it help them to navigate different levels of higher year understand relationships, isn’t reinforcing physics or does it have to do with your brand, or does it explain something faster than words or a video could… These are all different ways that an animation would add value, or your behavior is consistent, so it obviously is a better user experience to adopt consistent animation patterns so that everywhere across your website or across your application, everything behaves is expected.
Plus, if you’re doing things consistently, you wind up with a more streamlined, maintainable code base when you reuse your animation components. Yeah, that’s great.
Is it still functional without it… You don’t want your animation itself to be mission-critical, so you do want there to be an alternative or a fall back where if it doesn’t animate the things still work, especially if you’re using cutting edge CSS to draw the script to do that animation. Let your action still be functional without it, just use it as a progressive enhancement to make it more valuable.
We don’t want to be creating animations that are going to just bog down all of your resources and make your app website not usable.
Do you need it?
That’s kind of the big question. I don’t do it if you don’t need it. I read a really great animation at worker at a really great sentence that said, Don’t make something unless it is but with necessary and useful, but if it is both necessary and useful, don’t hesitate to make it beautiful, and I think that’s fantastic.Praga is at first, but if it is something you need, do it purposefully and do it well, I have a really useful side right here of a whole bunch of tiny links, like I said, the slides will be available, so don’t worry about trying to copy all this down or look at it now, but just a bunch of resources on user experience in general as it relates to animation, the first one’s super fun because it actually shows all the principles of animation as CSS animations, which is neat.