Design: Animation Design

Have you ever wondered how users assess digital products? Many users believe they do this rationally, but in reality, they can’t evaluate usability and content quality at first glance. Users are not capable of analyzing a user interface’s architecture within the first few milliseconds of viewing it. They’re simply reacting to movement.

While color and copy matter a lot, motion reveals the nature of a user interface almost instantly—so fast that users don’t even have think about it. Motion connects directly to human instincts and makes first impressions that are stronger than those of any static element. Read More

Interactivity used to feel like a gift. Micro-animations, clever transitions, and hover states promised delight, modernity, and proof that someone cared enough to design beyond the bare minimum. But somewhere along the way, that promise soured. What started as an enhancement became an obligation. Users must work through user interfaces that demand their attention and patience and require interpretation before delivering basic value.

Most people never articulate their frustration about such interactions. They won’t complain about the hover delay on a drop-down menu or an animated onboarding flow that refuses to let users skip it. They’ll simply become fatigued. They’ll hesitate, misclick, or abandon and move on. Over-interactive design rarely triggers users’ outrage. It slowly erodes users’ trust, which teams often misread as churn, disinterest, or a poor onboarding experience rather than design excess. Read More

This is a sample chapter from Val Head’s new book Designing Interface Animation: Meaningful Motion for User Experience. 2016 Rosenfeld Media.

Chapter 3: Modern Principles of Interactive Animation

The classic principles of animation teach us so much about creating natural and pleasing animation, but they fall short in guiding us in one particular area: interactive animations. It’s not their fault, of course, because they were written for a different era of animation when interaction wasn’t a thing to consider.

Designing interactive animation—which interface animations often are—requires approaching animation just a little differently and working with a different set of rules for behavior. The way your animations behave during an interaction affects how your users perceive them just as much as how they look. The core of what the 12 principles cover still applies to your work, but you also have to consider the interactive context of your work. Your work won’t just be watched in the classic definition of animation—like feature films and cartoons—it will be interacted with, too. And that means you have to consider factors beyond the classic principles—or any other motion graphics techniques—when designing quality interface animations.

This chapter covers the principles of interactive animation: the factors that ensure that animations work with the expectations that come with interaction, not against them. Read More