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.
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.