How do top ecommerce website display order summaries in mobile checkout flows?

For a long time it’s been common for checkout flows to feature a persistent summary of the user’s order, or contents of their basket. It’s something for the user to refer to throughout the process and is a way a user can reassure themselves of what they’ll be receiving when they pay.

There’s plenty of space for this on desktop screens (often on the right hand side) but what’s the best way to handle it on mobile, where space is a lot tighter? Most ecommerce sites now get the majority of their traffic from mobile devices, so it’s a problem that needs solving.

I went back to my list of 50 top ecommerce websites to study their checkout flows and see what the big players are doing. Of these, a few didn’t have checkouts (sites that for most purposes follow the ecommerce structure but end in an enquiry rather than a purchase) and I wasn’t able to access some others, leaving me with 38 that I was able to analyse.

All of the sites I looked at will at least present the order for the user to review before completing but I’m more interested in the early stages of checkout. At the early point there’s usually a lot of fields for the user to fill in and can be hard to justify having anything other than a form on a mobile page.

Here I look at the different approaches being taken and highlight some good examples, carried out in early 2019.

Findings

26% of the websites studied only show the order details for review at the end and thus don’t display any kind of summary during the earlier steps. An example is from John Lewis below, who show the product and order summary just before the button to pay but as they have a short checkout, there’s only one step without this information. This is better than those that give the user two or three steps without even a reminder of how much they’re spending.

The majority (74%) show at least a cost total throughout the checkout. Most (47%) display this towards the bottom of the screen below the form, such as the example from Best Buy below.

66% show some information about the products in the order throughout the checkout. Most of them (39%) show it at the top of the screen, above the fields that users need to fill in. The vast majority of 84% will use photography of the products here—those that don’t look dry and text-heavy.

The example below is from Booking.com who are like most travel sites in giving a lot of space to summarising the ‘product’ being bought. They go further than most with image, tags, review summary, dates, and more. It’s possible that they think they need to keep users focussed on the positives when making an expensive purchase.

One alternative approach used by 16% of the sites that show product information (and 10% overall) is to put it within the delivery section, rather than defining it as a separate ‘basket’ section. The example from Lowes below illustrates this and it seems to be done by companies that allow the user to split their order between delivery and collection.

Of those who show both an order summary and product information, 78% put them next to each other, while the other 22% split them between top and bottom of the pages. Putting them next to each other makes the most sense as they are so related but the example from eBay below shows the product at the top of the screen, followed by sections leading to forms before ending on a price summary at the bottom. By condensing it into a single screen it means they’re both viewable at the same time, and it makes the experience feel more app-like.

Conclusion

This research shows that two thirds of the big sites studied manage to get both product information and a cost summary to be present throughout the checkout flow on mobile. It suggests that it’s something worth doing even when space is tight and means users will always have the information they need at their fingertips.

Most of these sites have long pages and display the details elegantly. If you’re worried about space then one solution not covered above would be to put all of this below the primary button on the page, where it can run on longer and is there if a user wants to study it but doesn’t get in the way of progressing. The Gap website below is a good example.

Last updated on 28 October 2019