Communicating Animation

Apr 1, 2016

–

9:30 am

–

Animation is key component of beautiful and useful product design. Salesforce, Google, and IBM all feature motion design in their design systems, and there’s every reason you should, too. When designers and developers agree upon constraints, they can create UI components faster and present a unified, polished look and feel users appreciate.

Communicating animation is all about identifying patterns and setting boundaries and behavior expectations. This means:

creating custom easings that reinforce branding and physics
choreographing scalable timing values
creating a vocabulary of reusable components
combining those components into unique yet universal animation patterns.

Whether your project is big or small, if it has a style guide, you will want to include motion design. In this talk, you will learn how to bring animation to heel.

Transcript

Chris Coyier:

Now we will tick today up with Rachel Nabors. She will talk about a lot of stuff about animation. Rachel throws around passion a bunch, but I will feel likes it's really exemplified in Rachel. She's talking about animation all around the world. And she has written about it, and if it moves, Rachel is probably involved. You may not have known is that she was raised on a farm and wrangled geese. Nobody can calm goose like I can, Rachel Nabors, communicating animation, welcome Rachel.

Rachel Nabors:

Thank you. Also, don't forget to fill out your food cards. Could you get me down for a cob salad and ice tea? I'm excited we both drew our slide. And I'm not wearing my lanyard, but it's okay to take photos of me. I want to do a little head count. It's early we are fired up. It's 9:30 which is like 4:00 a.m. in Portland. There is a time difference. Who here works with animation? Whoa. Here is, like, I want to work with animation. I wish we could put that in our U A right now. It's fun people. Get into it. All right. Now do we have any unicorns in the audience today? Any bronies? All right. Let's get started. Obey computers. Computer does not want to obey. Computer wants to freeze. That's actually pretty bad. But not bad for long. Whoa okay. It's being slow, I thought this might happen. I have done all kinds of awesome things like collaborating with Moe, mozilla showing people how to use animation tools in the browser. And A P I, and M D M. It's called poor also in animation land. And sometimes I get to do things more serious. I'm sure you have done the IP lightening design here. But I will, I helped with the motion portion. Consistent animation is important. Animation is great, and is good for U X and for branding but we haven't talked about how we codify it. I have seen people who are enthusiastic, have been well meaning. Developers might have 50 shades of the same color blue, I see that happening with animations today. This is a talk about how you should be wrangling animation. It's important to consistent branding. This is a sleek animation very fun and funky animation. When you put animation into a system, it's important to keep it consistent throughout the product. It's reality of the it makes it feel like there are laws in your system, physical laws that your world obeys. And if part of the system doesn't obey your laws, it pops them out of the animation, it's sloppy and doesn't look right. How do we wrangle? Here are some of the challenges, there are major communication issues but animation sits squarely in the middle of U X development. You will see problems if the systems couldn't don't talk to each other. How many people have problems bridging the gap. You will have problems with animation. There is a tendency of developers to own animation in a project. When design owns it, sometimes they have problems sending the right messages to development. And then lack of respect, except in large companies that have widespread teams that don't even go to lunch together. You will find that the perfect people will say, animations is bad for performance. And then the designers are saying, what? But you are sacrifices animation? You can't do that. Including animations in style guide and systems. It's a great place to start codifying and a healthy ecosystem. This is new territory. It was hard for me to find examples. So my talk is about why we don't have any universal awesome documentation for animations. I feel like there is feedback. Most times these initiatives are driven by the development for design, and you can see there is a clear split between the two houses. Designers want themes and theory, and they want the documentation to evangelize the documentation. You see this in I B M motion guidelines, and this is why it's important. Educational. It doesn't get into to how does this get in there. You will see in this lightening design's motion outline. You will notice when it gets down to microcomponents, it's instructional. They want to make sure they are doing it right, and the designers aren't saying, this doesn't look like the video I sent you. I do my own fun voices. These things tend to overlap in places and complement each other well. Developers can provide awesome defaults for people coming in to develop enough structures. And unit and guidance empower future contributors to make things in new ways. There is no ultimate animation or style guide or design system. There shouldn't be. You may be one or more of these things. It depends on the animation literacy of the company. I can empower you to do that work for you and your team and project. I want to start by telling you what I know about how you can document your animations. And the best place to start is at the end which is when you are getting ready to put your animation in the system. And the developers need deliverables. Developers love this because they want to be able to grab the code too. These are rare and are expensive and motion designers argue that code is limiting. Things that are animated, things that are designed code first, are like designs that are designed code first. You will find some strong opinions that you need to start with sketching. This is a fade, we faded the logo in, that's motion design. There are big opinions. On the other hand, designers don't like getting this design over the wall. This has happened on many occasions. I'm on project, and there is a visual designer, they send me the picture and they say, just reproduce this. It takes me six hours of: Okay, here it is, it's ready. Now that's not right. That's not like the gif I sent you. Well, can you give me the duration. I don't know. Can you give me the easing? I don't know. I made this thing in a graphic user interface but I didn't take down the numbers to give you. So it will take you six hours instead of 15 minutes. That's how it feels to me. And if they had given me a few things, it would be easy. Such as easing. This was called cushioning or slowing. I will give you an example. We have acceleration. Which is also known as "ease in." And we have deceleration. Also known as "ease out." And sometimes even if we are lucky, we get a bounce. That's easy, it's the rate of change, slow to fast. This is an opportunity for differentiation. This is a custom bounce, you would be hard pressed to find another set with that. Here is another page with a slide in that is not like other people's. And I use them and reuse them as often as I can. We want custom easing that reenforces our brands. This is easing, you can see it here, this is one of my glitches, I think. I was having trouble figuring out what was wrong with it last night. This is where I command with the mouse. Yeah, if you go to easings.net, you can check out these easings. Or you can create your own with tools in chrome or fire fox. This is an easing, it's called anchor. You can take these an anchor and I can pick out I want it to bounce, and these are the Firefox tools. That's linear. It's boring. I don't recommend it. But Chrome also has their own as well. I like Firefox's a little better because when I blow the font sizes up they are a little better. But I'm biassed. You can get by with just an few different curves. But you can't just say, we have one curve and it will rule them all. You will want a couple. An acceleration, or ease out, and deceleration ease in. And something for fades but I don't recommend linear. And bounce, it's optional. Where are you going to use those? Well, decelerate, that's for something that goes from a fast to slow which is great for human interactions; however. You might want to use an acceleration or system animations because they start slowly and they don't scare people. You might want that to be a slow pop up. Hi. Just systems saying hi to you. Fades and color changes are more subtle. And bounces increase animasy. It can add an air of fun. But it can be too fun. So use bounces with caution. Not a bad idea to have one on hand. Easing is fun to see. Animation can't happen animation can't happen without an duration. I work with Amy Lee. And she had this concept of timing scales. Aligning and combining in many different ways. You can think of these as a temporal version of a modular scale. For instance here, I would walk out P X for milliseconds. There are limitations to keep in mind. For instance, you want to stay within 70 to 700 million seconds. Because on average people change on screen, in that pretty wide range. Most people use a 200 to 300 millisecond range. It works for a lot of people. You want to use shorter durations for fades and color changes because they read quickly. And longer durations when you are doing large movements. And I recommend sticking to milliseconds instead of seconds because the web animation takes milliseconds by default, and pretty much any animation out there take milliseconds, not all take seconds. So it's easier in the long run for maintains. And last are properties. What is being animated and changing? All you need to know is, when it comes to C S S, you on pasty and formula are the most important properties to apply to the web. I mean, you may run into people saying you can't animate color, or change color. But if it doesn't hurt performance or the goal, I like to say it's fine to change technology from time to time. I use this quote too much, this is from Pixar, "the art challenges the technology and the technology inspires the art." This means if you don't use it, it ain't going to get faster. From time to time it's okay to challenge. I want to give you a permission slip for that. We combine these three things, easing timing and properties to create our or animation language. This is lightening design system again. Lightening design system has a good example of different vocabularies. We have fade in and fade out. And here we have a color change. I love how they are all shown and you can interact with them. You can grow, rise, shrink, pop. We have many different words for the things we are doing. Many of these words start with onomatopoeia. Like pop, and plunk, and then it splats on the page, and when it comes in from the side. And people will hold the vowels longer. Like zoom. Like zoom? Yeah yeah, like zoom. So that's the best way to start, it's a group conversation so everyone is invested in it. I love the way people change sound effects into dialogue. You have swoosh, and skid and pop. And this is a screen shot of this page. This is an example of paving the cow pats and adopting words like this? Building your animation vocabulary. You create mark animations. For instance, it fades in and pops to grab attention. And then it slides away and we call this a notification is it dismissal pattern. These words are so so useful. Remember, everything comes down to this, use your words. Words are the lowest common denominator. Pictures are worth a thousand words. Storyboards are used for cinema, and web development? They were started by the studios, for large animation projects. And they were so useful that other studios use them. They allow everyone to sink up together. If you are working on an internal project, it can get really sloppy. But it's a good way to show how to think about things over time. This one I threw together for working on the challenge project. You have post its. And this is what it looks like when you do this. This is a very professional storyboard. This is something I might send to a client doing a motion design audit. Video is hard to print out to send to people. If you want to have a long term documentation, sometimes storyboards are a good option. I'm going to explain for a moment how the storyboards work, I'm using two colors, blue and orange. I don't want to use red or green. That would be mean to some folks. Using the blue to indicate when something is being interacted with, and I described underneath when hovering and I use orange to describe when something is morphing. And I have arrowed around the original. And you can sink up the words and the colors and the pictures to show how things are changing over time. The words here are a good place to justify what is happening. The item will slide down because new thing is being added to help orient to help the user see what is changing. User words. So storyboard tools. I still haven't found an a perfect story boarding app. I still say go on old school, using post its and index cards, whatever. And I use it template, GOO.G L/P Y B X I 7. And there is Boards.com. Storyboards are great for communicating with words, but they can't indicate how they will feel in real life. You will need to show videos from time to time, so we have anmatics. And animation is worth a thousand meetings if a picture is worth a thousand words. This is an anmatic. You can see it's sketches put together with the music. As we have gotten better tools for animators. It's much more clicks. This is what we can do by making small videos or gifts on your own. I made this on my lunch break. Wire frames and storyboards are great together. Anmatics are not deliverables. Don't throw an animation over the fence without animation it is they are guidelines and not written is stone. They don't provide actionable content. Anmatic tools, we have Keynote, Adobe Aftereffects. I have seen a lot of job titles with Adobe Aftereffects. App, and stop motion app, which is what I used to make the loading post it. So studio animation can be screen tested. Web is interactive. You can't test storyboards, you need prototypes. What developer don't want a good copy/paste. They like prototypes. But they are terrible for documentation. You can't hand them a prototype and except them to match the design language from a prototype. Let talk about prototype options we have here. For people who are native oriented. There is principal and pixate of the former web oriented prototyping. You can use Invision, and GIFs. And UX pin is less primitive. If you have Unicorn, code oriented you can use Foundation or Framer J S. Alone, none of these are sufficient for communicating animation across silos or for longevity. But if we combine them, storyboards being verbal and animating and prototypes being visual, you can combine them to provide solid documentation to get the look and feel and how you need to produce it. Nearing the full ending now. Generating buy in. My documentations are saying, if you write it, people will follow. It's rare to find anyone who love this as much as you do. So how many feel like... the trick is these are social skills, which I have learned late in life. Have people contribute even just a few words to your documentation, you know what you said at the meeting, about the fade, I would like to include that idea. It works. Another thing I like to do is this exercise, I use it all the time when training people, it's a great team builder. Everyone has a wire frames of what your page should look like before and after, it has point A and B. And say let's get some index cards and draw what the in between state will look like. Is it swinging in from the side? Or is it hang down from the top? Most of all a team needs animation champions not just more maintainability, but because summon has to grow the love for animation. Make it a consideration on par with fonts. No one is going to come in and say, we need to use bounces. You need someone to come in with an a friendly, well actually. You don't want to make yourself a failure or a gatekeeper. You want coconspirators. I want someone in U X, if you are in design, you want some from development. Find someone who will geek out about this as much as you are. Animation isn't a chore. It could be cool. This could be a brilliant alliance. And lastly, this is the most effective piece of advice I can pass on. Do it anyway. Sarah works for Truli,who will have some pet animation coming out, she said, in the end you have to do it anyway, you have to show people what can be, you have to recruit people to be on your team and follow through, but first you have to start. An animation library will include patterns where you can cultivate an animation friendly culture. You can use storyboards, and prototypes to document. Speaking of words, use your words. Define your own language for your animations. Nobody gets to define them for you. Give developers what they need to create the animations that they need every time. There is no right way. You have to find your own way. Thank you have much. If you want to talk more there is a slack page. Slack.animation at work.com. Come on. I would love to know what you think.

