Motion design was once just a fancy addition to improve the aesthetics of your website. However, now, motion is an essential element in web design to make a user’s experience with your site more streamlined and intuitive.
Motion and animation can be helpful and communicative for UX but only if used with restraint. Motion is most appropriate as a form of subtle feedback for micro-interactions (trigger-feedback pairs) instead of a way to entertain users.
One of the significant advantages of UI motion is how easily it can attract the user’s attention; however, this can also be a drawback. Thanks to our peripheral vision, we can detect motion outside the center of our field of vision; this allows us to detect danger and protect ourselves. However, this also means that we can be easily distracted by any motion, even if it is not meaningful or relevant. Because of this, motion in user interfaces can easily distract users and become annoying. Furthermore, it can leave the user with an unenjoyable experience if it is an irrelevant motion to your task. Think of a moving advertisement; super annoying, right?
Animations can be helpful but should be used lightly and primarily as a tool for providing users with smooth feedback.
UI ANIMATION PURPOSE
When used subtly, animations can help users create mental models about how a system works to understand how to interact with it. However, animations are less essential for UX when they are just stimulations designed to fill time. Instead of using animation to entertain or delight users for a short period, utilize animations to show your user what is currently happening within the system and as signifiers for how the UI elements will act. You can also use them as spatial metaphors for the user’s location in the space.
MOTION FOR FEEDBACK
Animations prove to be extremely useful for feedback to show that the system has recognized an action the user made. A common example of this is the animation of a navigation menu sliding across the page when the hamburger menu icon is clicked on. Since our visual systems are so accustomed to processing motion, short animations ensure that users see the feedback.
Change blindness is the tendency for humans to overlook or miss things that change outside their focus. This can cause static visual feedback to be ignored. For example, people may overlook a shopping cart badge update after adding something to their cart but adding an animation increases the likelihood that the user will notice the feedback.
MOTION FOR STATE CHANGE
Motion can help indicate that an interface has been switched to a different state. Modes can be a complicated concept to communicate to your users, but animation can help. It first can make the mode change noticeable and also provides a conceptual metaphor of the transition. For example, a pencil icon morphing into a disk after it is clicked on signals to users that they have transitioned from edit to save mode.
MOTION FOR SPATIAL METAPHORS
A complex information space structure is typically challenging to communicate to users without taking up too much screen space and using too many cognitive resources. Figuring out where you are in the information hierarchy by scanning through navigation menus, tree diagrams, etc., is complex cognitive work your users want to avoid. Animation cannot be used alone to substitute for visible navigation; however, it can signal to them the direction they are moving in within a hierarchy. Animated supplemental cues make it possible to navigate through a complex information architecture easily.
MOTION FOR A SIGNIFIER
Animations guide users and help them understand how they should interact with UI elements. The direction of the motion signals the types of acceptable actions. Take a card that expands from the bottom to the top of the screen, for example. It signals that the user can close the card by pulling it down. Or, a card that comes from the left side of the screen signals that a user can close it by swiping to the left.
When UI animations are brief and subtle, they can improve the user experience. Users enjoy well-designed and placed animations, and it is now becoming a crucial element of user interfaces. They help communicate feedback, state changes, prevent disorientation and strengthen signals. As always, though, too much of a good thing can be bad, so don’t overdo your animations!
