Checkout optimization: Layout

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?