We’re visually-wired creatures. We love things that move. Motion demands our attention! Our brains are hard-wired for it, like moths attracted to a bright, burning light bulb. We pay particular attention to movement because it stems from our ancestral roots of survival. Our brains evaluate our surroundings to that particular moving thing as a potential threat or not. Based on motion, we’re forced to weigh in on our situation and take some sort of action. While movement irresistibly captivates us at the instinctive level, how can we translate this instinct to better web experiences?

We are surprised and delighted when a widget smoothly slides in from the left while scrolling down a page. However, when we look at a web page without motion, we become like doughnuts, and glaze over, skimming through the site. The design may be great and up-to-date, the copy might be on literary fire, but at our psyche level, it’s easier to skip through because we’re not captivated. It doesn’t mean the site is a bad site, it’s not, but it could be enhanced to entice customers and lead them into conversions. Motion creates action. A site without any type of motion doesn’t demand our attention, nor does it make us evaluate our significance to the experience; the instinctive response isn’t there.

Add some well-planned animations to a site with a purpose, and you've just created an enticing experience for your customers that demands their attention. There is a fine line for web animations though — how much is too much? We certainly don’t want a crazy site with everything jiggling as the cursor passes by, but how can we enhance the user experience in a way that entices and engages our target audience?

It’s tempting to tell the developer to animate everything, but you must resist! Start subtle, because animations that appear natural is the goal. While there are many types of web animation styles and technologies out there, this article will focus on a general overview about interactive visual feedback animations to consider how they may enhance UX.

Visual feedback animations allow users to get a reaction based on their actions, instantly! This is the best place to start if you want to spruce up an existing site.

Use Visual Feedback Animations to Guide User Behavior

When user hovers over your call to action button, what does it do? Maybe it changes its background color, pops up, or perhaps different text slides in with more information. This feedback leads to a more identifiable and encouraging experience for your users as they are rewarded with real-time interaction. There are so many creative options you can do to grab attention with button hover states.

What if your user already submitted a form that they’re supposed to only submit once? Why not disable that button after submission? The state change from an enabled button to a disabled one could be exaggerated with animation – a color change occurs and the green button transitions to red. When the same button is hovered or clicked, the disabled button slightly shakes from left to right, not allowing the user to resubmit the form. It’s a much better solution to directly affect customer behavior as opposed to having text next to a button saying “do not submit again” when they easily still could.

Feedback Animations Must Happen Quickly

There’s an art to the speed at which animations should happen as well. According to the Nielsen Norman Group, a UX firm, a “cause-and-effect” animation must begin within 0.1 seconds of the engagement with that UI element. Any slower, and your users will feel a disconnect with the relationship between elements, and that may even cause confusion. What do we mean by a “cause-and-effect” relationship between UI elements? Let’s say you fill out a form and as you fill out fields, more fields fade in from the top and reveal themselves. This change of state shows users the additional form fields are in relation to the earlier ones they filled out, and creates more understanding to the user by guiding their behavior with the animation. You could also have fun feedback animations with SVG such as the example below (click image to open link), with the validation being in the form a snow yeti’s reactions! Possibilities are endless.

To grab attention, especially when it comes to feedback, the amount of time between the start of an animation and the end of it needs to happen quickly. An animation that takes over 500 milliseconds is generally going to be perceived as too slow, and may even make your website appear laggy with poor performance. Animations that happen at or under 100ms are generally too fast to comprehend. A sweet spot is generally for animation duration to last 300-400ms, depending on the context and movement.

Use Easing to Convey Realistic Behavior

Let’s say your user is at the bottom of a page and they want to go back to the top. If they click on a bottom corner arrow pointing up, and the page sharply jumps to the top, that type of behavior is jarring and abrupt. It’s unnatural and takes away from what could be a more pleasant experience. The timing in which movement occurs in the coding world is known as “easing.” Below shows an example of timing variations. Even though the duration times are the same, you get different animation effects with the timing.

Maybe at the beginning of an animation, the movement speeds up and then slows down – or a small bounce occurs at the end of the movement. Treating animation not as a linear or harsh movement, but one that is closer to nature — hooray physics — is the best option for best user experience because it matches our expectations of movement in the real world.

Adding interactivity to your site adds surprise and delight to your users' experience. While the art of interactive design should be one that is planned, at AVATAR we can strategically add feedback animations to different UI elements that are subtle, elegant, and have the purpose to help encourage user behavior and reward. By using the knowledge that motion is hardwired into every human brain, we can help turn that into a great user experience to make your site an unforgettable one.

Sources:
The Human Brain Hardwired for Motion
https://www.convergent.com/resources/the-human-brain-hardwired-for-motion/

Popular Web Animation Techniques
https://uxplanet.org/popular-web-animation-techniques-a6a467309028

4 Ways Animation Can Actually Improve User Experience
https://conversionxl.com/blog/animation-improve-user-experience/

Animation for Attention and Comprehension
https://www.nngroup.com/articles/animation-usability/

The Ultimate Guide to Web Animation
https://www.webdesignerdepot.com/2015/05/the-ultimate-guide-to-web-animation/