Making beautiful forms; Square and Recurly
Posted by Dion Almaer about a year ago on ux
I recently had some time to play with some apps (stuck somewhere with no place to go).
I started to play with Square (and their card case app). I have always been impressed with their UX as it is simple (much use of white space a la Google), but in a way that is quite beautiful and not bland as Google can be.
One area that jumped out to me was on a very simple flow. Adding your credit card info.
Most sites make you select a bunch of unnecessarily information and the forms are overly verbose. Contrast them to the the Square flow (you should try it on the app as the transitions are part of the beauty).
Initial Ask
You are simply asked for your credit card number:
- There is a mini picture of a credit card to the left of the number text field
- As soon as you type a number the credit card “face” changes to become a VISA or MASTERCARD (or whatever) showing you instantly that they are grokking what you are typing in. There is no need to ask the user for the type of card. We know based on the first digits.
Now you are asked for the secondary info
As soon as the full credit card is in place, the text field zooms to a small size, showing just the last 4 digit (nice privacy and use of space). In place of the large text field they place others for the date, CVV/CIN/whatever you care to call it, and zip. As you fill in the info, you are moved on to the next field. For the date a nice “/” is placed in there for you.
When you get to the CCV/CIN number, see how the card flips and you get a mini version pointing to where the 3 digits will be.
The feedback throughout the experience is fantastic. Errors are handled nicely, and it is just a pleasure to use something so simple.
Nice job Square!
If you are looking at checkout flows in a web app, Recurly have published examples of their CSS based “secure, PCI compliant transaction forms.”