Why Animate?

From GIF’s to Flash to CSS v3, animation has come a long way on the web, and I have no doubt it has a long way to go. Though I’m by no means an expert, here is what I have learned about why we want animations on the web, and how we can keep ourselves from annoying users with them.

For some background, the web is understood to us through two pathways in our brain: the ventral stream and the dorsal stream. The ventral stream is used for understanding static design and content, while the dorsal stream is used for spatial awareness and animation. Because the dorsal stream happens to be relatively faster, we can reduce a user’s cognitive load by subconsciously processing some of our platform’s less important information more quickly, as well as removing change blindness by drawing users eyes to updating elements.

To expand on that a little, some of that “less important information” might include where certain elements might be hidden in your platform. For example, a user might assume a web page’s menu is kept just outside of their field of vision if it happens to slide in from off-screen, or a menu of additional options might be located “inside” the select input if the animation is anchored there. Sliding an element rather than having it simply appear is more natural, and easier to understand to the user

Besides looking good, animating change reduces the chance that your user might miss it (change blindness). This is where that dorsal stream really helps. Movement can signal to your user that something has changed on screen, without derailing their current workflow. Need an example? Think about a point total rising and falling during a video game. It’s likely a small portion of your screen, but it would be important to the player to know if that value is changing. Hence, a small animation would draw the player’s attention when that value changes without interrupting the task at hand.

So why do we want to use animation on the web? While of course, it’s much cheaper to build a static site, animation adds clear value for your client, as well as for the end user. A platform that actively keeps users interested is more valuable than a platform that reads like a newspaper or lets “the product speak for itself”. Like I pointed out before, animation the perfect way to keep users engaged with your platform while creating a smoother or more enriched experience. It makes it easier for users to discover functionality, draws attention to specific points of contact, or simply just add a sense of “delight” to your platform.

As an example of how some of these animations have improved your workflow online, think of mobile devices. Screens may “nudge” in one direction or another to indicate how to access additional content. In the popular design platform Invision, project components that can be interacted with flash blue when a user clicks the page. Animations don’t need to be complicated, they can be as simple as letting the user know that they have interacted with your platform correctly: button text changing from “Click to Pay” to “Payment Completed” for example. The goal here is to use animation to help users complete the task at hand, whether that be filling out a form, editing a photo, or completing a purchase.

So how does purely decorative animation fit into this? Personally, I go with “less is more”, A) because I’m a beginner, and B) because it’s easy to go overboard. A website filled with moving parts and flashing text can confuse users, and functionality can become impossible to discover. Because the eye is always drawn to movement first, it’s best not to keep a flashy ad on your payment page, eh? If something moves, I’m probably going to try to click on it.

Now that you’re adding animation, you get to really add some personality to your platform. Talking about what characteristics a company holds or wants to portray are excellent starting points for designing what movements your components may have. A law firm, for example, may use animations that feel “strong” or “weighty”. A spa might animate using gradients and opacity to portray a sense of calm. An educational site for children could use cartoonish movements, such as “bounce”, “squash”, or “stretch”. The motions themselves should feel natural, the way they might occur if a user was interacting with them in the real world. Something I was told when thinking about movement, is it can be nice to have a touchstone object to come back to when designing (for example, a bouncy ball or marble). Think about how this object may exist in nature, and base your movements on that.

From my experience so far, animations are fairly easy to start and are actually fun to work on. They add value to the platforms I have contributed to, and are a skill that I’m glad I will get to work on as I improve as a developer. In my follow up post (link to Adding Basic animations to react), I will outline how I’ve been working with animations so far, and hopefully, it will be helpful to you too. Hope you enjoyed learning about animations as much as I have

‍