Design a Familiar and Intuitive Checkout

Layout High Priority 70% Adoption 5 Seconds Saved

Checkout should feel familiar. When a checkout conforms to conventions, customers trust it and breeze through, thereby reducing checkout abandonments.

Checkouts have conventions – obey them. Put another way: Don’t be weird! Be normal, and you’ll have a familiar and intuitive checkout.

When filling out a checkout form, a name is entered first. Then shipping address. Within address, city is entered before state, which is entered before ZIP code. Those conventions allow users to go through checkout on autopilot. When you break those conventions, no matter how logical your reasoning, the user has to exit autopilot mode and start thinking. That increases perceived checkout time and creates a feeling of unease. Having to think leads to a slower checkout, and a slower checkout leads to higher cart abandon rates.

Picture yourself in a restaurant. How would you react if the waiter asked for your card before you received your food? You’d be startled by the unconventional order of events, and it might even slow down your meal, since you didn’t have your credit card ready in hand like you would at the end of a meal.

A conventional, intuitive website works as expected, like a restaurant where you pay at the end of your meal. You can go through and complete the exchange without a second thought. Keep that wait short, and stick to conventional, intuitive checkout design.

Implementing an intuitive layout can make the checkout progress easier - like making an address form appear as it would on an envelope.

Usage

In checkout forms, users expect to start with name, shipping address, phone and email. The billing address is entered if different from the shipping address. Then they will select their shipping method, before finishing by entering their payment information. This basic layout has occasional variations, such as placing email and phone fields either above or below the address section. Or reversing the order of the phone and email fields.

Deviate from convention at your own peril. For example, Apple deviates from convention by placing the ZIP code field in front of the city and state fields. There is logic behind the violation of convention, they use ZIP to auto-populate the city and state codes for the user. But, it is unfamiliar. They would be better off following convention and using a type-ahead solution instead.

Some sites put the email field first. Again, there is logic here – they want to capture your email address so they can send you a cart abandonment email. But, it is unconventional and there is a conversion price that is being paid, since they are putting more work between choosing a product and paying money for it.

Macy's uses an intuitive layout, ordering fields appropriately with name before address before city before state and ZIP code before shipping method. The CONTINUE button is placed at the end of the form.

Sephora interjects account creation in the middle of the checkout.

Field Order

Users expect a familiar field order, and adhering to that order helps it feel intuitive and simple for the user. Address fields are next, appearing in the same order they would on an envelope: First Name, Last Name, Address Line 1, Address Line 2, City, State, Zip. …)

Buttons at End

Button should be at the end of the checkout form field - where the user will be once they have finished filling out the checkout form. Don’t make them scroll up again. Buttons should be large, and clearly labeled with something like familiar “Complete.”

Violate Convention Rarely and Purposefully

If you are breaking convention, make sure it is for a good reason and that the corresponding payoff is worth the conversion hit. For example, making a user enter their email first might be worth the conversion hit because of a larger increase in conversion from being able to send out more cart recovery emails. But, only roll out the change if you have run the test and done the math.