Summary

The different types of motion can be categorized as transitions, micro interactions and animation. The aim of adding motion to your user interface can be much more than just decorative. There are functional reasons to implement motion which split out into driving focus, reducing sudden transitions, giving the user feedback when interacting with the page and keeping a users attention in areas where they are likely to disengage. 

Types of motion

• Transition: Page and section transitions

  Using an easing transition between pages can be useful to keep a user occupied and engaged during wait times. It is a subtle way to show progress while loading the next pages assets. 

• Micro Interactions

  In most cases, micro interactions are user triggered actions that provide a user with response feedback. Whether it's a changing a buttons color when clicked or a product card flipping when hovered over.

• Animation

  When it comes to animation this is mostly used to inject personality and entertain a user. With this type of motion we are aiming to evoke emotions in a user that reinforce the message of a section or brand identity. 

Use case for motion

• Leading Focus

  Carefully mapped motion can lead a users focus through a page or in the direction of what you want someone to focus on. Think of a neon sign grabbing and leading the attention, on a static page motion will draw the focus and lead in the direction. If you have something important to show make that an endpoint of motion.

• Smooth Transitions

  When moving from one page to another there is a delay in loading which you should minimize as best you can. But a way to reduce user frustration would be to smooth this delay by adding a transition effect. This allows the user to see motion and progress while waiting for their next page to load.

• Providing Feedback

  You can build in feedback responses when a user interacts with elements on your site. Feedback can come in the form of visual, auditive and in some cases haptic. when adding in motion we are focusing on visual feedback for user action.

• Entertainment 

  When you have a process that takes time to load or could be considered boring, adding in an animation could keep a user's focus while distracting them from the wait time. This type of animation is meant to delight and entertain a user.

Be careful where and when you use motion

Using motion where it doesn't belong can be detrimental to engagement and usability. When not well designed and thought out, you can end up distracting the user or guiding their focus away from your intended target. Adding large, complicated and excessive motion can cause users to disengage with the content. In the case of users with motion sensitivity it can make them unwell. Introduction motion in a text heavy space can make reading difficult.

Use motion only where it is needed and remember that subtle movement can be highly effective.

Conclusion

Motion can be implemented in an obvious or subtle way and can reinforce and promote the wanted user behavior. It can increase user engagement and enhance the usability of the site.