How To Improve UX with Fluid Animations

By João Machado·3 min read

On the modern web, having a fluid user experience may have a surprising impact on various KPIs used to track how much your target audience actually interacts with your content. Users come for your content, but they will stay and come back for the experience. In this article, we'll cover how to improve UX using CSS3's Animation modules to make your website more appealing.

What are CSS3 animations and how can I benefit from them?

The new (and still experimental, though mostly ready to use) CSS3 Animation modules define a set of properties you can add to your website's markup that allow to orchestrate the way different elements are rendered in an HTML document. By using these properties, you can move elements, hide or show them, fade them, rotate them, distort them, change their color, alas, a myriad of possibilities opens up when you think of enhancing your website's look and feel.

According to Jake Rocheleau, who studied A/B tests designed to measure the impact of using these techniques, they are powerful tools that will help your users better navigate your website, perform certain actions more intuitively and engage your audience with your content, making them more willing to explore and know more about what you may have to offer.

We all remember a few years back when website animations meant either having a blinking header on our page giving our users seizures (headphone alert!), or perhaps a marquee slider text going around and distracting our users from the most important information or even those obnoxious 3 minute-long, unskippable Adobe Flash intros to a single-page website when all you wanted was the company’s phone number.

These are obviously things we want to steer clear from. Those aren't and shouldn't be the use cases where animation is applied.

Are there any pitfalls? How can I work around them?

There are a few common-sense pitfalls and others that may not be so intuitive. Let's go over a few of them.

animation for the sake of animation - if you are just animating something because you feel having letters jump around is fun, don't do it. Animation should be purposeful and subtle.
animation should be coherent - if you choose to animate a section of your page, should you reuse that section in another page, its animation should remain the same. It will throw off the users if something that used to slide all of the sudden starts fading.
animation can't get in the way - this means it can't be obtrusive. It's not good when your users need to wait 3 seconds for an animation to finish before they can navigate to another page.
design with animation in mind - if you have your website laid out but it wasn't designed with animation in mind, you probably shouldn't animate it. It will almost definitely feel half-baked and your animation will be an afterthought, resulting in a less-than-optimal experience.
less is more - a little subtlety goes a long way. You don't need big splashes of color and movement to make an impact. Thoughtful positioning, precise and concise timing and subtle hinting will 90% of the time cover most of your needs.
performance matters - if all the animation you orchestrate, no matter how beautiful and subtle and intuitive it may be, makes your website stutter at each movement of the mouse, it's not helping you or your users. You probably need to tone it down.

That being said, to workaround these issues, more than anything, you need a plan. You need to consider which actions and scenarios your target audience will be presented with. How can you design for those specifications? How can animation help? Does it help? Should it pop or should it slide?

These aren't simple questions. Hopefully there are many resources out there that can get you going, so read up on them. Of course, if you want to hire some help, you can also drop us a message!

Simple use cases

Conclusion

There are a lot of options worth exploring when considering designing purposeful animations to improve your website's user experience. Hopefully this article will spark your curiosity and point you in the right direction.

Return to Blog