First, a mouse steered a boat. Then a princess got poisoned by an apple. The next thing we knew, animation in web design was part of our everyday lives, from children’s media to insurance commercials.
Source: Wikimedia Commons
When animation first came into early websites, it elicited nothing more than an “isn’t that cute?” reaction. Beyond some mild entertainment, it was useless.
But with faster internet connections, improved bandwidth, and better browsers, animation has evolved into something so much more. What was once a decoration in the corner is now a load-bearing pillar. Today, animation serves an intrinsic role in interaction design and ignoring it will make your site design seem older than Mickey.With faster internet connections, and better browsers, animation has evolved into something so much more. Click To Tweet
In this article, we’ll talk about 8 practical uses for animation in modern web design, and some techniques for how to apply them.
1. Draw Attention
By now it’s common science that movement attracts attention. This biological mechanism from our hunting-and-gathering days doesn’t distinguish between a dangerous jungle and our computer screen.
If the majority of a website is stagnant, the eye will go to what’s moving. This can be used to influence what your user sees, or establish a visual hierarchy. Animations work well for alerting your users about:
- New notifications, messages, updates, etc.
- New features or pages
- Common pathways and “what do I do next” options
- Feedback that a command has been initiated
Animations go hand-and-hand with guided actions. It can help answer questions about where to go and what to do, before needing to ask.If a website is stagnant, the eye will go to what’s moving. Use this to influence what your user sees. Click To Tweet
Sara Vieira of Web Designer Depot lists her 8 favorite CSS3 animations and their corresponding code snippets. Here you’ll find templates for fades, size change, rotation, 3D shadows, swinging, borders, and more.
Let’s say that, on a mobile app, a user closes a menu and an animation slides it to the left. This signals to the user that they can reopen the menu by swiping it out from the left.
Animated visuals can teach more effectively than words or static images. They can show a connection or insinuate a function more directly.
Hover animations are perhaps the most useful for teaching. If an object “moves” when the cursor rolls over it, it’s an immediate cue that the object is interactive. This can be a subtle touch like the appearance of a color overlay, or the actual object can move or shake.Animated visuals can teach more effectively than words or static images. Click To Tweet
Hover animations are such a reliable teacher that, if users are unsure about an object’s interactivity, they will hover over it without even thinking. It’s a digital age instinct, so be sure to deliver on expectations.
See Sara Vieira’s article (mentioned above) for code examples for 8 simple effects.
3. Smooth Transitions
Transitional animations make changing screens less abrasive. Digital mediums must be as smooth as possible to mimic reality — it’s not normal if the house we’re looking at abruptly turns into a playing kitten. The jarring effects of blunt transitions can make small tears in your UX, so patch them up with animations.
Source: Ali SharafThe jarring effects of blunt transitions can make small tears in your UX, so patch them up with animations. Click To Tweet
You can even use transitional animations to showcase your identity and make your site more visually stimulating. Every opportunity to use animations pragmatically is also an opportunity to use them creatively.
To learn how to implement transitions using HTML and CSS, read Shay Howe’s code tutorial. You’ll find basic code snippets for elements changing color and shape.
4. Enhance mobile phone effects
The honest truths are sometimes the strangest: every time we play with our phones, we’re all just poking a lifeless rock. The idea that we’re actually moving icons around and switching between windows is just an illusion — an illusion created by animation.
Animation makes gesture controls seem like you’re interacting with real objects. Think of the common “ripple effect” when you tap a touch screen: not only does it give feedback that the function is activated, it also engages our imagination into thinking our smartphones are something more than machines.Animation makes gesture controls seem like you’re interacting with real objects. Think of the common “ripple effect.” Click To Tweet
These “lifelike” characteristics aren’t easy to build in code, but there’s help if you know where to look. Tom Waterhouse compiled this incredibly useful guide for Smashing Magazine that covers basic code snippets for the traditional principles of animation, such as altering speed, gravity effects, squashing, and secondary actions.
5. Loading Distraction
Loading times are a natural weakness of web design, and they’re not always avoidable. Animations can minimize their drawbacks, including abandonment, and even turn a weakness into a strength.
Source: W. Brett Wilson
While the site loads, a fun animation keeps the user entertained — or at least distracted — so they don’t mind the wait. Truly entertaining loading animations can even turn the loading experience into something delightful. An enjoyable loading animation can be remembered for longer than the site itself.An enjoyable loading animation can be remembered for longer than the site itself. Do you agree? Click To Tweet
The popularity of scrolling today would not even be possible without animation. Really, scrolling is just one giant, never-ending transition, and as we mentioned before, animations remove the jarring effects of transitioning.
When scrolls are smooth and seamless, it creates the illusion that the entire page exists somewhere behind the screen. This isn’t just a cosmetic illusion, but a functional one. Smooth scrolling improves usability by intuitively showing users how to interactive with the page.
Source: B&O Play
You can even add scroll-triggered animations to take the effect to the next level. Users are not just scrolling, they’re changing the entire look of the page. It can turn a normal page into an interactive game.
For technical advice, Simon Codrington of Sitepoint explains how to create scroll-based animations using jQuery and CSS3, including sample code snippet examples.
Technology today is such that we risk moving faster than our brains can process. Just like with visual transitions, animation can also smooth over temporal transitions.
When changes happen too fast, they run the risk of being missed, what the Nielsen Norman Group calls “change blindness.” Adding a little extra time both draws out and draws attention to any sudden changes. Minor animated effects add the extra few milliseconds our brains need to catch up.When changes happen too fast, they run the risk of being missed, what NN/g calls “change blindness.” Click To Tweet
Keep in mind this applies mostly to actions that are not initiated by the user. If the user interacts with the interface, they expect a change. But if the change is unexpected — as with a sudden new message — an animation gently notifies the user.
Nailing down the timing in code can be difficult. Luckily, W3Schools offers some handy code snippets for CSS3 to help define the animations:
- Number of repetitions
- Reverse and/or alternate cycles
- Speed curve
The page even includes exercises for practicing the code.
Lastly, animations can be used in their original childish form to entertain. It may not be an empirical choice, but are you really going argue against making users smile?
Don’t underestimate the power of delight, either. When users are happy, they’re relaxed, and when they’re relaxed, their brains work better. A user who’s having fun will actually make fewer usability mistakes than a user who’s less interested.When users are happy, they’re relaxed, and when they’re relaxed, their brains work better. Click To Tweet
An unintrusive application for animation is interactive backgrounds, where moving the cursor moves the entire image. These small trigger-effects keep users engaged with the site, giving it a game-like back-and-forth interaction.
The Future of Animation in Web Design
Animation is no longer optional. As technology continues to progress, animation will become more ingrained into the very fabric of web design. Web animation is already starting to infiltrate new, more professional industries, such as legal and medical. The increasing usage of animation is not for the same entertainment reasons that makes it popular for kids — more industries are using animation because it’s as practical as it is fun.