Enhance Your UX with Animations

January 16, 2018

User experience insights come in all shapes and sizes. Some are big, glaring discoveries. Others are small, subtle aspects of design patterns that can enhance the experience.

Animation is one such subtle feature that can make your site or application easier to use. Animations are any kind of movement on the screen. Since our eyes naturally pay attention to moving objects, they can be used to help call attention to certain elements and guide behavior.

More and more, animations are being used as a functional enhancement to the user experience. In this article, I will share some background on how they might be able to help you.

Smartphone Impact

Smartphone native apps and operating systems have had a major influence on animation usage. Users have become very familiar with real-time movement associated with an interaction.

The simple, ubiquitous act of ‘liking’ a post on Facebook offers a good example. After clicking the thumb icon on my Android app, the icon bounces and fills in blue to indicate it is active. Next, a line to leave a comment slides into view.

The icon transformation is meant to give the user clear feedback that feels realistic. The more “real” your application feels, the less likely the user will feel any confusion. Notice how the icon seems to be affected by gravity? This is no mistake.

Facebook wants to encourage comments. You signaled that this post is important to you when you engaged with the ‘like’ button, so why not encourage a comment in real-time? Doesn’t it almost feel like you should comment? Again, this is no mistake.

Avoid Pointless Usage

Many web-years ago, the industry learned that users had no patience for a Flash-based intro, regardless of how cool they were. Why would they? Users come to your site looking to accomplish a task.

Just like it was true way back when, it remains true today. Make sure your animations are not mere eye candy or embellishments. Instead, they ought to serve specific a UX purpose or they should be eliminated.

How to Get Started

Luckily, today’s web has matured light years since the days when Flash dominated the conversation. Our browsers are faster and our options are better.

Modern CSS can help bring your interactions to life and guide users along the way. There are CSS animation libraries like Animate.css you can leverage with little learning curve.

Or, you can consider using one of the new JavaScript libraries like mo.js to bring realism and motion effects to a new level. You can even creating a farting unicorn – but only if you’re able to find a user objective tied to it!

If you’d like to learn more about how subtle design patterns in user experience can make a big difference in your application or project, get in touch with us to start a conversation.

By Tony Johnson
Senior Front-end Developer

Tony has spent well over a decade building interactive applications. He collaborates in the full life cycle of projects – bringing a unique blend of technical savvy, creativity and strategic thinking to our user experience consulting services.

View Tony's Bio


Let us know your name and email address and we’ll send you our newsletter.

First Name

Last Name

Email Address



Thank you!