Design for Software: A Playbook for Developers

Chapter 10: Motion

“Animations . . . those are nice to have”

WATCHING A MOVIE, playing a video game, or enjoying a Sunday morning cartoon are all highly engaging activities, and as viewers, we’re fully immersed in the illusory world in front of us. Wouldn’t it be nice if our day-to-day applications could engage us the same way cartoons and video games do? Just imagine how nice it would be to be completely focused while our apps quickly and smoothly guide us through our tasks. Unfortunately, that is not how I describe most applications today. Instead, most apps are unresponsive, jarring, and unpredictable, leaving users to guess at what to do next.

So what is it about a Disney movie or Triple-A game title that keeps us so engaged? Without a doubt, the animation and motion tactics play a critical role in connecting us with the visuals onscreen. In fact, Disney has been successfully employing a set of tried and true animation principles for more than 50 years, which has manifested itself in nearly every blockbuster hit they’ve had. And here’s the best part—those same principles translate really well to UI design, giving ideal guidance for creating UI-bound animation. Motion in software is crucial for instilling confidence and capturing the engagement of the user. Motion is what makes the UI feel . . . well, right. So let’s start making things move!

In this chapter, you explore the basic principles of motion and dive into examples of how to implement key concepts into your own projects. ...