[ NEWS ]

Motion can often be an undervalued and under-appreciated component in web design. An afterthought. A lot of the time, developers will say “oh, that’ll be nice to have once I’m done building the site” or “I’ll get to it if I have the time,” but it’s not a necessity nor a priority. However, motion shouldn’t be an afterthought or something that you just hope you get to. It should be an integral part of the design process and something that is thought about even at the earliest stages of the web design process. Motion should be considered as part of the brand. Good motion design can embolden and strengthen a user’s experience with a brand.

There are four ways motion design enhances usability: expectation, continuity, narrative, and relationship.

With expectation, a designer needs to understand what a user sees and how they think the object will behave. A good example is the hamburger menu. If a user clicks on a hamburger menu, they expect it to open up some sort of navigation. If it doesn’t, the usability of the site will be diminished.

Continuity helps with keeping the flow of the site cohesive just as much as repeated design elements. You wouldn’t change the font on every page of the site, just like you wouldn’t change the easing of the animations from two seconds to three hundred milliseconds for every other div. This helps keep the experience cohesive.

With narrative, it’s just the same as in literature. There are a series of events that lead to a specific conclusion–without the plot twists. It’s guiding a user through the story of your website or app with a specific framework to reach a conclusion.

And finally, using relationships is a great way to show information hierarchy, the spatial connection between screens and elements, and aid in a user’s decision-making. By showing that two elements are related through motion, it’s easy to tell what action will get which reaction.

Realtime and non-realtime interactions also add to usability. Realtime interactions are defined as something that happens in direct response to something the user does. If a user swipes through a slideshow or moves their mouse over a button that has a hover effect, that is a realtime interaction and helps the user move through a site or app fluidly. A non-realtime interaction is when a user clicks on a card or slide and the card flips over and loads information on a short delay. This happened after something the user did and was not a direct manipulation of the element, like a swipe effect would be. This helps build a relationship or rapport with the user and lets them feel in control of their interaction with the website or app.

Motion can guide a user through a brand’s story, bring attention to a call to action, and tie a site together through more than just graphics. Through the use of realtime and non-realtime interactions, the four pillars of usability above and the 12 principles of motion design, a site or app can actually have improved usability with the right amount of motion design.

If you want to learn more about UX motion design specifically, here are some articles written a little more eloquently:

Creating Usability with Motion Design
Jedi Principles of UI Animation — really great read because it’s compared entirely to Star Wars
Principles of UX Choreography