An introduction to motion design for UX

When I was taking print design classes a decade ago, a commonly heard refrain in critiques was about moving eyes around the page. It’s a big thing – you want to engage people as long as possible so they read your content, and if you’re really doing it right, you’re establishing a hierarchy of information. What should the reader know first? If they’re ten feet away from the poster, what are they going to learn? If they’re holding it in their hands, how does the message change? As designers, we want to give you information in a way that hooks you in, gets you interested, and educates you.

Those same principles held true when I started studying web design. Move the eyes around the page. Compel people to look here, and then here, and then here. Make sure there’s incentive to check everything out.

Mobile was a different story. You’re looking at limited screen area, very little is standardized, and we can assume people are coming to you for information first, playing second. The state of interaction changed significantly when mobile started gaining traction. Rollover states long reigned supreme for giving interactive hints to your users, and that was great, because instead of cluttering up your otherwise straight-forward beautiful design with things users might not need, you could cleverly hide them away. Pop-up hints, previews of things to come, all possible as soon as a user’s mouse moves to investigate content a little further.

In mobile space, there are no rollovers, but there are gestures. We’ve spent the last few years hearing that gestures are not only helpful, they’re the way of the future. Apple introduced the Magic Trackpad in 2010, offering desktop users some of the multi-touch capability they had been (theoretically) enjoying on their laptops and mobile devices. Hardware runs in cycles the same way software does – we become convinced that there are better ways to do something, so we see five competing solutions come on the market, and ultimately one will emerge supreme. The issue is that we begin to think there’s necessary value in gearing every solution toward the victor. Remember when Apple changed scrolling direction with the release of Lion? You’re likely used to the new method now, but well before it was even released to customers, tech blogs were flooded with speculation that Apple was trying to kill off the desktop, that they were moving everything about their OS to be in line with mobile standards. I knew how to go about switching it back to the old way well before I ever used the OS.

There are a lot of issues with moving toward a gestural interface, but in general they don’t seem to outweigh the benefits. Mobile screens are getting larger and clearer year by year, but we’re still looking at limited real estate. If your content supports it, there are a lot of great reasons to not waste screen space on navigation. You do, however, have to come up with an elegant solution that teaches your users how to use the system. Designer Max Rudberg posted his thoughts on his blog a few weeks ago (If you see a UI walkthrough, they blew it), and he makes some great points. He also provides some great visual examples of UI animation used in lieu of navigation. Luke Wroblewski also briefly addresses motion design in his book Mobile First:

Lastly, visible affordances, tips and animations can help ease the transition as well. You can start out by using the interface elements to explicitly call out where gestures are possible, then gradually reduce their presence as people become more familiar with where they can use gestures to get things done. Just be aware that when you’ve got too much help text explaining how things work, the gesture-based interactions in your app might not be as natural as you might think.

Motion design – be it for web, mobile, or responsive design that manages to satisfy all platforms – is important in more than just teaching people how to play and interact. Flash became so popular in the early-to-mid-2000s for a lot of reasons, and its animation capabilities were right at the top of that list. We could move one step beyond basic layout principles and make the things you need to see literally jump out at you. On an otherwise static canvas, your eye is going to go directly to whatever’s moving. There was a period of time in our web design history where we saw truly, truly awful solutions, but they came out of somewhere earnest – remember <blink> and <marquee>? They were early stabs at using motion design to control the way users receive information. They were awful, but they were effective. (Anyone learning how to design in the late 90s that tells you they never threw an animated gif inside of a marquee tag is a liar and shouldn’t be trusted.)

There’s no denying it, there’s a lot of bad Flash out there: the irrelevant Hollywood blockbuster-style intro, the complex, drawn-out transfomrations triggered by a simple click of a button, the noise and the drama. It might make the designer feel good, but it sure as heck isn’t making the user’s experience better. True, there is a time and a place for a long Flash intro movie and for complex interactive interfaces. Generally, however, web site visitors are looking for some information and more often that super-cool Flash movie stands between them and their goal, instead of helping them reach it.

Want to make a guess at what year that was written? You’d have to look well before Steve Jobs wrote his letter about why Flash had no place on the iPhone, well before Adobe acquired Macromedia. Michelangelo Capraro and Duncan McAlester had the right idea 11 years ago in their book Skip Intro – technology is great and it’s good to know we can do things, but it is all too compelling to forget whether or not we should. (Also, you can just pry my worn copy of this book out of my cold, dead hands. It remains one of my favorite design books to this day.)

Good motion design can be center stage or it can be nearly transparent. There are great arguments for both. Regardless of which method you choose, motion design is necessary to reassure your users that they’re accomplishing a task. Users need to know that something is happening, otherwise they’re prone to be confused, re-click (or drag, or swipe), or abandon the process entirely. Instapaper fades out your previous content and briefly shows both pages as the new content fades in, iBooks falls in line with Apple’s traditionally skeuomorphic approach by physically showing a page turning.

photo

Whatever your chosen approach, it’s more important than ever to keep your users aware that things are happening. If a website isn’t loading quickly enough, people will check the loading indicator in their browser. It’s why we came up with Flash intros in the first place – make something happen while all of that content is loading in the background. Thankfully we’re seeing a move away from such things now that there’s a reasonable expectation that users have a monitor with decent resolution and a high speed internet connection, but motion is still important. The uncertainty we see in mobile design is reminiscent of the uncertainty we experienced in the early 2000s – 640×480 or 1024×768? Netscape or Internet Explorer or Firefox? We’ve just transferred those concerns over to iOS, Android, Windows or Blackberry.

Over the next couple of weeks, I’ll be showcasing examples of great motion design in interfaces for mobile and web, as well as providing guidance on sequencing, timing, and information hierarchy. I’ll introduce as much technical information as I can, though I’ll be writing from my experiences as a designer and not as a programmer. (That said, if anyone out there is particularly well-versed in UX animation from the other side, I’d be happy to speak with you about your experiences.) This is not meant to be a how-to, but a theoretical guide to what’s important and why. Motion design as part of the user experience is still a little uncharted, but it’s my goal to share what I’ve learned so far with you, and hopefully I’ll gain a little from the designers around me in the meantime. Stay tuned!

2 thoughts on “An introduction to motion design for UX

  1. Pingback: UX Motion Design, Part 1: Why? | Design Words for Design Nerds

  2. Pingback: UX Motion Design, Part 2: Anticipation | Design Words for Design Nerds

Leave a Reply

Your email address will not be published. Required fields are marked *