Ecommerce UX hints and tips

Single column

Tips on Checkout

A part of the simplifying process involves making sure your checkout flow forms are incredibly easy to fill in. One of the best ways to do this is to have the form be a single column, so the user can easily see how to fill it in as they just have to go from top to bottom. No jumping around parts of the page or going left to right as well. Ideally all the fields will run vertically down the page, with no fields next to each other (like first name and last name) and with the field labels above rather than to the left.

Not only should there not be multiple columns of the form but it makes life even easier if there's no content to the left or right of it at all. Excess content (even if it doesn't require filling in) can distract the users from the main task at hand. One of the best improvements to checkout conversion I’ve made in the past has involved getting rid of the order information running down the right side and having just the form.

The best way to work is to design for mobile first and then use that centred on a desktop (maybe slightly wider). This single direction of focus helps the form itself act as a progress bar, as the user should easily be able to see what they have and haven't filled in, and where they're up to on the page.

Last updated on 22 November 2016

Want the latest?

Never shared. Unsubscribe at any time.
How to Design Ecommere Sites book cover

More Checkout page tips

Reduce the links

Allow guest checkout

View all the ecommerce UX tips