UX Motion Design, Part 1: Why?

Welcome! This is part one in an ongoing series about how to integrate motion design into the user experience. The introduction is located here.

Remember Flash intros? (I write that sentence optimistically as if they’re really a thing of the past; I recognize that even in 2013 we still see too many of them.) The worst, right? But they did one very important thing: they let the user know something was happening. Flash became popular before broadband connections were considered standard. This led to famously long load times. As a result, loading animations became standard – if that bar is progressing, you know something’s happening. If a user doesn’t see something change, they’re going to assume that their input hasn’t been recognized or that something’s wrong. As soon as a user is confused, what we know about their behavior starts to unravel. They might try reloading. They might re-click (or in the mobile space they might re-tap, re-swipe, and so on). They might think something’s wrong with their device. Or they might decide that something’s wrong with your website and abandon the process entirely. If you’re delivering content and you can’t reassure the user that content is in fact on its way, they’re likely gone.

Users need to be rewarded, and they need to be reassured. On the web, we can generally be confident that we know a few things about how the user is accessing content, but with an ever-increasing number of mobile users, the landscape is changing a bit. Karen McGrane summed up the current state of affairs in her book Content Strategy for Mobile:

With a desktop machine, we can assume the user has a monitor, and we can know with almost total certainty that the monitor has a resolution of 1024×768 pixels or higher. We can assume the user has a pointer, controlled by an external pointing device like a mouse or a trackpad. We can probably assume that the user has a broadband connection.

When we say someone is on mobile, all we know is they’re using a device that… not a desktop. We know very little about what they see and how they interact.

We might not know what they see, but we can take steps to make sure the user knows that we’ve seen their input and are working on something. The animation below is an animated UI demo I created for a client a couple of years ago. The app was simple: You and your friends answer questions, and you receive points based on how you answer. (Before you go searching for it, full disclosure: QuizTime is a fake name for the app, as the company would later decide to take their product in a completely different direction.) We wanted the app to have personality but the client wanted to pursue a clean aesthetic, since they’d have no control over how complex the photos were that users chose as backgrounds for their quizzes. About 10 seconds in, you can see how we chose to inject personality and create visual connections for the user by using motion.

When the user taps their response, four things happen:

  1. The answer turns green and a green dot appears over its radio button
  2. The green dot sends your points up to the top bar (where your overall points are tracked), increasing the number accordingly
  3. All answers show the percentage of users who have previously selected them
  4. Arrows appear next to the question, directing you to move forward

The user answered the question and immediately received feedback. And they were rewarded with all of that step-by-step information (here’s your score, here’s your new total, here’s how other people answered, here’s how to move on when you’re ready) in only 3.5 seconds. Motion design allows us to tell a story while providing visual guidance.

Giving users visual cues in an interface isn’t anything new. We use rollover states for our buttons to let the user know this is something that can be clicked. We provide linked and unlinked page numbers at the bottom of multi-page articles and forms to let users know where they are in the process. With the resources we have available to us as designers and developers – HTML5, CSS3, and well-developed mobile toolkits – there’s now one more opportunity to subtly teach the user where to go and how to get there.

Motion design allows for visual simplicity and opens up screen real estate for legibility. Animation can tell a user what to do or reassure them that they’ve done the right thing, or put them on the correct path if they’ve strayed from what we need them to do. It can move a user in the direction we want or encourage them to explore. Furthermore, it’s universal – imagine how much easier things are if you’re developing an app that needs to have international appeal and you don’t have to translate written instructions. What icons have done to cross barriers in visual design, motion design can do for navigation and interaction.

Now that we’ve worked on why, we’ll talk about how! The next post in this series is about anticipation.

One thought on “UX Motion Design, Part 1: Why?

  1. 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 *