Putting Your UI in Motion With CSS: Val Head at An Event Apart Seattle

Val Head is a huge advocate for CSS animations, something I also love to explore. I think the most important thing to realize with animations, is that they are not just for aesthetic or “flash.” They can be used appropriately to enhance the user’s experience and make your app or site more usable.

  • In the heyday of Flash, the choices were either no animation, or all the animation. If you were going to the effort of building in Flash, you were going to show off everything you could possibly do.
  • CSS animations are finally giving us the ability to bring the practical and experimental worlds together to add in an extra layer of awesome on our sites.
  • Val doesn’t love how the CSS spec defines Transition, Transform and Animation. They all kind of meld into parts of the same mental model. To code these step-by-step takes dozens, possibly hundreds of lines of code. Very complex, but luckily there are CSS generators that will help do it for you.

Practical uses for animation

  • Animation softens the edges of interaction.
  • Animation can establish location.
    • Example: submenu on wacom.com
    • Example: On Google+ when you click on a hashtag, the card flips over to expose all the other posts about that tag.
  • Animation can demonstrate.
    • “An animation is worth a million words.”
    • It’s not only a faster way of communicating how to use your app, but also very clear.
    • Example: MailChimp does a 3 second animation the first time you use the product, showing the user how to drag content into the template, rather than having them read instructions.
  • Animation will take over your hierarchy. Be sure to plan where and when to use it to ensure it’s guiding your user to the content they want to find.
    • Example: FitBit uses animation only on your personal statistic visualizations, so you are focused on what’s important to you.

What not to do

  1. Don’t be inflexible. Ensure that user can continue to use your product, even if an animation is currently happening. Don’t block usability for the sake of an animation.
  2. Don’t create obstacles.
    • Example: Square’s website redesign forces user to click “Menu” link which opens a full screen modal overlay with a fairly slow animation. It completely removes user from context.
    • Test your ideas in context, and test them early in the process.
    • “Prototype the crap out of your ideas!”
    • Some options for testing animations: Adobe Edge Animate, Tumult Hype
  3. Don’t be too slow. Users shouldn’t have to wait for your animation to get what they want.
    • How fast is “fast enough”? It depends.
    • UI animations should be as fast as they can still be readable. Will depend on the type of content being animated.
    • Context matters more than
    • This is another great reason to test your ideas before release.

One thing you should always do

  1. Match your animations to your message.
    • Good example: Dots iOS game uses consistent, fun animation style throughout.
    • Bad example: Apple’s website uses the same bouncy fun style on their website, where it feels incongruous with their sleek, sophisticated brand.

How to actually make animations happen

  • CSS is great, but it sometimes needs help from JavaScript to trigger animation, transform, transition changes.
  • Examples: JavaScript automatically changes transforms from one shape to another to show different devices over time. Can also change class on an animation to change from pause state to run state.
  • Val has more screencasts showing how to execute some of these ideas in more detail.

Val has some great, practical examples in her article on A List Apart, UI Animation and UX: A Not-so-secret Friendship. I read this one when it was published, and immediately shared with our entire web and design team. It’s a great overview of how we can improve usability with animations.