Bad / Good design

The Bad: PayPal Receipt Concept on Dribbble

Animations are a crucial element of interaction design, but they should always serve a purpose. They should never be done for animation’s sake. Unfortunately, designers tend to have a love affair with animations, partly because animations are so fun to create that we might not know when to stop.

Vladyslav Tyzun’s animation concept for a PayPal email receipt, posted on Dribbble, is an example of animation done wrongly:

The animation is pretty, but superfluous. In total, it takes a whopping 3.5 seconds to see the transaction details. A simple fade-in of the receipt would be more elegant, and because it takes up less time, better for the user as well.

This problem becomes dangerous when designers seemingly cannot get enough of animations. As of 2016, Vladyslav’s animation would receive more than 500 likes and 8,000 views. This shows a misguided appreciation that designers have towards animation for animation’s sake. Having insight into the designer’s tendency to prefer swooping epics over more direct representations and catching yourself before you give in to animations will save you a lot of time and prevent many headaches. Remember, users come to sites for a purpose—we want to show them what they are after in a short space and time, not detain them in a grand tour of the gallery.

The Good: Stripe Checkout’s Animation

When we do animation purposefully, however, the results can be great. Look at Stripe Checkout’s animation when the user receives a verification code:

Stripe uses animations to make things seem faster than they are: it provides users with updates (like “Sent”) even though they might not have received the SMS yet. This prevents users from feeling frustrated at having to wait, and provides assurance that an SMS is on its way right now.

Rachel Nabors, an invited web animations expert at the W3C, suggests five principles to keep in mind when designing animations3:

1.     Animate deliberately: think through each animation before you create it.

2.    It takes more than 12 principles: Disney’s 12 principles of animation work for films, but not necessarily for websites and apps.

3.    Useful and necessary, then beautiful: 

 should take the back seat to UX.

4.    Go four times faster: good animations are unobtrusive, which means they run fast.

5.    Install a kill switch: for large animations such as parallex effects, create an opt-out button.

Remember, users come to sites for a purpose—we want to show them what they are after in a short space and time, not detain them in a grand tour of the gallery.