How can we enhance User Experience decisions based on motion and Meaningful Transitions?

Motion as perceived by the human eye.

What is motion?

Motion is the process of moving, changing place or even changing position. There are many factors involved when something moves. Something moving at a constant speed in a straight line is one of the simplest cases of motion, changing speeds and changing directions are quite common aspects of motion.

How do we perceive motion?

The motion perception principle is a theory or computation that relates visual stimuli or visual scenes that contain motion-related actions for observers. Let’s have a look at the following video.

Motion perception serves lots of helpful functions:

• Simply detecting that something is moving, draws your attention to it.
• Segmentation of foreground from background. Compute the 3D shape of an object.
• Compute the distance to various objects in the scene and estimate the direction in which you are heading to the scene. For example, hold up two fingers (one on each hand) at different distances, and move your head slowly from side to side while fixating an object on a far wall.
• Things further away slide across the retina more slowly.
• When there is a strong motion on your retina, especially in peripheral regions, you can misattribute that motion and perceive yourself as moving.

Motion brings the digital environment to life

People are hardwired to perceive motion and movement, from their basic survival instincts to casual and fun activities motion is present in most of our daily activities.

Digital products are a big part of our daily life, tablets, laptops, and smartphones are cold and lifeless. Through movement, this cold medium can be transformed, out of its cold motionless state into a dynamic and always changing tech.

Motion and meaningful transitions have the ability to tell a story to the user, they build a narrative that provides context by linking, swapping or changing elements helping us understand the structure and visual hierarchy of a digital product.

Planned and structured motion can improve UX in different ways:

Status changes:

Animation creates a feedback loop, reducing cognitive load and process time by the user.

Continuous feedback to the user through the login process.

User guidance:

The next step in the user journey can be easily and dynamically displayed for immediate interaction.

The next CTA is clearly visible and easy to follow.

Focus attention:

Elements and relevant user information can be highlighted through subtle and always well-planned animations.

Attention can be focused on specific or relevant information.

Clarify elements relationships:

How elements work together and their visual hierarchy can be made clear and easy to understand.

Elements are connected in both shape and function.

Meaningful transitions and well-thought motion can transform a user interface and provide improved UX. By researching, understanding, and testing motion, the experience of a digital product can be drastically improved.

The 12 principles of UX in motion

There are a handful of articles and points of view on what is compelling when we talk about meaningful transitions and motion in UX, my firm belief is that (12 principles of UX in motion by Issara Willenskomer), cover the basics and are a good start point when thinking to improve the user experience of a digital product supported in motion.

The 12 principles of UX in motion.

Increase user engagement using motion to deliver a captivating experience.

A truly captivating and memorable experience can be achieved through motion. As designers, we always put part of ourselves in our work, with the appropriate research and testing your motion-based design will combine a unique appeal that people will love and remember. By implanting subtle animations and meaningful transitions into your design, you can make the interaction with your users come alive and make them feel like they are interacting with a product that has a personality.

Listen, everything sounds great but can motion really help to the UX of my product?

To answer this question we have to understand that animation is a useful complement to content, and takes on a backup role in making UX clear and intuitive. A product’s functionality, layout, and navigation should be designed always thinking on the user first, animation should fill in the gaps. CSS3 has made basic animations very accessible in both time and budget, keeping that in mind, I can make the case that this should be an easy conversation to have with your development team.

Think like your user

• What’s most important here?”
• “How do I know what to do next?”
• “How do I know I have completed my task?”

These are fair questions at any step of the user journey navigating your product, now think how you can make use of motion to complement, guide and assist the user tasks through these critical scenarios.

When you create space and time for animation on your development schedule, you are not only investing in optimising your product but also creating many UX options that otherwise wouldn’t be available, this way you can achieve more control over the UX as a whole. Finally here are some ideas to keep in mind:

Key Ideas to check on the state of your product

1. Loading doesn’t have to be boring. Just about any site can make use of the skeleton screen or subtle animation when loading it’s content to prevent users from getting bored and clicking away.
2. Use motion to guide (and not distract) the user.
3. Use meaningful transitions to move to a different part of the screen or reveal a new content. This clarifies spaces, their relations and where the user started and ended on the screen.
4. Use motion to confirm clicks, purchases, and signups from your users. This creates a feedback loop where the user is engaged and shows the action was completed.