Pairing motion with key user goals can make sure your designs are meaningful and don’t just add cognitive load for your users.
Here are a few goals, with examples, that your motion design can support.
1. Call Attention
Motion can bring focus to an area of the page that is relevant for the user.
Do you need a user to be aware of an error or an important step they have missed on a web form? Adding motion can draw the user’s attention to a part of the page quickly so they can take action.
This pen by Alex Mourer uses motion to give continual feedback:
2. Add Engagement
Even subtle motion can provide confirmation of a user action on an element of the page. This helps your users understand that their feedback has been processed or inputted into the system. It can also distract from background processes such as a loading time for a page transition.
A fun or playful page loading animation is an opportunity for you to expose your brand personality to your users, such as this mesmeric example from Rachel Smith:
3. Explain Spacial Relationships
Motion can provide a fluid transition between different page components. For example, on mobile, motion is often used for the detailed interactions between page transitions. Elements resize and show a dimensional relationship (appearing in front or behind other components), which gives the user visual cues as to what will happen next.
This example from Koen Vendrik demonstrates relationships perfectly:
Conclusion
Motion design is a powerful and engaging tool in the designer’s toolbox. While it may be tempting to add more motion details, consider what user goals motion design can support so your designs are built on top of meaningful decisions that won’t obstruct your users or waste their time.
