Distraction-free online retail experiences to guide your visitors smoothly to checkout.
A few months ago, we published our top ecommerce trends of 2018, which featured some of the things we’re seeing (or would like to see) incorporated into online retail sites. In this round-up, we’re going to delve deeper into one of those trends: simple, smooth, distraction-free ecommerce experiences.
Patrick Foster elaborates fully on what he means by ’simplicity’ in ecommerce UX in his original article, but I think he would appreciate the appropriateness of distilling his words into even easier to read bullet points:
And here are some ecommerce sites that I believe achieve all or some of these points during at least one part of the customer journey…
Discover the winners in our competitive UX measurement report
The Austin purveyors of strictly limited edition pop culture prints, records and toys you wouldn’t let your children within a 10 foot radius of, have completely stripped their site down to the bare essentials.
The focus is on the product, with only a maximum number of three items featured on the homepage…
The add to cart CTA only appears when you hover over the item, so the product image remains uncluttered until you’re ready to buy.
The shopping cart employs only high contrasting black, white and red buttons, links and hover states to keep any ambiguity to a minimum.
Once you’re through to the checkout, it’s a distraction free Shopify experience, with clear indication of how many stages you can expect. Options for subscribing to a newsletter or saving information are opt-in only, and there areno unnecessary fields such as gender.
And if you want to avoid all of this, you can just use the PayPal One Touch option, presented on the cart page.
Treadless has thousands of different clothing designs in various different configurations, products, sizes and colours, so you can imagine that keeping things simple would be an impossible task. But where Treadless excels is, when you’ve chosen your design (whether through search, filters, or menus) you don’t have to leave the product page to see how it looks as a men’s t-shirt, a woman’s tank-top or iPhone cover.
The lengthy gif below shows how straightforward the process is, as well as highlighting the CTAs, and my favourite ever ecommerce feature – the carty belly.
We’ll talk about awesome product copy in another round-up, but Firebox are a good example of delivering key-bullet points covering exactly what you need to know about the product at a glance (mixed with some welcome humour) in order to aid a speedy, yet informed, purchase for the in-a-hurry customer. And if you need more information, or just love killing time, you can scroll further down the page.
Record stores have a difficult time translating the pure-nerd-joy of flicking through racks of vinyl to the online world. Most record websites are a mess of promo messages, new releases, old favourites, store recommends, special offers, gig listings… and that’s before you get to the endlessly complicated question of categories, sub-categories, genres and sub-genres.
The Rough Trade website looked like this in 2014, and to be honest it was one of the better examples…
Then last year, Rough Trade changed to look like this…
They bravely stripped everything down to four main categories, beginning with ‘New Releases’ – clearly date stamped and letting the artwork speak for itself (as it would in-store).
Then you have ‘Pre-orders’, ‘Exclusives’ and the all important ‘Essential’ category, where the Rough Trade staff curates and recommends their favourite classic albums – much like you’ll find in any record shop.
And that’s it. Just four categories, a constantly visible search box and your shopping cart. There are no endless subgenres to get confused by, or competing marketing messages. Essentially it’s saying “here’s what’s new and here’s what we like.”
It’s generally perceived as a good idea to ensure every product on your site is well-represented by photography, taken from every possible angle in any practical context. But what do you do if your products are lotions and creams? How do you make these products come alive in a useful manner on your site – while also providing an uncluttered experience?
Check out Lush’s use of video on its product page, and its simple information box…
As Econsultancy’s David Moth pointed out in his review of the new Mulberry website, the fashion company has proved that delivering user experience and luxury products are not mutually exclusive.
Check out how the minimalist category page shows a view of the product as it looks on a model (and its relative size) when you hover over the image.
Mulberry also operates a guest checkout (with option to save details after purchase) and a single-page checkout for optimum speed and efficiency.
As soon as you hover over a book cover in the product listings, there are options to either ‘add to cart’ or ‘click & collect’. If you press ‘click & collect’ you’re immediately presented with a search box to check stock in your nearest store. And for added convenience, you can click the ‘use my location’ button for immediate geolocation thrills.
The pop-up then reveals the nearest stores that have the book in stock, and tells you what time they’re open till today.
And then finally, Waterstones asks for the bare minimum information to reserve your book. No credit card, no address, no unnecessary titles…
The only thing I could say to improve it, is put the ‘preferred contact method’ option first, then only demand either a mobile number or email, instead of both.