UI / UX Design

The Future of Motion in Digital Experiences

November 18, 2016

Reality is dynamic. When we interact with the world, it moves fluidly and changes seamlessly in response. Can the same be true of experiences in the digital world?

In the history of digital user experiences, there has been a trend toward staticity. Interfaces have oftentimes been unmoving.

But the future of motion is bright. With better tools, frameworks, languages, and browsers supporting motion-rich experiences, we are at the beginning of a movement.

As attention spans continue to diminish and experiences continue to speed up, motion will be the element that satisfies the subconscious expectations of users:

  1. Motion generates engagement. Motion makes interactions exciting and meaningful, drawing in modern users.
  2. Motion enhances usability. It guides users as they transition through the different stages of using a product.
  3. Motion brings digital experiences to life. By incorporating motion, designers create interfaces that teem with energy and experiences that brim with emotion. Motion is an essential storytelling vehicle.

What is Motion?

Motion, like video, makes an interface more dynamic. But there’s a tendency to lump motion and video into the same category.

The future of digital experiences will have more motion – and that doesn’t just mean more video. Video plays an essential role in UX – we discuss the value of video at length in The 7 Ingredients of a High-End Experience.

differences between motion and video

Video has an essential place in website and application design. Video aids in breaking down complex ideas, explaining them in an easy to understand way. It can be used to educate users about a company’s value proposition with convincing visuals.

Motion goes beyond video. Rather than being confined to one area of the page, it can be everywhere on the page. Motion often involves input from the user and it necessitates interactivity. Unlike video, it doesn’t have a beginning and an end. If used effectively, in addition to video and the other ingredients of a high-end experience, motion can be what differentiates your product from the competition.

Why Motion Matters

Motion offers creative solutions to age-old design challenges, such as how to help users navigate content intuitively.

Consider animated grid layouts. The value they provide, in addition to looking and feeling more dynamic, is the feedback they provide to users.

animated grid layout example

Motion can take a traditional convention – like a grid layout – and not only make it look cooler and feel better, but provide two-way communication and feedback.

Another standard element is a search box. To enhance usability, how about implementing a morphing search instead of using a traditional search box? A morphing search, when clicked, expands to a new screen state.

morphing search web design

This helps users feel like they are still within search, but it provides a more accessible way of searching for information in context. They can still conduct a manual search or they can click on common categories to narrow the results. Due to motion, the transition between screen states is seamless.

The Key Functions of Motion Design

Motion design has many different applications. But in our experience, the three most common functions of motion are: Microinteractions, Contextual Transitions, and Dynamic Content.

Microinteractions

In Microinteractions: Designing with Detail, Dan Saffer provides a precise definition of the subject: “Microinteractions are contained product moments that revolve around a single use case—they have one main task. Every time you change a setting, sync your data or devices, set an alarm, pick a password, log in, set a status message, or favorite or ‘like’ something, you are engaging with a microinteraction.”

From “favoriting” on Twitter to “liking” on Facebook, from pausing a Dropbox sync to clicking a generic CTA, almost every user input involves a microinteraction of some kind.

There are four stages to a microinteraction, as illustrated in the example below – Liking a Tweet in Twitter:

Liking-a-Tweet microinteraction

Contextual Transitions

Transitions should indicate what screen state or stage of the experience the user is transitioning from. If contextual transitions are used effectively, the user will transition to a new screen state with a clear understanding of how the new screen state is an extension of the page they just came from.

An example includes morphing buttons. In the example below, a Login modal is revealed when the user clicks the “Login” button. The button morphs after the user clicks. In less than a second, motion enables a fluid transition between screen states, guiding the user to the next step – signing in.

In this example, the user would click the “Watch the Trailer” button. In less than a second, the button morphs into a new window that plays the trailer.

morphing button

Dynamic Content

Video, copy, and infographics serve to tell a story. The content you include – enhanced by motion – draws users into your experience. Content, in its many forms, is a key factor for determining user engagement.

Scrolling is one means of drawing the user into an experience. We argue that scrolling is more efficient, faster, and easier than paging. One way to encourage scrolling is through motion.

The Aquatilis Expedition Website below shows how motion encourages scrolling and user engagement. The website is billed as “an epic underwater journey through the unknown, set to explore the world’s most extraordinary creatures.” Motion acts as a storytelling vehicle, bringing an otherwise static experience to life.

Aquatilis Expedition Website

 

Motion and the User Experience

We anticipate that the future of digital experiences will involve even more motion. There’s a trend already, and it’s working. Experiences that go above and beyond what is expected utilize this valuable design asset more often.

By exploring microinteractions, contextual transitions, and dynamic content, you can: generate engagement, enhance usability, and bring your experience to life.


Interested in reading more? Check out our white paper of the same name, The Future of Motion in Digital Experiences.

FutureofMotion_Whitepaper Cover

Johnny Rodriguez

Director of Strategic Innovation

Trilingual hispanic, with interactive design & development skills. When not developing slick websites or interactive videos, Johnny spends his time producing music, writing songs, rock climbing, or beatboxing. His beautiful wife, daughter, and shnorkie puppy give him the fuel he needs to wake up in the morning and think of FRESH ideas.

You might also like...

18

Jun.

Autocomplete: Varieties, Benefits & UX Best Practices

For just about everything besides scenic drives, people prefer shortcuts. And if a shortcut not only gets you there quicker but also takes you to a better destination, now that’s something! This is what autocomplete does. By giving users the option of completing words and forms based on what they’ve typed before, it shortcuts their … Continued

7

Jun.

Strategies for Onboarding and Engagement: Part 1

Similar to onboarding an employee at a new job – where they learn the ropes of their company’s procedures and expectations – digital onboarding is about helping a new user learn the ropes of an application. Onboarding is a broad topic that covers a variety of approaches. It’s important to understand that whatever your goal … Continued

23

Jan.

A Designer’s Perspective: Fostering Good Communication Between Design and Development

Different teams will have different ideas and perspectives of what the final product should be – designers and developers often have different thoughts on the best direction forward. Each group also has a different set of skills and capabilities that are important to creating high-quality products. In the end, pulling the best ideas together and … Continued