Improve the payment experience with animations
Behind the scenes of Stripe Checkout
It’s easy to see how designing forms can be seen as a chore that detracts from the time that could be spent on more exciting parts. Yet, if you think about it, the payment form is part of the checkout flow, the point at which a user is on the verge of committing to trusting you and your business with their vote of confidence. This experience should really be as great as possible, and using animations correctly can really improve this experience.
The goal of animations should not solely be entertaining the user, but rather, they should be helping the user better understand what’s going on and how to use your product most effectively. If you disable animations, the flow should feel broken; if it is not, this might mean your animations are superfluous.
That’s how we—the team behind Stripe Checkout—look at it, at least, and why we have spent so much time and effort building Checkout. We’ve focused on using animations in Checkout from day one because we believe that they enrich the core experience. To illustrate how they do so, I’ll walk through a few of the animations we’ve implemented so far.
Note: you should check out the mp4 versions for a higher frame-rate.
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.
I used these examples help illustrate unexpected places where you can add some animations in your UI to improve the experience. No matter what type of app you’re building, with the right animations, you can make things clearer, connect users’ actions to consequences, change their perception of time, and most importantly, delight your user. Animations are not only for music, photo, and weather apps. ☺
I am now working on Height, a new all-in-one project management tool.
