Designing Ecommerce Websites – free course

A single column

You should make 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, which helps the user easily see what they have to do. A 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. There’s no extra dimension of jumping across columns going left to right as well.

Not only should there not be multiple form columns but it makes life even easier if there's no content to the left or right at all. Excess content (even if it doesn't require filling in) can distract users from the main task at hand. One of the best improvements to checkout conversion I made to a checkout flow in the past 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 it for mobile first and then centre that layout on a desktop (maybe with slightly wider fields). All fields should 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.

A couple more tips here

Reduce the links

Allow guest checkout

Get loads more in the book

Designing Ecommerce Websites book cover