How to delight your users with subtle animation

Happy Thanksgiving to all our American readers!

Animation is nothing new in digital interfaces. They have had an interesting history of rising, falling and now rising again in popularity. Subtle animations add personality and empathy into an otherwise dull interface. They make experiences fun, delightful and memorable.

Animation in web design has been around for a long while. They first became popular thanks to the .gif format, and later, .swf. However, with a lot of designs not factoring in usability, animation soon became associated with poor UX.

When Flash was no longer cool and HTML5 became the go-to technology, it was CSS3 that picked up the animation baton; specifically CSS transitions and CSS animations. Simpler implementation and smoother performance than even JavaScript made CSS the ideal tool, and designers have been experimenting with animation in UI ever since.

Adding personality with animation

Having your navigation fade in on load provides for a very nice touch; it shows off that your website is elegant; that’s personality. When you use a taxi app and provide a big tip, there is confetti falling down the screen; that’s fun, quirky and unexpected; that’s personality. Small things like that allow for your visitor to make a personal connection with you. 

Optimo’s hats do a pretty nice transition on hover, they tip themselves by way of introduction and make room for the hat’s name. It’s beyond subtle, but above all it is a nice touch, this provides a sense of personality, a sense of delight.

Creating an emotional connection with animation

When there is a personal connection, there is an emotional connection. I am now able to like your company and brand; we are now in a relationship because those subtle animations let me see the people — the humans — behind the computer/​the machine/​the website. These little touches make a company culture shine through. It’s not that hard to see the people behind the company are friendly and probably easy going; it’s therefore easy to connect with them on a personal and emotional level.

Exciting interest with animation

Frankly, quirky animations are fun; they make your website interesting! What’s more, people love it, they will enjoy it so much they will share it with their friends — whether in conversation or a tweet — and they will remember you.

Soleil Noir’s Dream On website is something else. Everything moves, wiggles and what not; but it works very well for the website as it’s fun and supposed to be interesting. Everything is ever so slightly animated; this makes for an instant positive impression.

Conclusion

Not everything is without its downside. There is a fine line between subtle and too much. Animation can also be annoying for users, especially when an animation is placed on every section of a long single page. I had to wait for content once because I scrolled to the bottom of a page and got ahead of the animation which loaded the sections. That’s not good, it disturbs my workflow, it distracts me, it makes me angry.

It might even be inappropriate for some websites to have these animations; when you are a non-profit who wants to be taken seriously, or perhaps a government taxation website, it’s inappropriate for you to have confetti raining down your page when a user logs in or click on a ​“pay my income tax” button. This could harm your image, making people distrust you. Make sure your animations, whatever they may be, are appropriate for your audience.