Animations add context

This transition shows how an animation can be useful for the user. It becomes clear that we ask for their phone number as part of the Remember me step, that the phone input shows up because of the action you took (checking Remember me).

Shake shake shake

When building a form, it’s easy to overlook how errors are experienced by the user. It’s easy to think of them as just one more item to check off in the list of potential tree of outcomes. However, it’s this point, at which they’re being told that there’s a problem with the information that they provided, that users are most frustrated (and consequently leads to high drop out rates of the payment flow). So, we added this little shake animation. It simultaneously alleviates the frustration users might feel with its quirkiness while also highlighting that something went wrong. The form is basically shaking its head at you. ☺

Sleight of hand

Animations can be a good tool for making users perceive things as faster than they really are. When you’re waiting for something, we all know time tends to slow to a crawl. This little animation above makes the process feel much snappier, even though the absolute time to receive your text message stays the same. It’s worth noting that this animation is entirely an illusion — we don’t actually know when you receive the SMS.

Button transitions

Subtle animations are my favorite. The transition between the first two states (“Payment Info” and “Pay $25.00”) matches the transition used for the payment details above it, using a similar slide effect. This highlights that the action linked to the button is changing as you complete each step.

When the user clicks “Pay”, a spinner briefly appears before we show the success state. I’m particularly happy with how the checkmark animation came out — it really encourages you to feel like you easily did the purchase.

Bonus round

This animation is a bit superfluous, in that it could be removed without breaking the flow — which contradicts the general premise of this article. But, I consider it useful in that it improves the flow.

I tend, like most others, to not trust websites that feel like they were made 10 years ago. The over-the-top polished feel of this animation adds to the overall user experience, by conveying a level of perfection and attention to detail that you can’t help but trust.