Editors’ note: We’re introducing a “Book in Brief” feature here on Boxes and Arrows. We’ll publish an excerpt, up to 500 words, of your book. The catch is that we’ll only publicize one book a month; first come, first serve. Other rules will certainly occur to us over time. Hit us up at idea at boxesandarrows.com.
Val Head kicks off August with an excerpt from chapter four of Rosenfeld Media’s newest, Designing Interface Animation: Meaningful Motion for User Experience.
Using Animation to Orient and Give Context
Animation has the power to suggest space and movement in ways that none of your other design tools really can. This makes it especially useful for helping to communicate the lay of the land in your screen-based interfaces through visual hints and special suggestions. It also has the power to suggest depth and space, two things we encounter regularly in the physical world but are often difficult to replicate on-screen.
Motion can be used to suggest boundaries, layers, and hint at what lies beyond the edges of what’s visible on-screen. Even a small visual clue can make understanding the landscape of an interface easier to understand at a glance, saving time and effort to explain which objects are located where. Think of it like a mime drawing the outline of an invisible door. With one gesture, the entire audience knows exactly where the imaginary door is and why the mime can’t walk through it, even though none of them can see it. A shared understanding has been created between the audience and the mime. Motion in an interface can accomplish the same results.
Create a mental model of what’s out of view
When you’re trying to fit a large amount of content into a small amount of space, it gets really hard to fit everything on-screen. Actually, it’s impossible. If you’ve ever worked on a responsive design or anything that considers the smallest viewport sizes, you know that fact well. Even when you can fit everything on-screen at once, it’s rarely an ideal solution for the design for the experience.
Patterns like off-screen navigation or interfaces that exist in layers—some stacked behind or in front of what’s currently in view—have emerged to help fit a lot of information into a small space in a meaningful way. Using animation to transition between layers or bring off-screen elements into view helps reinforce the spatial relationships of the interface for your users.
Designing Interface Animation: Meaningful Motion for User Experience
The funny thing about timing is that despite its potential to communicate, and all the effort we might devote to choosing it, all animations have to happen quickly. One of the biggest motion design crimes out there is to make your UI animations too slow. It takes practice to get timing right, but the more you do it, the better you’ll get. Prototyping animations is very effective for getting your timing down. The 3D rotation part of the form-expanding animation in the Checkout flow is an example of secondary action