Never stop learning
How to effectively use animation in UI design

How to effectively use animation in UI design

Share Article

Today, animation in the user interface (UI) is everywhere in the digital space. You can find it on phones, apps, games and even newer software. But what makes animation in the UI good? When does it become bad? Let’s look at the different ways animation in the UI can shape our user’s experiences.

User Interface and User Experience

A good UI can mean a good user experience (UX), but what is the difference? And how can animation help us raise the bar when it comes to UX?

The UI is what the user sees when they’re using the app or device that they’re operating. All the buttons, and how those buttons are laid out, form part of the UI. The UX, is the sum of it all, and how it shapes the experience the user has whilst interacting with the UI. A well-designed UI can lead to a good UX, but animation can help the good become great. All it takes is a little planning to ensure everything comes together nicely.

Are you there?

The subtler the animation, the better. Remember that animation in the UI is merely there to help. It should not be over stated as it could be a distraction, which in turn leads to a bad UX.

Whether it’s the way the burger menu changes, a close button when clicked, or the way the menu itself slides down – smaller, more subtle animations are always a good choice. Even if you want every button on screen to have a hover animation, as long as it’s subtle and elegant, the UX will be top notch.


Burger menu gif
Credit: Giphy

Another great example of subtle animation can be found on newer versions of Microsoft Office. As you type, each letter will slide out of the text indicator instead of just appearing as you type. It’s something small, and if you’re not looking, could easily be missed, but it makes your typing experience feel incredibly smooth. It’s something that, when you go back to older versions, you’ll notice is gone.


Word doc gif
Credit: Giphy

Give me all the animation!

As with everything in life, too much of a good thing could be bad. In this case, too much animation could lead to a bad UX. If you have too much animation on one screen, the user could get distracted. Sure, it looks cool when a button slides in, does a 360° handle bar superman and bounces into place, but imagine seeing that over and over every time you want to open a menu. Again, subtlety is key.

Another problem is timing. Play around with how long it should take for a button to fade in, or how long it should take for an icon to transition from one form to another. Too short, and it could look like a glitch or mistake, and too long will have the user second guessing if they really do want to click on that button again. Find a middle ground that suits the overall feel you’re going for.

Please sir, may I have some more?

Of course, this doesn’t mean that too much animation will always be bad. Each case is unique and depends on what you’re designing for, and the feeling you want the users to have when interacting with the UI. For example, if you’re designing something with a sci-fi feel, more animation could make it feel more futuristic. Just keep in mind that if everything on screen is moving, anything that’s not moving will stick out like C-3PO waltzing into the cantina on Tatooine, as if they do serve his kind there.


Animation gif
Credit: Giphy

I can feel it

UI animation can be powerful. It can take a bland and boring experience and make it fun and exciting in a heartbeat. But it can also be detrimental if used incorrectly. So, always take time to plan your animations as you’re designing. This way, the animations will feel natural and will become a part of everything, rather than just seem tact on at the end. The best animations are the ones that the user not only sees but feels as well.

With great power, comes great responsibility

Now that we’ve briefly gone through what makes an UI animation great, you have the power to make sure that every great UI design leads to an even greater UX.

Go forth, and animate.

Author: Ebrahim Chilwan

Share Article

Recent Posts