Usability for grocery ecommerce sites: what can we learn from Sainsbury’s?
This month I’ve done a top-level review of UK grocery ecommerce sites to look at the level and quality of usability. This is something I’ve had first hand experience of as a customer and there are some obvious gaps that key players are missing. My focus this month is on Sainsbury’s as I’ve placed orders through them recently.
I like the fact the homepage is personalised based on whether you are an existing or new customer. For new customers there is a helpful intro section with USPs highlighted (though the images are poor quality which is an oversight). The postcode checker is essential as it helps weed out customers who aren’t in the catchment areas to avoid wasted effort.
However, on mobile although the site is adaptive, the postcode checker is lost below the fold meaning people could progress only to be disappointed later. It’s surprising that the most prominent aspect of the desktop landing page is deprioritised for mobile. The prominence of the trolley/checkout button is questionable and inconsistent. On the main landing page, it’s an icon at the top right. However, this changes when you click through to Groceries. Customers are used to finding the basket icon in the top navigation, so the location pushes other important content further down the page. A look at the analytics data may reveal why these decisions were made.
There are some nice touches that capture customer needs upfront to set expectations. A good example is the pre-selection of a delivery date/time before creating your basket. Delivery charges are clear and the choice is excellent. If I were being picky I’d say the over-use of the van icon is a bit intense on the eye but the core usability is really good.
Existing customers are reminded of items they usually buy and can open previous orders to help with re-ordering.
My key criticism is that in previous orders, there is no option to re-order everything in one click. You have to add each item separately, which is laborious and unnecessary.
Oddly, there is a 15 minute session time out but that isn’t made clear to first time visitors, so you get this annoying message:
Yet there is no explanation of what the security benefit it. If you’re going to do something interruptive, make sure you set expectations in advance.
This for me is where Sainsbury’s has the greatest opportunity to improve usability. The user journey flow is overly complicated. For example, the checkout entry page is redundant and creates an extra click with no benefit to the customer.
The use of forms is antiquated, considering how basic coding techniques can improve form design and interaction. For example, the registration form is long and has no helpful hints or indications of which fields are mandatory, nor is there is any in-line validation. It also uses a tick box to accept terms & conditions, whereas I’ve found that a simple statement like “By placing an order you agree to our terms & conditions” with the link opening in a new tab can actually reduce drop out. I also have no idea who chose the stock photo on the right: what relevance does that have to registering for Sainsbury’s online grocery service?
Here’s my hitlist of what should be at the top of a testing program and why:
- Remove unnecessary pages and clicks; the more customers have to do, the greater the opportunity to exit.
- When selecting an address from the drop down, don’t make the customer click on the correct entry and then press “Go” button as well to confirm; reduce clicks by doing the confirmation when the option is selected in the drop down.
- For billing address, only display the text “My billing address is different to the delivery address above” with a blank tick box. If ticked, this then reveals the billing address data entry form. This pulls content up the page to reduce scroll depth.
- Differentiate action buttons with a clear design – positive colours aren’t being used, so they are easily missed.
- Ensure action buttons for the next stage aren’t adjacent to other action buttons, for example “Continue shopping” and “Send order” are on top of each other, which can lead to accidental clicking and frustration (it did for me!).
- Display security and reassurance messages during the checkout; these are proven to help uplift conversion, so worth testing.
- Enclose the checkout, removing the top-level site header, which competes for attention visually and avoid the white space abyss.
Comments and questions
I appreciate that this is a whistle-stop tour of the website but what do you think? Please drop by and share your comments, questions and experience. Please also share any relevant links related to website usability that you think readers would be interested in.
Econsultancy blog on a usability study where Europcar comes top.
Practical advice for ecommerce navigation from Usabilitygeek.com.
Blog by David Moth on Econsultancy, “12 usability flaws that are spoiling the mobile web”.
Usability and conversion optimisation blogs/articles by Paul Rouke @PRWD.