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:
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
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.
Aucun commentaire:
Enregistrer un commentaire