10 Steps to Improve UX by Using Simple UI Animations

June 20, 2014
Posted in Design, UX
June 20, 2014 Daniel Burns

Animations on the Internet have come a long way. Instead of the in-your-face, gratuitous sort, smart designers and developers have opted for a more subtle approach to animation.

Subtle animations enhance user experience on the subconscious level. It’s less gimmicky and less “see what I can do” and more intuitive and focused on the user. Introducing simple animations on your site will undoubtedly improve user experience.

Why Animate?

I know that animations carry a nasty reputation that’s two-fold. Animations are difficult to do, and they’re difficult to do correctly, right? Well, not exactly. Although animations do require skill, they are not as difficult to make as they were before. Sticking to certain guidelines, like the ones I share in this article, will help you create animations that work effectively within the constructs of your design.

Animation has greatly benefited from the CSS3 evolution. You don’t need to worry about learning Javascript in order to create beautiful animations. These days, having a comfortable competency in CSS will afford you the ability to animate easily and successfully. And, it doesn’t hurt that there’s a huge community of front end coders who willingly share their codes with everyone.

Think of animation as another opportunity to communicate with your visitors. Let’s look at a few ways that animation can enhance this communication.

1. Provides Guidance

When visitors come to your site, they bring preconceived notions of how a website should act. For example, experience has trained us to look at the top right for the search bar.

If your design is less familiar, you need to add prompts to guide the visitor along. I’ve noticed a trend recently where designers use animated navigation tools to gently nudge the visitor in the right direction. It’s not a jarring, big, red arrow that shouts, “click here!” Instead, it’s a softly blinking animation that catches the eye, such as this:

Or this:

2. To Inform

Guidance and information go hand-in-hand. You can use animation to guide users, but you also need animation to inform them when something is needed, or something isn’t right.

You may be aware of the infamous WordPress Login Shake. Although it’s done with Javascript, you can do a similar animation with CSS3. This type of animation automatically arrests attention and notifies the user that something’s wrong.

A popular use of CSS animation is with responsive hover descriptions, like this one:

A good practice for UI is to implement a loading animation, like this:

Remember, the end goal of animation is to communicate with the user. Not all communication is textual, much of it is through professional web design. Animation can be a helpful buddy that informs your users and guides them through your website.

3. For Delight

Let’s face it, sometimes animation is just there to be cute. And there’s nothing wrong with that–provided you don’t get carried away. Less is more is most applicable with web animation. If you have too many moving parts, it will distract the viewer and cheapen the experience.

Although animations can be eye candy, they should also contribute to your overall web design. Take a look at these examples:

Here, animation can be a part of your logo.

Or, you can animate your text. I’d personally go for colors with less contrast, but a more subdued animation.

You can also animate your social media icons upon hover…

…Or click.

Don’t be afraid to include whimsy in your design. Web design shouldn’t be so serious. It should be playful and imaginative. Afterall, I’m not visiting your site for a root canal–I’m coming to be entertained and informed.

10 Simple Animations that Improve UX and Why

Let’s take a look at some simple animations you can incorporate into your design right now that will positively affect user experience.

1. Hover

1

view demo | download the source file

Hover is a delightful animation choice. Users are often likely to hover over images that interest them. Capitalize on this by providing an animation that gives more information, such as a blog link or an add to cart button.

2. Shake for empty fields

2

view demo | download the source file

Animate.css allows you to gently inspire action. It goes from the subtle fade, to the definite attention-grabbing wobble. This type of animation suite is best used sparingly, and only when you need immediate attention. It shouldn’t go unchecked in the background, because it can be too distracting.

3. Toggle

3

view demo | download the source file
Allow your visitors to personalize their experience on your website with toggle. This animation enhances usability on web forms, and is especially delightful on mobile designs.

4. Flat Menu

4

view demo | download the source file
The old faithful drop down menu gets a new lease on life with this CSS animation. This navigation animation shows you how quick and seamless CSS3 can be.

5. Animated buttons

5

view demo | download the source file
Activate subtle animations on these buttons during hover. Some buttons provide additional information and calls-to-action. This is especially useful for providing extra encouragement to action.

6. Thumbnail grids

6

view demo | download the source file
Use this animation suite as a delightful transition. Transitions such as Rotate Scale and Bring Back can surprise visitors with a soft but whimsical animation.

7. Timed notifications

7

view demo | download the source file
This animation can confirm information for your users, such as “saved settings” or “message sent.” Use timed notifications as a way to communicate with your users, without them having to guess or double check.

8. Google Play Store Navigation

8

view demo | download the source file
If you are a fan of the Google Play store navigation, you should check out this pen. It provides a simple animation for menu items that feel responsive and intuitive.

9. Animated checkboxes

9

view demo | download the source file
Use CSS3 to made checkbox style animations. Most of these styles provide a hover over effect that increases the likelihood of a click.

10. Hint animation

10

view demo | download the source file
No Javascript here. Use these hover hints over text (or any other object, like images) to provide additional information. The animation is very subtle, but you can turn off animation if you’d like.

Best Practices

Animations are a wonderful way to infuse personality and helpfulness into your web design. However, there are a few best practices you should strive to keep in your animation implementation.

1. Keep It Simple

Nothing’s worse than a page full of animations. Your eyes get confused and don’t know where to focus. Animations should add but never distract.

2. Keep it Sensible

Animations must make sense. With the exception of an animated logo, every animation on your website should serve a purpose. Even if it’s only there for aesthetic purposes, the animation should blend into the the feel and design of your site, and not be a random after-thought.

3. Keep it Short

A protracted animation is not on anyone’s agenda. The most effective animation are often the shortest ones because they attract attention but don’t annoy users by lasting too long.

Keep these practices in mind when you start animating. And do come back and share your animations here. I’d love to check them out.

Which of the above animations do you like the best?

Contact

Get In Touch With Us

See how your business can benefit with DBurns.

Los Angeles

555 West 5th Street
34th Floor
Los Angeles, CA 90013

Santa Monica

520 Broadway
Second Floor
Santa Monica, CA 90401

Boulder

2755 Canyon Blvd
1st Floor
Boulder, CO 80302

© 2020 DBurns Design

Contact