Designing With Animation
We’re in the future, and interfaces are falling behind the curve. Software should feel as responsive and human as the people interacting with it. Design should respond and react with vitality. Too much design is created with an old, static web mentality, and not pushing the new mediums we have to design for. What is it like building interfaces with an animated foundation? Why is it better? This will be an adventure into the magical cosmos of animation. Cartoons, Anvils, Jokes, Jokes people might not get, Dynamite, Stage Dives!
Reference: Animator’s Survival Kit.
There’s a specific type of language animators use when they talk about animation. They talk about cushioning, anticipation, anvils… engineers talk differently. Pasquale wrote an article about this to bridge the communication divide (now shared on medium.com: https://medium.com/design-ux/926eb80d64e3).
There’s an argument that animation takes up valuable time to implement… well yes, but it has a huge impact. It also takes time out of the users’ day to observe it… but it also takes time for a person’s brain to deal with abrupt changes in UI, which can be smoothed out with good animation.
Good animation is invisible.
Too much change in the UI can leave the user disoriented. Animation is a clue to why information is flowing and how it is connected. It’s designing with the fourth dimention – time. Our old mentality is having screen after screen – but going between these is jarring. It’s weird that this jarring experience is the baseline. We’re emotional beings, we’re not robots…
Reference: “From Cartoons to the User Interface” (missed author). Much thought goes into details, but not enough about the transition between them.
Animation is not new – it is in fact centuries old. We do not need to reinvent or rediscover animation, we can learn from what has gone before.
Demonstration of the bird+cage 2-frame animtation – our brains combine the information to make sense of it.
There are very few things in real life that happen instantly – not even balloons popping or lights turning on are actually instant. Some time passes during the event. If you make a UI transition instantly, it feels weird.
[Plays Back in Black as a transition! Feel like I’m watching Rockwiz… :D]
Animations don’t need to be long or over the top, just enough motion to give you the idea what’s happening and why. Ease in quickly, only emphasise the idea that it’s about to go back out. Demo shows a modal that eases in, but the title bobs up then down before easing out. When a stream updates, injecting the new content pushes the old down before zooming quickly in.
Optimisations – you don’t have to slide things all the way to the middle from the bottom, you can slide from 2/3 down, or just bounce it in, or flip it over like a card.
You can go crazy and abuse animation – keep the crazy stuff for unsual moments like a congratulation screen. Keep the rest of the animation subtle, unintrusive.
IOS7 got a lot flatter, but also brought in animation. Although many of the animations are too long, most could have their duraction sliced in half without losing their impact.
Real examples… (bad)
Twitter revealing an image has no transition and you actually see the image pop in. Even adding a spinner helps. Revealing new tweets has no transition at all, even a simple fade would help.
Facebook stream – opening a video is really glitchy, nasty. Adding a few frames of transition softens the blow of the modal. Some things including the Like button demonstrate an awareness of animation, but it’s not consistent.
Evernote app – uses a right-pointing arrow, but then zips the content up from the bottom. The animation doesn’t match the expectation set by the affordance.
Real examples… (good)
Will Call app for booking tickets – the animation has a good character, good consistency.
Letterpress, Path, Tumblr, etc – all do well with animation.
Designing with animation
Often helps to break out a specific element to work on it, to cut it down to a single interaction to see if it makes sense. Also Pasquale uses animated comps to inspire engineers to want to work on stuff – better than 2d mockups which aren’t as enticing.
Traditionally we have designed interfaces with linear states and no care taken about moving between the states. Inbetweens help – we ask how does the app transition from State A to State B?
In animation, states A and B are the “extremes”. They are the poses with most contrast in the animation.
Demonstration: automated tweening of an arm waving seems totally unnatural with linear easing, which means all the tween states are evenly spaced between A and B. By moving the middle tween state closer to A or B you get different effects – in CSS terms, ease out and ease in.
By breaking up the arm into three separate shapes and having them move separately, you get a toy-story-esque floppy armed wave.
Pasquale spent hours on end as a kid looking at cartoons frame by frame – “drove my parents crazy!” He learned a heap about how animation worked.
Reference: Disney’s 12 points of animation. Including anticipation, which prepares you for a bigger action… etc. Worth looking up the full list!
Youtube: back story of how the animations for Tarzan was done, studying animal movements to apply to Tarzan. They got into deep detail about anatomy – particularly musculature.
Take aways:
- Static interfaces suck – “you can argue if you want, but you’ll lose…”
- Animation is a clue – it’s meaningful, it can describe context
- Great animation feels invisible
- Learn from the classics – the principles apply to all animation, we don’t need to reinvent the wheel
Q&A
Q: do you have any suggestions on how to convey information between devs and designers?
A: the tools to pass that along really suck right now… best way is to do animated prototypes, someone can do something in After Effects really fast, that would take a long time to build out for the web. Most times using videos for composition will be better than flat images. Nothing will replace sitting together and working on it. The animator has responsibility, they shouldn’t just throw things over the fence and hope for the best.
Q: where would you start if you want to learn animation?
A: Learn After Effects, learn linear animation packages. Quartz Composer is really too hard to learn, don’t start there… You need to be working in a visual tool. You could also try things with lower learning curves like Adobe Edge. Learn to make a ball bounce. It’s really hard. It is the first thing a senior animator would give a junior.
Q: if you do put your first motion composition, where would you seek feedback?
A: that’s another tough thing, not a lot of animators have crossed over into design; and a bouncing ball isn’t so fun to critique. So there’s not a whole lot of community around animation. Tried to create this but it’s still baby steps, it’s going to take time for that to come together.
