We like to move it, move it, but when do you know how much movement (aka animation) is too much for your brand’s website? The use of animation to enhance user experience is a clever tactic to employ, but functional design implies that it should be exactly that – functional. By ensuring your animation is logical, informative, and purposeful, you can use animation to further brand awareness, assist with user experience, and importantly, support your brand’s narrative.
Many designers will use animation to reduce cognitive load. Cognitive load is the effort that your working memory requires to consciously process information. Our brains are wired to sense movement for protective purposes, but in an overly saturated digital landscape, sometimes mo’ movement can mean mo’ problems. Here are a few good reasons to employ animation onto a webpage:
Inform Orientation: When a user jumps from section to section on a page, anchors help show them where they are in relation to where they once were. To signal that the movement was actually made and that the user interface has shifted, animation can help ease them into the adjustment. The movement should not feel jarring. Applications like Instagram allow users to swipe back and forth between pages as new content loads, but the movement makes it easy to inform the user that they have shifted their location on the page.
In the same vein, we employed animation to signal shifts throughout the various sections on our client CMT Association’s website.
Provide Instant Feedback: If a user needs to press a button to confirm, like, or buy, for example, movement can signal whether or not the action was accepted or denied. It’s a fun way to get people to click! It can also be used to drive attention to certain places on a page and promote your call-to-action.
Furthermore, animation and focus can work together to showcase when an action has happened based on a user’s touch.
Live Updates: Animation can help smooth transitions as content is being added. If you have live updates or a news feed with images that are continuously added, animation is a solid way to showcase that things are changing without driving the viewer crazy with entire pages reloading.
Errors Become Less Scary: Errors, whether technical or user, are bound to occur. But, when they do, a little animation goes a long way to provide immediate relief to what otherwise could feel like a frustrating situation. For example, a simple shake when a line item on a form was forgotten easily indicates the user of a problem, but adds an informative level of understanding on what the solution could be (filling out the line item).
Emotional Engagement: This is where things turn from black-and-white to grey. Brand perception and awareness relies on consistency. If you want to propel emotional engagement with your brand, animation can come into play (pun definitely intended!). But, you want to be careful not to go overboard and become distracting. How do you do this? Ask yourself if the animation serves an actual purpose.
Here’s a solid rule of thumb: if you are navigating a website with a lot of animation, and you find yourself flustered as to where to go next, there is too much animation. As a component of design, animation should not be thrown in at the last minute nor should it overcrowd the experience from the get-go. It should inform the functionality.
From childhood, you know that animation is eye-catching and fun. But animation is more than lighthearted and playful by nature. It is a tool that is useful, when utilized properly. The fine line between too much (crazy) and too little (boring) is one that you need to consider at every step of your brand’s journey.
If you’re ever unsure, shoot us a note – we got people who can help you get to movin’.