Chris:

You need one too. We'll find one.

Rachel:

I have the mike. You have to listen toe everything I have to say. Man, that totally rearranged that slide so the U R Ls would be on the top of the screen.

Chris:

Hey Rachel. How you doing? That was good.

Rachel:

I'm glad you enjoyed it.

Chris:

Excellent communicator and unicorn head. At the beginning you mentioned briefly the concept of having rule for your animation to follow. Like you are setting up some laws of physics like this website should have and follow. Maybe to break your own rules?

Rachel:

Okay. Like babies they understand when something goes behind another object and doesn't disappear. We are born know this. We have this innate anticipation that the universe behaves in certain ways and it works that way on web sights too. If you break that pattern it can be noticeable. You get some Lee way, they might give you a little credit for that, but if something things are not obeying the laws, it's noticeable.

Chris:

What do you think the repercussions are? Like that website isn't doing it right.

Rachel:

I don't really trust this site, it's from a company trying to steal my money.

Chris:

Nothing good comes from breaking your own rule.

Rachel:

No, it's like wearing a really cheap suit to a wedding. Noticing is taking you seriously and you should go home.

Chris:

So you mentioned thing like, this website slide in from the left, there is a reason for that. You would not just slide it in from another side. You don't to want break your own rule.

Rachel:

