It’s a great time to be a consumer. With so many buying options, retailers have to work harder than ever to give people good value and even better service.

For retailers, however, the challenge lies in giving potential buyers the best possible to ensure they make it all the way to the checkout.

I’ve taken a look at some successful ecommerce sites to see what they’re doing well from a UX point of view. (Update: For a newer version of this article, see 93 ecommerce UX features that create user flow).

Ecommerce: Best Practice Guide (subscribers only)

Graze

There are plenty of positives here. The page is sleek and visually pleasing, with nice product imagery. But more importantly there is a really simple explanation of what the company does.

One of my biggest pet hates on any website is when it’s not immediately clear what the point of it is, and Graze definitely doesn’t fit into this category.

Graze UX

Another fantastic piece of UX on the Graze website is when it comes to choosing your product.

It could not be simpler: three options, with a brief explanation under each one, along with some nice imagery. If there are too many options the customer could get confused or frustrated and end up looking elsewhere.

Graze UX

Gramography

Gramography is Firebox’s new sister site, and it enables you to log in with your Instagram account and order personalised products using your Instagram photos.

As I mentioned in the above subheading, I’m a big fan of sites where it’s immediately obvious what the business does. Gramography certainly ticks that box with its homepage.

Gramography UX

Once you’ve logged in, the UX gets even better. You can go into the shop and see your own Instagram photos on the product images (that’s me getting silly on my stag. And that’s a man expertly playing the traffic cone on Oxford Street).

This is a nice touch because you don’t have to just imagine what the product might look like based on somebody else’s photos. Again, this is likely to increase buyer confidence and make the products more appealing.

Gramography UX

The Whisky Exchange

This site can do no wrong in my eyes because whisky makes my mouth do a massive party. But the site happens to have a lot of great UX design elements, too.

I particularly like the taste guide it has on the individual product pages, telling the buyer everything from sweetness levels to flavour notes.

The Whisky Exchange UX

Amazon

There are a hundred tips you could take from Amazon’s website, but one thing I really like is the way it sorts its reviews.

The reviews themselves are rated as being helpful or unhelpful, and then ranked in order of helpfulness.

This is useful to customers because it filters out the useless information and lets them see the most relevant and helpful reviews immediately, with no effort required.

Amazon UX

It’s worth mentioning Amazon’s ‘1-Click’ ordering button, which is something I personally use a lot. Once you’ve input your payment and shipping details you can make purchases with a single click of your mouse.

This ultimately makes customers’ lives easier and considerably shortens the distance to the checkout page so there is less chance of basket abandonment.

Amazon UX

12 Instagram accounts to follow for UX and UI inspiration 

Farmdrop

Farmdrop’s homepage uses eye-catching imagery and simple copy that immediately tells you what the site is for.

There are only two options for the user at this stage: explore the shop or find out more. This provides the customer with a straightforward journey and guides them towards the purchasing stage.

Farmdrop UX

When you click on the ‘find out more’ button the page scrolls down to a nicely illustrated explanation of what Farmdrop actually does. Again, there are two options: go to the shop or find out more.

Farmdrop’s approach is very clever here. Some people just want to get in and buy something, whereas some people appreciate details. Farmdrop caters for both groups here.

Farmdrop UX

Asos

Buying jeans that fit properly can be a nightmare, particularly online when you can’t try them on.

Asos has got around this in its jeans section, providing really clear images of the different types of jeans and how they look. There’s even a video explanation from an Asos stylist.

This type of detailed information makes the buying decision much easier for the consumer, so they are likely to feel more confident completing their purchase.

Asos UX

Vertty

This site only sells one product, but the UX is fantastic.

Vertty keeps things very sleek and straightforward, letting you flick between all the different colour options and showing you all the key information when you hover your mouse over the product.

This type of site is effective because it focuses on the product and avoids unnecessary distractions, so the customer is exactly where you want them to be.

Vertty UX

I also love the page that appears when you click on one of the towels. You get a nice image showing what the towel would look like on the beach, and the background colour changes depending on which product you select.

Vertty UX

Mulberry

I’ve included Mulberry because of its simplicity. Gigantic product images and easy navigation make this site a pleasure to use.

Mulberry UX

Oliver Bonas

Oliver Bonas has a brilliant personalisation section on its site. The imagery is crystal clear and the options on the right are straightforward and easy to use.

Another nice touch is that you can view lifestyle shots of the necklace, so the customer can see what the jewellery looks like when worn.

Oliver Bonas UX

Bellroy

I’ve included Bellroy for its use of video on its homepage. In each group of images there is a short video explaining all the features of the product.

Apart from the videos themselves being really nicely put together, this type of content appeals to certain people and lets consumers see the product in a different light and ultimately makes the purchasing decision easier.

Bellroy UX

Another feature I like is the navigation bar at the top of the product pages. You can choose between general lifestyle categories such as ‘every day’ or ‘for travel’ to get product types.

This is helpful for customers because they can very quickly get to what they want without having to know much about Bellroy’s products beforehand.

Bellroy UX

Considering colour blindness in UX design (with five examples) 

Apple

Apple may be an obvious choice for site design and UX, but I particularly like the 360 view option on its products.

Unlike some other sites there’s no need to drag the image around. All you have to do is hit play and watch it go.

Effectively this is the same as providing multiple stills from different angles, but presented in a way that makes it easier for the consumer.

Apple UX

Dollar shave club

I really like the product selection page on this site. You get a choice of three blades, with all the basic information you need.

Dollar Shave Club UX

If you click ‘learn more’ you get even more product information and multiple images from different angles, presented in a simple and stylish way.

Dollar Shave Club UX

Hardgraft

I’ve chosen this for the product selection page. It’s completely image-based in a simple grid format.

For a fashion and lifestyle brand this is perfect, because the way the products look is the customer’s main concern. The grid format also makes it ridiculously easy to navigate through the products.

Hardgraft UX

AO

The first thing to note about AO’s UX is the amount of information on its product pages.

There are a huge number of images from every angle you can think of, along with some helpful video guides, making it really easy for the buyer to know what they’re getting.

AO UX

I also have to mention the reviews section on this site. It is incredibly detailed, with ratings under six different relevant sections, and customers can list pros and cons along with their full review.

All of this is key to helping buyers feel more confident making a large purchase online.

AO UX

Argos

One thing Argos has always done well, ever since the days of the Laminated Book of Dreams, is provide user-friendly buying guides for its customers.

Argos has always had to do this because even if you buy in-store you usually can’t see what you’re buying before you’ve paid for it. So buying guides have always been a way for Argos to help customers make the right decision.

Argos UX

The Q&A section on the Argos product pages is also a great feature, adding user-generated content to give the buyer useful information that might have been missed elsewhere.

Argos UX

Hunter

One thing I really like on the Hunter product pages is the fact you can scroll through the product images using your mouse wheel.

It’s a minor touch but it’s little things like this that make a website generally more of a pleasure to use, which means customers are more likely to bother making their way to the checkout.

Hunter UX

Conclusion: make people’s decisions easier

Never mind ‘innovative’ web design, the thing that people really want is helpful information.

Speaking as a relatively indecisive consumer myself, I always appreciate ecommerce sites on which there is enough information for me to make a fully informed buying decision.

12 tiny UX elements that can make a difference