“Flair” (stylishness and originality) is exciting.

But it doesn’t always make for good usability. As Steve Jobs put it, “It’s not just about what [a design] looks and feels like. Design is how it works.”

If you’re looking to add both usability and flair, animate your experience with motion to make a seamless experience for your users.

As we’ve written in a separate white paper, we expect that motion will play a role in the future of digital experiences. Traditionally, motion and animation were a “nice to have” add on. Flash was decorative. But it didn’t add much in the way of usability.

As technology increases in complexity and innovation, focusing on usability becomes even more important. Motion and animation can add to your usability, but we recommend using it strategically.

Are Motion and Video the Same?

Motion, like video, makes an interface more alive. But there’s a tendency to lump motion and video into the same category. This diminishes motion’s unique and valuable role.

The key differences are:

• Video is typically fixed. Motion is dynamic.
• Video stays in one place. Motion can span the entire page, commanding horizontal and vertical real estate.
• Video stays in a box. Motion is scalable. It could be as small as a hover interaction or as large as a massive page morph.
• Video asks for less interaction from the user. Motion is inherently engaging and interactive.
• Video is linear, with a clear start and finish. Motion is fluid and non-linear.

Now that we know the difference, how does this relate to usability?

1. Motion’s dynamic nature is engaging. It’s not just decorative. Rather than looking at it with a passive glance, it will immerse your users in the experience. This leads to fluidity, continuity, and comprehension.
2. Motion is a design tool. It’s not just about the look and feel. Motion can actually make the experience of using your product better and more intuitive.

How Does Motion Impact Usability?

Motion looks good. It feels good. But what does it actually do? Why should you incorporate into the digital experiences you create?

Motion eases navigation. It allows users to navigate a website or application without friction.

Animated grid layouts are one example. When the user hovers over a tile, they are given visual feedback. A subtle hint of motion creates communication between the design and the user. This impacts cognitive usability.

A morphing search is another example. When the user clicks the search field, they’re provided with helpful filters to customize their search. If the user still wants to type in a query, that traditional method is still available.

Motion Highlights Interaction. Microinteractions are a key example. They’re another means of providing two-way communication and feedback to the user.

Microinteractions often happens in the blink of an eye. A heart changes color in Twitter to let the user know it was clicked. A modal pops up to give a Facebook user the option to “like” a post. These split-second moments let the user know they are interacting with the interface.

Contextual Transitions Help Users Transition with Clarity. Smashing Magazine has an informative article illustrating a variety of examples of contextual transitions. Essentially, you want to avoid your users “losing context.” Scrolling, toggling, and collapsing can work, so long as the user doesn’t lose awareness of context. If they do, it can “break” the experience – a major detriment to usability.

That’s where contextual transitions come in. With a bit of animation, the user can maintain their cognitive continuity. They remain immersed in the experience.

Design is “How It Works”

Look and feel are important – after all, powerful imagery drives the user experience and color matters.

In his article In Defense of Eye Candy, Stephen Anderson references a study illustrating the importance of aesthetics:

“Researchers in Japan set up two ATMs, ‘identical in function, the number of buttons, and how they worked.’ The only difference was that one machine’s buttons and screens were arranged more attractively than the other. In both Japan and Israel (where this study was repeated) researchers observed that subjects encountered fewer difficulties with the more attractive machine. The attractive machine actually worked better.”

We’re not saying that motion shouldn’t be used as flair. It’s an effective tool for catching your user’s eye and drawing them into the experience.

But if you expand your understanding of motion to encompass both form and function, you will have a competitive advantage. Using motion as a tool to increase the usability of your experience will be even more effective.