How to delight your users with subtle animation

Default avatar.
November 24, 2016
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.

Paula Borowska

Paula is a freelance web designer who documents her travels with photos and words. She works with small companies to help them create products that change the lives for their customers all in the hopes of gaining more customers and retaining their current ones longer.

Read Next

LimeWire Developer APIs Herald a New Era of AI Integration

Generative AI is a fascinating technology. Far from the design killer some people feared, it is an empowering and…

20 Best New Websites, March 2024

Welcome to our pick of sites for March. This month’s collection tends towards the simple and clean, which goes to show…

Exciting New Tools for Designers, March 2024

The fast-paced world of design never stops turning, and staying ahead of the curve is essential for creatives. As…

Web Tech Trends to Watch in 2024 and Beyond

It hardly seems possible given the radical transformations we’ve seen over the last few decades, but the web design…

6 Best AI Productivity Apps in 2024

There’s no escaping it: if you want to be successful, you need to be productive. The more you work, the more you…

3 Essential Design Trends, February 2024

From atypical typefaces to neutral colors to unusual user patterns, there are plenty of new website design trends to…

Surviving the Leap from College to Real-World Design

So, you’ve finished college and are ready to showcase your design skills to the world. This is a pivotal moment that…

20 Mind-Bending Illusions That Will Make You Question Reality

Mind-bending videos. Divisive Images. Eye-straining visuals. This list of optical illusions has it all. Join us as we…

15 Best New Fonts, February 2024

Welcome to February’s roundup of the best new fonts for designers. This month’s compilation includes some innovative…

The 10 Best WordPress Quiz Plugins in 2024

Whether it’s boosting your organic search visibility or collecting data for targeted email marketing campaigns, a great…

20 Best New Websites, February 2024

It’s almost Valentine’s Day, so this latest collection is a billet-doux celebrating the best of the web this month.

Everything You Need to Know About Image Formats In 2024

Always trying to walk the tightrope between image quality and file size? Looking to branch out from JPGs and PNGs this…