Animation: the fast and the furious

“Hey, we do what we do best. We improvise, all right?”

Photo by Håkon Sataøen on Unsplash

So my movie reference has only a tenuous connection with animation. All the same, I am inspired by Val Head and Sarah Drasner. They are each experts in compelling animation, specifically on the web.

Animation has had a bad rap, given many bad Flash websites and even worse popup ads. Yet animation, especially for technical content, can convey rich information simply and can also delight users. My team’s experimented with animation for flow diagrams, time-based concepts, and changes in states.

Tips from Sarah and Val that can inform how to build the good animation (not the awful stuff from 2006):

Do’s:

• Be purposeful and thoughtful with movement
• Ensure consistency across animations
• Prototype in Keynote or PowerPoint because it’s super easy
• Be responsive for smaller devices; in other words animations that have space to breath on the desktop are overwhelming on a mobile device’s small screen
• Use a design system’s guidelines or borrow from another company’s guidelines to help with easing, speed, etc.

Don’ts:

• Add on visual bling
• Flip objects 360 or rotate a page, such as some of the PowerPoint animations
• Create getting started experiences that require a “Skip this intro” link
• Forget accessibility
• Skip user testing

For more, read Val’s book, Designing Interface Animations.

Photo by Håkon Sataøen on Unsplash

“So if you don’t drift to win, what do you drift for?”