Checkout optimization: Layout

Written by Guido Jansen in
February 2014

This week I'll be exploring the layout of the checkout process which is the second blog in this series. if you missed the first, checkout the Checkout Optimization Introduction post.

The way webpages are structured is of great importance to user experience. And on pages where getting to the end of a process like the checkout, it's key to your shops succes. Here are some guidelines related to the layout and other visual elements on checkout pages.

Clear error messages

Make it crystal clear to your website visitors when they make a mistake and what can be done to fix the problem (without the use of technical jargon). The erroe message should be clear (high visual contrast) and placed near the error (and not only on top of the page). De notification should be clear and short.

Have an 'order as guest' option

Make it visually apparent that there is an option to order without going through a (lengthy) registration proces. Most people just wont to get the stuff you're selling, they don't want to start a long trem relationship right away. Of course you can explain benifits of registered users, but that should never get in the way of the actual order (I'll continue on this in the final part of this nlog series about 'Focus').'

Use single column forms

Filling forms that are scatered acros multiple columns is really tiresome and difficult. Columns tend to be overlooked or fields get mixed up which creates more errors or invalid data. Also place field labels above the fields, not before.

This is how Tumblr does it right:

Assign the most important action the single most prominent button

Most site visitors read as little as possible. If they want to go to the next step, they just look for the most obvious visual choice. So make sure that the primary next action also has the most visual prominence in the checkout process. And don't use that same button for secondary actions. You can opt to display the same button above and below the form, but that is only needed with longer forms, make sure they look and do the exact same.

Here's a checkout example. Looking at "Single columns" this is terrible. But it's really easy to spot the most important CTA button:

Limit options

Give options, but not too much. Choice makes us feel in control, too many options creates chaos and leads to inaction. So don't confuse your customer with too many irrelevant choices. When it comes down to shipping options, most customers are only interested in two: fast or cheap. Showing five slightly different options doesn't really help.

Limit animations

During the shopping process it's ok to get attention for important items that might otherwise be missed. Users are easily distracted and with animations it's relatively easy to get attention and getting customers to do something. But don't do this during the checkout process! Don't add any distractions or they are out of the flow!. A quote of one of the users during the research: "Stop all that animation stuff. Don't do that fancy stuff when you're about to accept real cash." So be very careful with distractions during the checkout process and  only use it when it's actually important for the checkout itself, not to get attention for unrelated actions.

Use font size for hierarchy

Many 45+ users have a hard time reading small text. Use at least font-size 12pt for standard fields and never ever user font size 10pt or smaller. Even users around age 20 complain about fonts smaller than 10pt. Besides that, font size is ideal to create hierarchy in your text. Smaller text is less important, large text is important to read. Sites that use different font sizes to create hierarchy in there sites are experienced in a much more pleasant way by their users because it's easier to scan the text.

[av_hr class='short' height='50' shadow='no-shadow' position='center']

Next week I'll continue the series with part 3 about the use of text in the checkout process. Don't want to miss the next 5 tips on Checkout Optimization? Subscribe to my newsletter!

Until that time: what are your biggest wins made or mistakes fixed in your checkout process?

Recent posts
AI & Personalization
AI & Personalization

Guy Yalif performed his CH2019 keynote "AI & Personalization Demystified" and spoke about how we can use AI and machine learning, what it is (and isn't) good for in marketing and personalization. After his session, he and Niels Reimer joined me in the café to talk about this! (oorspronkelijk gepubliceerd op

Make All of Your Data Actionable With Ringside Data
Make All of Your Data Actionable With Ringside Data

Do you struggle to get enough actionable data from Google Analytics? Then you need to listen to Russell McAthy, CEO and co-founder of Ringside Data. Key takeaways include: Why Russell set up Ringside Data, the companies with the biggest data problem, how Ringside outperforms Google Analytics, if you’re investing in data analytic tools, you need people with specific skill sets, the biggest pain points Ringside is trying to solve, the benefit of Ringside for eCommerce businesses, and what attribution is. (originally published on