Take note that I'm not trying to say that all websites should have animations in them--far from it. Like most things, It Depends on your situation. But I'd like to show you some good arguments that you'd want to keep in mind when making a website. Anyway, enjoy the article!
Last week I showed you how easy it is to start adding motion and animation to your website. But why would you want to add animations in the first place? And why would you care?
Spoilers: You should care!
- "There are websites and products like Pinboard, craigslist, and reddit are extremely popular even though they don't have any animations in them."
- "All that matters is that it's functional. People don't care if it looks good or not."
Functionality is not everything
Yes! Your website / product, at the very least, should be functional. Nobody is going to care if something looks pretty but is actually unusable.
In the book called Designing for Emotion, Aarron Walter translates Maslow's model of human needs into the needs of our users:
So of course you need to address the basics first which is that your interface needs to be functional, reliable, and useful before anything else. But the book tells us that we can go even further:
What if an interface can help you complete a critical task and put a smile on your face?
This is where animation and motion comes in. They can add whimsy and delight to your users.
But you know what? Animation doesn't have to be at the very top of that pyramid. We should stop thinking about animation as just sprinkles or cherry on a sundae. Animation can be the hot fudge, the banana, and the nuts, too. (Yes, this is from The Big Short. Love that movie.)
What I'm trying to say is that animation isn't just for making your website "pretty." It's more than that.
From the book called Designing Products People Love, Scott Hurff explains why animation is not just about cuteness:
Because motion is more than cute; it’s functional. It accounts for the passage of time, and helps your customer follow what happens after they take an action. Even better, you communicate in a visual way how they got from point A to point B.
Surprise! Animation is actually useful.
- It's useful for communicating your personality and brand.
- It's useful for adding delight to your product.
- It's useful for communicating states. Is the server "thinking" or are we waiting for data to load? Use a loading animation. Did we insert a new item in the list? Show the rest of the items move to make space.
As Pasquale D'Silva says in his blog, animations "can help to provide context. It helps brains understand how the information flows."
Let me show you a few examples:
Twitter adds a bit of their personality to their tweets through animations. "Liking" or "hearting" a tweet shows the user a heart exploding and changing from a dull grey to a bright red.
The first time users run into it, they'll be pleasantly surprised to see it. After that, they'll start to anticipate it and look forward to it. That's when they build an emotional connection with a product.
This is an example that I found on the book Designing for Emotion. The product page shows a lever that says "Do Not Pull," and what it does is quite amazing. I'll let the book describe it better:
A mysterious lever sits between the "add to cart" button and the main product image. It wards off user meddling with the laberl "Do Not Pull." It's odd and surprising to see anything on a web page telling us not to interact with it. Only the most disciplined shoppers can resist such a temptation. Those that pull the lever are startled as an orange, muppet-like arm descends onto the page, yanking it upward to reveal the product description, which lies below the proverbial page fold.
This might seem "cute" at first, but they found that it was actually useful for improving their conversion rates. So their animation is making them money!
At the bottom of Kickstarter's homepage is a cut-out line with an image of a pair of scissors overlaid on top of it. It looks like its a coupon that you can cut out. And when you click on it, the scissor inches over to the other side of the page to reveal a secret mailing list that you can sign up for:
Just like Photojojo, quirky easter eggs like this drive engagement by having an emotional connection with the user.
So some of the examples that we've seen so far showed animations that are unique and playful and a bit of an easter egg feel to them. But I'd also like to show you examples of websites that use motion not for delight but to "communicate in a visual way how they got from point A to point B."
D'Silva explains it so much better:
You tap a button and the form just ...appears? You swipe to delete an item and it just vanishes? That’s super weird and un-natural. Nearly nothing in the real world does anything as jarringly as just swapping states. It would feel like a glitch.
DuckDuckGo's map is one example of that. When you click on the restaurant, the tile flips around to show you directions and phone number--it doesn't just instantaneously show you all that information.
The map is the best part because it animates between each restaurant, effectively communicating where you came from and where you're going to. Imagine if the map just jumped from one destination to the other. You wouldn't have a "feel" of how far it is from the other destination unless you zoomed far enough.
And finally, we have Cushion's front-page. In one of the sections, they show screenshots of the app as you go through each of the major features. Again, instead of having the screenshots show instantaneously on the page, it cushions in (see what I did there?) or eases in.
And that's it! Forget the notion that animation just adds cuteness. It's actually useful! So think about animations next time you work on your next project.
'Till next time!
I highly recommend reading these books and articles if you'd like to learn more!