5 Simple & Powerful Website Animation Examples
HootSuite and We Are Social co-published the Digital In 2020 report, which revealed the average internet user spends more than a quarter of their life online. That’s a world average of 6 hours and 43 minutes of internet time per day.
Considering all the time people spend online, it’s the job of marketers, web developers, designers and UX professionals to create websites that are engaging and easy to use.
For that reason, we love using micro-animations on websites to create a unique experience.
Micro-animations, also called micro-interactions, are visual changes that occur when a user mouses over, scrolls past or clicks on specific elements. These include text color changes, button animations and pop-ups.
We’re going to show how five of the top micro-animations can create a great experience, guide people deeper into your website and make users want to come back.
Using Subtle 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 and guide the user, making the website more intuitive.
What makes a bad micro-animation, then? Unpredictability and inconsistency. Humans want to be comfortable. So, a bad micro-animation is really anything that might make a user uncomfortable or uncertain. This creates a high bounce rate and low conversion rate, which are both bad for business.
If this whole discussion is a bit too much for your internal design resources, we know a team who can help you!
Best Subtle Website Animation
Here are five “good-for-business” micro-interaction examples:
- Button States: A button state is anytime a mouse interacts with a website link so that it changes. This could be the button (or text link) color changing when the mouse hovers, or it could be as wild as a confetti animation after the click. There are many great ways to give subtle feedback to a user after they have interacted with the page.
- Attention Grabbers: Users are inundated with information and need help knowing where to look. A subtle animation on your website, such as an arrow, can show the user they can use a carousel or expand hidden content. Another example of an attention grabber is an animation on a download form – it’s like waving your hand and saying, “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 on a website, the skeleton screen shows basics of the page but not details 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 by minifying cumulative layout shift.
- Hamburger Menu: With the ever-growing use of mobile devices, the hamburger menu is becoming more recognizable even on desktop applications. You can draw attention to this otherwise minimal design element by adding micro-animation when a user clicks on the hamburger to open the full menu. Bonus points: Animate the menu icon so it changes shape after opened, giving a clear indication of the opposite action the user can take.
- Mouse Tracking: Add depth and delight to the user’s interaction with your website by adding mouse-tracking micro-animations. This is any animation that follows the mouse wherever it moves across the screen. Here’s a great example from Buddha Pizza.
Want Some Simple Animation for Your Website? Reach Out!
Micro-animations can influence users to engage with your brand and make purchases. If you need help designing or developing your website with animated elements and excellent UX, reach out to us online or call (231) 922-9977 today.