Navigation

5 Areas in Web Design Where Subtle Animations Make a Big Difference

Recently, HootSuite
and We Are Social co-published The
Digital 2019 report revealing that the
average internet user spends more than a quarter of their life online. That’s a
world average of 6 hours and 42 minutes of internet time per day, while the
average in the U.S. is slightly below 6 hours and 31 minutes.

With all the time people
spend online, it’s our job as marketers, web developers, designers and UX
professionals to create websites that are desirable and easy to use.

For that reason, we love
using micro-animation on websites to create a unique experience.

Micro-animations are things like text changes, buttons or pop-ups that occur when the user interacts with them. The user is the trigger for these.

We’re going to show how five
of the top micro-animations can create a great experience and keep your users
wanting to come back.

Using Animation on Your
Website

First, let’s talk about
what makes a good web design animation:

Good micro-animation engages
and welcomes users and, dare we say it —makes a website seem human. Unlike
other forms of animation that exist solely to entertain, micro-animations
directly engage the user; interacting with the website in an intuitive and
effective way.

What makes a bad micro-animation, then? Animations that are unpredictable and inconsistent create an unappealing place for the user to be. Humans want to be comfortable. So, a bad micro-animation is really anything that might make a user uncomfortable or uncertain, giving them cause to leave your site. Bad micro-animations create a high bounce rate and low conversion rate, which are both bad for business.

Web Design Animation
Inspiration

Here are five “good-for-business”
micro-interactions that create a great user experience and make users want to engage
and explore your site.

Button States: A button state is anytime a mouse interacts with a website link so that it changes. This could be the button (or link) color change to a different color when the mouse hovers or an underline appears to let the user know that a headline is clickable. This is a great way to give subtle feedback to a user that they have interacted with the page.

Attention Grabbers: Users are inundated with information. A subtle animation on your website such as an arrow to show the user they can scroll down the page is very helpful. Or, if a download is important for the user to see, creating a micro-animation to draw attention is a great way to “wave your hand” and say, “This is cool!”

Skeleton Screens: Luke Wroblewski first coined the term “skeleton screen” in a blog post advising that designers eschew the use of spinners (typically a graphical element that is animated rotating on its center point) in favor of visual placeholders. When a user arrives to a website, the skeleton screen shows basics of the page, but not details just yet. Just about any site can utilize a skeleton screen when loading its content to prevent users from clicking away. It also helps with site speed as well.

Navigation: Navigation micro-animations help inform users of what is possible and help them decide where they’d like to go next. The subtlety of the use of arrows in the Audi navigation is a great showcase of a micro-animation.

Input Feedback: We’ve all clicked one too many times on the “send” button. And it’s because we are unsure if the email actually sent. Input feedback provides instant and relevant confirmation about a completed action. This is used for error prevention. The user will feel more confident if you provide clear and constant input feedback.

This email notification is a common example of input feedback.

Trust Us with Your Web Design Animation

When considering how micro-animations can influence
users, you’re sure to find ways to utilize them in your website design. If you
need help designing
or developing
your website, or are interested in a UX
audit, reach out to us
today.