When considering Checkout Optimization, the “Order Review” step shouldn’t be overlooked. Checkout usability testing shows that issues encountered here can easily cause users to abandon — even this late in the checkout flow.
Furthermore, the abandonments observed at this point in the flow are very often solely due to the checkout design and flow — as in, they are entirely preventable.
However, benchmark from 60 major e-commerce sites shows that 65% of sites have an “Order Review” user experience that ranges from poor to just acceptable.
Yet it’s possible to excel at this critical checkout step: the top-ranked site in the benchmark is the office supply store Office Depot, which has a best-in-class “Order Review” UX performance.
This article will explore the 5 “Order Review” implementations that Office Depot excels at, but which many e-commerce sites fail at:
- Allow users to edit data directly at the “Order Review” step (38% get it wrong)
- Have a “Place Order” button above the fold at the “Order Review” step (23% get it wrong)
- Optimize the “Order Review” step for skimming (11% get it wrong)
- What information to display at the “Order Review” step (12% get it wrong)
- Have edit links in close proximity to each semantic group at the “Order Review” step (38% get it wrong)
1) Allow Users to Edit Data Directly at the ‘Order Review’ Step (38% get it wrong)
Users at the “Order Review” step are often observed to find errors in their order information, which they naturally want to edit before finalizing the order. This is in itself a positive thing, as it justifies the presence of the review step.
The task of editing data at the “Order Review” step is often observed to be a cumbersome process, as “Edit” links would send users backwards in the checkout flow, causing a great deal of confusion and frustration both when moving backwards in the checkout flow and when moving forward again after corrections had been made.
Users who are sent back in the checkout flow are prone to make additional errors as they are yet again presented with a set of choices and options, which they had already completed the first time around.
Additionally, after being sent backward in the flow and editing the information, the user now will have to move forward again. This is not only confusing, and may introduce new validation errors, but was also experienced by users during testing as highly discouraging, as they had to go through the same checkout steps they’d completed several minutes earlier.
At Office Depot, users can edit their data directly at the “Order Review” step by clicking the “Change” button (image below), which opens an overlay.
The solution lies in allowing users to edit data at the “Order Review” step, either inline (for simple information like quantity and contact numbers) or via a page overlay (for more complex information like address and payment data).
2) Have a ‘Place Order’ Button Above the Fold at the ‘Order Review’ Step (23% get it wrong)
During testing, 11.6% of users misinterpreted an “Order Review” step for a “Confirmation” step.
This isn’t surprising, given that the “Order Review” and “Confirmation” steps are often more or less identical. They typically both contain product information, an order cost summary, and a summary of the user’s just-typed address details and selected shipping method.
Furthermore, they are often (though not always) both presented after the user has typed in all data (e.g., payment data) and performed all selections necessary to technically place the order.
“There, now it’s purchased”, one user said during testing at Cabela’s, concluding that the purchase was done. The user consequently left the checkout, believing the order was placed, despite this in fact being just an “Order Review” step.
Users during testing who misinterpreted an “Order Review” step for a “Confirmation” step consequently left the checkout without having placed their order. Adding to the tragedy, these users did so in good faith believing that their order was successfully placed.In other words, failing to have a “Place Order” button at the top of the “Order Review” step can be the sole cause for up to an 11% abandonment rate.
These users are furthermore likely to require extensive customer support later on when they’re angered about why their order hasn’t arrived, yet customer support will have a hard time helping these frustrated customers, as there’s no placed order to look up — a scenario likely to lead to permanent brand damage as users are left with two poor experiences in a row.
On the desktop site, Office Depot has the “Place Order” button above the fold at the “Order Review” step, making it clear to users that they haven’t yet completed their order. To perfect this implementation a “Confirmation” process step should be included as well to offer users additional information scent.
On the mobile site, the “Place Order” button is sticky, meaning it’s always visible in the viewport as users scroll.
3) Optimize the ‘Order Review’ Step for Skimming (11% get it wrong)
During checkout testing, over half of users tested skimmed, rather than thoroughly read, the information and options presented at the different “Order Review” steps.
Testing revealed it leads to issues when (1) new information is included at the “Order Review” step or (2) data and options not directly related to the actual order dominate the content of the step.
For example, if users have seen one order total throughout the checkout process and then at the “Order Review” step get presented with a price that contains an added tax, users will no longer be able to “recognize” the order total — thus the elements will draw attention, and can result in users feeling “duped” (e.g., “Why did they hide this until the very end?”).
At Office Depot, the “Order Review” step is clear and focused on the order information that needs to be reviewed.
The “Order Review” step should not waste the eye gaze and attention of users who skim the step on non-order information or new order information that could have been displayed earlier.
While it to some extent is true that errors in the order are the user’s own fault if they only spent a few seconds scanning the “Order Review” step, it’s still the harsh reality that it will add up to an overall negative shopping experience, and the issues caused may require extensive customer support resources to resolve.
4) What Information to Display at the ‘Order Review’ Step (12% get it wrong)
During testing, some users proved that the “Order Review” step wasn’t unnecessary by actually using it to edit their data and correct errors in their order.
Of course, users can only make such corrections at the “Order Review” step if they’re presented with the prior data, and when it’s formatted to be easy to see.
Shipping and Contact Info
At Office Depot, the shipping information is easy to scan, the phone number is formatted to be easy to read, and the user’s email address is provided.
Additionally, for shipping information consider also indicating if “Billing = Shipping”, to allow the subgroup of users who want to use different addresses to double-check that the correct one is being used.
Finally, consider avoiding abbreviations and using the full forms of words instead (e.g., “Maine” rather than “ME”), as abbreviations are more likely to be overlooked by users scanning the information compared to the full forms of words.
Payment Details
At Office Depot, the last four digits of the credit card are displayed, along with the expiration date.
Display the last four digits of the credit card number. To help users recognize the credit card used, display the last four digits of the applied card. For security reasons, the last four digits are typically the only ones possible to display.
The card expiration date. Some users might have multiple stored cards of the same type (e.g., two VISA cards). To help users as much as possible it is therefore advisable to also display the expiration date for the applied card. The expiration date will resonate well with some, as the card that expires the latest will usually also be the newest card — for example, a user with two VISA cards will from the expiration date on the “Order Review” step often be able to tell if they are about to use “the old VISA card”.
Additionally, consider displaying the card logo, which provides a way for users to instantly recognize the card type.
Shipping Method and Estimated Arrival
Office Depot provides an estimated arrival date, the shipping speed, and the cost of the different shipping methods.
Provide the estimated arrival date (e.g., “Thursday, April 8”) rather than shipping speed (e.g., “3–5 Business Days”).
Additionally, consider including the shipping method and speed. If a user has chosen a different shipping method than the site’s default, it can help to specify the shipping speed and costs to help users understand how the estimated arrival date was determined — for example, “Estimated Arrival Date: 6–7 July (expedited 3-days shipping, $12)”.
Price and Products
Office Depot makes the total order price more prominent than other prices, provides a cost breakdown, has thumbnails for products, and displays the quantity being ordered.
Make the order total the most prominent price. The “Order Review” step often does (and should) display several monetary amounts. This is in itself not necessarily a problem and informing users of “how much they save”, for example, is quite fine. However, it is important that the total price — the price users will actually pay — is the most prominent.
Provide a cost breakdown. Users strongly dislike not knowing what they are paying for, and are generally hostile towards “surprises” at the “Order Review” step — for example, a new, higher price. Therefore, display a total cost breakdown (e.g., including sales tax and delivery and other fees), which allows users to deduce how the total price was calculated.
Have thumbnails for all products. Thumbnails make products quickly recognizable, while providing users with an easy, visual way to verify that they are indeed buying the right products.
Display product quantities. To ensure users are aware of how much of a product they are buying, quantity should be visible at the “Order Review” step. Consider also allowing users to alter quantities at the “Order Review” step, in particular if the checkout flow allows users to bypass the cart (as the “Order Review” step is then a user’s first encounter with their cart contents).
Additionally, consider providing tooltips for taxes, fees, and other information (e.g., as Office Depot does for “Delivery Speed”).
5) Have Edit Links in Close Proximity to Each Semantic Group at the “Order Review” Step (38% get it wrong)
Users should be allowed to edit their data at the “Order Review” step.
Office Depot has 4 “Change” links, each of which belongs to a different information group (e.g., a “Change” link for “Payment method” and one for “Billing address”). To perfect this implementation the “Change” link for the “Shipping address” group could be placed closer to this information block.
The solution is straightforward: have an “Edit” link for each semantic group, and place the “Edit” links next to their information groups at the “Order Review” step, so that it’s clear from a quick visual scan which “Edit” link belongs to which information group.
Conclusion
65% of sites fail to reach a “good” level of performance for the “Order Review” user experience. While it may be tempting to settle for an “acceptable” performance, consider that “Order Review” is a critical step in checkout — problems here have been observed during testing to be the direct cause of checkout abandonments, which is a shame when users are one click or tap away from completing their order.
Office Depot exemplifies however how it’s possible to have an excellent “Order Review” performance. In particular, the site excels at:
- Allowing users to edit data directly at the “Order Review” step (38% get it wrong),
- Having a “Place Order” button above the fold at the “Order Review” step (23% get it wrong),
- Optimizing the “Order Review” step for skimming (11% get it wrong),
- Presenting the necessary information and selections at the “Order Review” step (12% get it wrong), and
- Having edit links in close proximity to each semantic group at the “Order Review” step (38% get it wrong).
Office Depot can be considered as sources of inspiration when trying to improve the “Order Review” experience.
5 ‘Order Review’ Implementations That Make Office Depot Best-in-Class
PS. To find good examples, notice how you’re buying something online for the first time (no prior experience with the website). Whenever you start looking for something and it takes you more than 3 seconds, note it and also note why you couldn’t find it. Or when you want to do something but can’t. Afterwards, see if you’re not making the same mistakes.
