November 2020

3 Steps to Meaningful Motion Design

00:03:00:00

Motion is a critical component of the user experience of today’s products. For user interfaces, motion can communicate and reinforce user action, driving conversion.

However, if not carefully executed, it can undermine usability and the overall appearance, creating a bloated experience.

In this article, I will list and explain three steps to create meaningful experiences with motion design.

Add Depth with Hierarchy

In user interfaces, depth can direct users to specific elements while keeping inactive ones on-screen.

You can accomplish depth in many ways, but there are two main techniques within motion design.

  • Parallax displaces two regions of content, moving relevant content into view and irrelevant content at a slower pace. Parallax shifts users toward interactive or critical content without the need to hide less critical content.
  • Overlays simulate depth by drawing itself on top of a background, floating on top of primary content. Overlays reveal secondary content while retaining user focus.

    • These techniques preserve unity in an interface without cluttering view or distracting the user.

    Communicate with Interaction

    Interaction is imperative in communicating feedback to the user but can be complemented with static motion. These can be either real-time or static.

  • Real-time Interaction provides immediate feedback to UI manipulation, responding to user input.
  • Static Interaction typically animates after real-time interaction, communicating status from user input.

    • Layering interaction has a core role in developing the behavior or character of your UI.

    Indicate Change with Motion

    Value is a common element in modern user interfaces, in both text and graphics. As interfaces are tied closely with values, often stored in databases, they are subject to change.

  • Transitions phase in and out critical content, responding to user input or navigation.
  • Animations indicate a value change for dynamic information, often as a result of user input.

    • Indicating change conveys a dynamic relationship with the user, informing them that it is both interactive and responsive.

    Conclusion

    Motion is a powerful tool, not strictly for aesthetics, but as a channel of communication to users.

    By using these three applications of motion design, you can create meaningful experiences in even the simplest of interfaces.