You may have seen a team that says, I think it should slide in from the right. And you say why? It's because it's new information and they justify why it might be that way. It might be unjustifiable. They say because it looks good. Maybe that's not worth prioritizing. Because it looks good is not a justification for animation. It's not enough. And there are times when something looks really good. Well, if the illustration is the only thing on the page, that might be a justification. But you should follow up because it looks good and it's the only thing on the page.

Chris:

I can see people falling into that trap. It's dribbling itself.

Rachel:

You have to realize that that first article was for a review of a console. And everyone was doing console reviews. And they were like we have to do something with the console that doesn't look like everyone else.

Chris:

Now it not working so well because every review doesn't have this differentiation.

Rachel:

It's still a classic.

Chris:

Maybe there are some parallels between your talk and Anna's talk, that there are some moment where pops are classy and acceptable, like even if you rock some fun, or use some bounce animation, but maybe not so much when you submit button on the contact form when you are having problems on the chat. And you would to want click an button, to complain, and then have to come up with a super spin.

Rachel:

Baby animation, you helped me come up with a new product offering. Tone in animation is another thing to keep in mind. What kind of tone of you are conveying with your animations? Are you going with sleek and professional or fun and exciting?

Chris:

What's another tone you could say being? Classy or business casual?

Rachel:

You are asking me to describe a visual thing on stage without a video.

Chris:

Mouth blog it.

Rachel:

Can't do it. I would need a drawing board and really big markers.

Chris:

I wrote this down before you said it, it's like the tooling of animation is a weird state. It seems like nobody has struck gold on this is the tool for helping with web animations.

Rachel:

We did have some gold back in the day, flash had a really good animation interface but it was the wrong format for the open web. But people could grasp it and use it often. The question is will we be using flash animations?

I think we are facing that browsers throughout history have only had to animate one thing which was scrolling. Everything else was the flash plug in. Now it coming out a full on U I. We have never worked inside that paradigm. We are having problems with both prototyping and dove tools, but we are working through it as a family like we always do because that's the web.

Chris:

Can the process be cracked?

Rachel:

I think so. You have enough minds working on something. I'm excited to see what happens when is community goats work on the tools and isn't dictated to by a company. He have web animation, C I, which opens up the process in the browser, it's open season on open source.

Chris:

Thank you.

Video

Sketch Notes

Transcript