A Payment Experience with Animations

Michaël Villar, User Interface Developer at Stripe:

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.

Payment system processing demo animation

I couldn’t agree more with Michaël. Read his complete article with more animation demos.

In my day job, I’m constructing the payment process for a coffee subscription service online. We are using Stripe, via Squarespace.

Additional payment processing animation: completed task

The more complex the transaction, the more beneficial direction through animation would help the checkout process flow. Flow is the key trait of animation — it communicates where the process is heading. It informs the customer that they are making progress in an otherwise static, lifeless, boring transaction. It’s an organic design approach to how something works.

Kudos to Michaël.

Joe Darnell

Joe is a UI and graphic designer with prior experience as the creative director for three media-based businesses. Joe’s passionate about web design and graphic design with about 15 years of experience in the media industry. Additionally, Joe is the host of the Top Brew and Techtonic podasts, both featured on iTunes.