I love nothing more than going big with a full screen, sweeping, sliding and stomach-churning animation. But I’ve come to the painful realisation that when I’ve used these in the past I’ve added them for myself and NOT for the user.
Recently, I’ve been working on bringing more animation to Eventbrite, so I wanted to share three lessons I’ve learnt about how to get the most out of animations: Animation should provide affordance, reduce friction, and delight the user.
1. Animations should provide affordance
By using animation you are already wielding one of the most powerful tools in a designer’s arsenal: affordance. The official definition is the “Relationship between an object or an environment and an organism, that affords the opportunity for that organism to perform an action”.
An example of affordance is a door knob. When you see a door knob you know that if you were to turn it you would open the door.
An example of an animation creating affordance is using a slide effect when navigating through a web application flow. By sliding the next view in from the right the user feels like they are progressing forward. Inversely, when the user needs to go to a previous step we slide the next view in from the left, giving a feeling for going backwards.
We’ve used this in our mobile app, Neon, our iOS app for organisers, to give users a sense that they’re making progress through the application.
2. Animations should reduce friction
Closely related to this is reducing user friction.
I think the best way to talk about how animations reduce user friction is through interpretive role play. So grab a friend and get involved!
Hermione – An event organizer
Harry – An event attendee
Scene [club night]:
Hermione is organising an amazing event using the world’s greatest self-service events platform (Eventbrite, of course).
It is the night of the event and Hermione is checking people off the guest list on the door. Things are getting busy!
Good evening, can I see your ticket?
Sorry, I’ve forgotten it, can I give you my name instead? It’s Harry Forgotter.
I’ll just look you up.
Hermione opens the Neon app. When you tap on the check-in screen in Neon you are greeted by a bouncing animation, which indicates that by swiping to the right you can check in the attendee. Then when the attendee is checked in their row changes to green and slides back to the left. Without the animations the app would have to provide a couple of notifications or pop-ups; one explaining that you need to swipe to check someone in, and another notifying you that the check-in was successful.
I have checked you in. Have a great night!
Thank you, I will!
3. Animations should delight
When it comes to delighting users, the devil’s in the detail. It’s all the tiny things that add up to a great experience.
It’s the difference between a motion-activated light above your front door, and one that you need to flick a switch to turn on. You only notice how annoying flicking a switch was when you get the motion-activated light installed and you’re no longer fumbling for your keys in the dark.
At Eventbrite, we’re trying to use animations to deliver an experience that just feels better, even if users don’t know why. One of my favourite examples is the toggle switches in our forms. When your mouse passes over the switch the button eases in the direction it will slide if you click. When you click, the button slides to the left (or right) and the colour fades from grey to green, to indicate a change in state.
Technically brilliant, sweeping, sliding, and stomach-churning animations are a lot of fun to make, but the reality is they don’t accomplish much, except perhaps kudos from your peers.
So don’t forget, make animations for users NOT developers!
Gratuitous animation by Joshua Price