Today, let’s talk about one of the most important design principles: Anticipation.
Anticipation has always been a key ingredient for animators. Imagine you’re going to jump, straight up. In order to propel your body up into the air, you’ll likely need to bend your knees a little bit. In the case of my boyfriend who has studied gymnastics, he prepares himself by rising up on his toes a little bit first. If your ankles are strong enough, you might be able to get away without bending your knees. But try to simply propel yourself upward with both feet firmly on the floor to start, and you’ll find that it simply doesn’t work. Your body has to do a little something. Objects are motivated to start in one way or another, and that starting point does a lot in helping us perceive them as “real”.
When it comes to motion design for interfaces and other user experiences, it’s easy to overlook anticipation. After all, a button isn’t “real”, and unless you’re going for a skeuomorphic experience, there aren’t many existing models for how your content should move. So, how can we best harness the power of anticipation in motion design?
Video games have long integrated anticipation as a tool to keep the user grounded in a confusing, ever-changing environment. Tetris lets you know what the next brick will be so you can plan where to drop your current brick appropriately. (The Tetris model is interesting because it shows the upcoming brick in a separate area from the main screen focus. If a 2013, HTML5/CSS3/responsive version was made, I expect we’d want a ghosted image of the brick to appear at the top of the screen. I also expect that Tetris purists would hate me for that suggestion, but take comfort in knowing that I’m not very good at Tetris.) First-person shooters often have an indicator on the screen showing if you’ve been shot from the front, back, left or right to tell you in which direction your next victim might lurk. In the Flash/iPhone/Android game Jetpack Joyride, an indicator appears on the right side of the screen to let you know a missile is incoming.
Infographics have been on the rise for the last few years, and for good reason: lots of information on a single topic contained in beautiful, fun-to-look-at images. With the rise of dynamic content over the last few years, it was a logical progression for designers to start bringing those infographics to life. Google’s new How Search Works is one of the newest and most widespread examples, but Designed to Move and Dangers of Fracking are also beautifully-designed examples. The Milwaukee Police Department famously created a parallax-heavy page for their 2012 crime stats that proved single-page scrolling websites aren’t just for design firms. They’re all beautiful and engaging, but each one suffers from a degree of difficulty with anticipation.
My household recently had a large debate over websites like this, and it turned out we ultimately shared the same issue: legibility. Websites like this exist for a very good reason, which is to create an educational experience by masking it in a dynamic, fun one. I live in San Francisco and have little reason to read Milwaukee crime statistics. In fact, the chances of me stumbling across that content on my own are slim to none. But they created a visually engaging experience that was striking enough to be spread across the web, and it stuck with me so much that when I asked my boyfriend if he remembered what the URL was, he immediately knew what I was talking about. (He couldn’t remember the URL, either, but “one page police website” got us there, which is telling in its own way.) You likely wouldn’t want a law textbook laid out like this, and I’m not 100% sure I’d be comfortable with my heart surgeon learning how to crack my chest this way, but as an experience with the side benefit of educating people you might not otherwise have the opportunity to educate, it’s a great tool.
All the examples listed above are generally done really, really well. They take new technology and create valuable experiences with it. I spent more time on them than I would have in just about any other form. The issue, however, is that they’re all using motion design in a way that decreases their legibility and makes for a less linear progression than I imagine the web designers intended. Let’s start with Dangers of Fracking. It’s beautifully illustrated, and its scrolling, “animated” approach to giving you breaks between information is great for pacing users in a situation where users are ultimately pacing their own journeys based on how quickly they choose to move.
The one thing they got wrong is anticipation. As you scroll, text is introduced in boxes. In some cases, as you scroll further, that box expands with additional information – it’s a way of pacing you out and giving things to you one step at a time instead of throwing all of the type at you at once. An effective idea to be sure, but done too late. In each instance, it’s all too compelling to read the information in the box and then start scrolling, only to see once you’ve scrolled past it that it turns out that box will be expanding.
Sometimes boxes expand, sometimes they don’t. In the case above, the box doesn’t expand until it’s 32.6% from the top of the page. Why not begin to fade in the content when it’s 80% away from the top, having the entire message appear when it resides around 35-65% of the available browser height, and animate out as the user progresses to the next section? (There’s also a case to be made for not animating out, because the user has already watched a transition take place once, and if they want to move back and forth and re-read something, it may make for a more disorienting experience to constantly have to re-live a transition. It has long confounded me that Google’s The Mobile Playbook re-starts everything from one page to the next, and is particularly frustrating considering the subject matter.)
Inception Explained does a really beautiful job of using single-page scrolling to tell a story. The “animation” is entirely scroll-based, but doesn’t necessarily feel that way. Information remains on the screen long enough to be legible, information fades in and out to let you know you’re about to learn something new, and their visual design is so heavily designed that it makes a very linear path out of content that’s anything but. It’s important to remember that UX motion is just as much about how things move as it is about the method used to move them. Scrolling motion is still motion triggered by the user. Inception Explained tackles its motion from place to place with a very different approach from How Search Works, but they’re accomplishing the same things. Since How Search Works is defining the timing of its transitions rather than allowing the user to define them, it makes for a very different experience.
The final thing to remember about anticipation is that you shouldn’t overlook termination. Despite both being Google products, How Search Works and The Mobile Playbook handle termination very differently. The former leaves content right where you left it, while the latter reloads every time you navigate back and forth. I admitted earlier to being perplexed about the decisions they made to reload their content every page, and I think their newest infographic handles termination significantly better. Still, there are arguments to make for each. If the transitions in your content are simply fading in as you scroll, there’s probably not much harm in having them fade out as well. The chances of the user reading your content when it’s in the top 10% of the browser are pretty low, and removing the final traces of that content allows for more interesting things to happen in the background. If you’re using a horizontal scroll instead of a vertical one, removing that content makes even more sense. With vertical scrolling, you can still read the final few words even if 90% of the content is gone. If even a small percentage of the left or right side of a paragraph is taken out, reading that content is out of the question.
Taking elements out, as a general rule, should be a shorter and simpler transition. We’ve already seen them. The more an element moves, the more it’s given weight. Fade it quickly, get it out of the way, and open the stage to showcase your new content. Termination is equally as important as anticipation, but equal importance doesn’t have to mean equal treatment.
To sum up: Think about how you bring elements in, and think about how you’re going to get them back out. When it comes to anticipation, a little goes a long way in keeping your users oriented and engaged. In the next part of this series, I’ll address motion design for mobile and the specific challenges and benefits of integrating animation in a handheld environment.