ecommerce best practice guide (subscriber only)

Most of the features help to usher the user along towards finding the right product and then purchasing it.

The examples come from some of my favourite ecommerce sites: Airbnb, AO.com, Argos, ASOS, Barnes & Noble, Best Buy, Booking.com, Debenhams, Everlane, Lush, Nike, Rentalcars, RS Components, Schuh, Size, Tesco, The Trainline and Toys R Us.

You can use the links below to jump between sections:

Homepage

1. Best Buy – local store hours in header

Best Buy uses a store icon in its header and tells me where my closest shop is located, as well as its opening hours for the day. This is a great idea for a store that sells considered purchase electronics and white goods, where the customer may want to see the item on display before they make a purchase.

best buy header

2. AO.com – category slider

This may well be my favourite bit of UX on any website anywhere. On AO.com’s homepage I don’t have to scroll down to find a content block which corresponds to televisions, nor do I need to open the hamburger menu and look around, I can simply use the gorgeously chunky category slider smack bang in the middle of the page.

ao.com mobile categories on home page

3. Booking.com – sticky search widget

For an online travel agent, by far and away the most important part of the homepage is the search widget which users will use to define their vacation and find aggregated results. This search box needs to be visible at all times.

Booking.com uses a sticky search widget, which stays pinned to the top of the homepage as you scroll, meaning users can have a look at content below the fold without forgetting the point of the exercise.

booking.com sticky search widget

4. AO.com – track order button in header

A great customer experience is what makes AO.com stand out, and that extends far beyond the sale to a great delivery service, product warranties and the like.

This much should be obvious by the AO.com header on both mobile and desktop, with a track order button being given as much prominence as the basket and the menu. The visibility of this button will reduce call volumes and keep customer’s satisfied.

ao.com track order

5. Rentalcars – sign-in prompt

Rentalcars is in the same group as Booking.com, so you won’t be surprised to learn it’s a master in the art of persuasion on an ecommerce page.

Sign-in is all important to ensure Rentalcars knows customer email addresses and can add them to the sausage factory of marketing automation / personalisation. Accordingly, I get a ‘Great to see you!’ message flash up with call to action to sign in. The promise of ‘exclusive deals & offers’ ought to gently push me along, too.

rentalcars login incentive

6. Rentalcars – booking incentive at sign-in

And to doubly make sure my momentum is carried through, once I click on Rentalcars’s sign-in button, I’m given another incentive above the email and password form fields: “This November, 5 lucky holders will win a free car rental.”

All I have to do for a chance to win is sign in and book.

rentalcars login incentive

7. Argos – value proposition banner

Argos has the best banner in all of retail (IMHO) when it comes to explaining delivery, pickup and credit options (a big part of the Argos proposition). I can see same-day delivery pricing, in-store collection pricing and timeframe, and Argos card APR. Despite the smaller screen size, these messages show on mobile, too, gently fading in and out.

This banner is vital for those customers who may not know that Argos offers such speedy fulfillment or flexible payment.

argos delivery info

8. Lush – immersive header menu

A header menu can be a confusing thing. To allow users to concentrate on the options available in the menu, retailers such as Lush use a full-page menu which takes over pretty much the whole screen. I love this signature black and white design, and the vertical category lists. No messing about.

lush immersive header menu

9. Argos – Eye-catching promotional categories

I love the way Argos draws attention to its seasonal and popular products with these colour swatches that sit above the relatively muted mega-menu. A great way to suck users in throughout the entire site, without relying on them landing on the homepage and clicking a content block further down the page.

argos menu buttons

Search

10. Rentalcars – informative loading

Waiting is horrible. Rentalcars uses this clever multi-logo loading graphic, which lessens the user’s frustration as they can watch as progress is made sourcing all of the different quotes they need. Who knows if the timing of the little green ticks actually correspond with what is happening behind the scenes?

rentalcars loading

11. AO.com – popular product thumbnails in search

This is nothing particularly new to ecommerce, the use of suggested search which updates as I type. However, the inclusion of popular products, ‘best buys’ in this case, which have a clear price and also update as my search term changes is a nice touch. This epitomises AO.com – best practice in action.

best buys in search ao.com

12. RS Components – categorised search suggestions

For product search buffs, RS Components is the retailer that will really get you excited. That’s because the B2B supplier has an enormous catalogue of very complicated products which creates obvious difficulties in search.

Here’s one way RS seeks to help the customer. It separates my search results (in this case for ‘LED’) into product categories, brands and even part numbers (some customers will know the number of a part they want). There are also top products on display here, much like the AO.com example above.

rs varied search

13. RS Components – popular category results

Here’s another way RS helps to narrow down my search results. Once I hit return on my ‘LED’ search term, I’m told that there are more than 25,000 results in 200 categories.

In order to prevent me from trawling so many products, RS prompts me to choose from a popular category, offering me a smaller selection of 10. I can click the button to ‘go to products’ if I insist on wading through everything.

rs popular categories in search

14. Airbnb – search as homepage

I thought I should include something esoteric, so here’s Airbnb’s homepage, which like Google is simply a search bar. Yes, there is some content beneath the fold, and a few little links in the top right, but this homepage sets the tone for Airbnb’s whole experience and brand. It’s about dreaming of where you want to go.

Okay, perhaps not that transferable to ecommerce more broadly, but still worthy of appreciation.

airbnb search

15. Airbnb – search with embedded menu

I’m not sure I’ve seen this done anywhere else. Correct me in the comments if I’m missing an obvious example. Before I type anything into Airbnb’s search box, I get a drop down which in effect contains the header menu that the homepage lacks – there are buttons to explore different products (homes, experiences and restaurants), as well as a handy list of my recent searches.

These explore buttons are mirrored further down the page in content blocks, with Airbnb intent on giving the user more than one path to reach the content they need.

airbnb search suggestions

16. Debenhams – search suggestions and results as you type

There’s one thing to note here which the previous AO.com example didn’t include, and that’s the use of product frequency in suggested search terms. This makes the user aware of just how many results they’ll discover when they click through any given term.

This is standard practice now and retailers such as ASOS have done this for a while. The suggestions themselves are usually based on aggregated user behaviour and optimised algorithmically.

debenhams search

17. AO.com – product selection guide

This isn’t strictly search as we know it, in that I am not entering a search term, but it serves a very similar function (or somewhere between search and faceted navigation).

AO.com uses a dynamic product guide on its desktop homepage to help customers find the product that’s right for them. I’m asked a simple question about the product I need (such as screen size). As I state a preference for brand and set a price range, the number of product matches is whittled down and I’m left with a smaller selection to choose from. Great for honing purchase intent when users are bamboozled by too many options.

ao product guide

Product listings page

18. Argos – same-day delivery in faceted nav

Late buying that birthday present? Argos and its faceted navigation allows you to filter only those products that are available for same-day delivery or faster in-store collection. Life saver.

argos faceted nav

19. Best Buy – local store pick-up filter (prominent on mobile)

Best Buy’s faceted navigation gives lots of options, but on mobile only one is surfaced outside of the filter menu and ready for me to select with one tap. Yep, it’s the ‘pick up today’ filter, which is customised to my nearest store. By tapping this when I’m on the go, I can quickly see which products I can reserve near me. Vital for those in a rush.

pick up today best buy

20. Rentalcars – sticky filter

A nice way on mobile to allow the user (and their thumb) to quickly reach the filter results button – Rentalcars uses a sticky button on the bottom left, ever-present as I scroll through.

rentalcars sticky filter

21. Tesco – ‘Rest of shelf’ button

When shopping for groceries online, finding products is a pain because users often have to use a many-branched menu, clicking through many categories before they find the product they want. Of course, there is the search bar and usually a list of previous purchases, but there should really be a more elegant and visual solution.

Tesco has just that on its newly updated website. I can scroll through larger catogories (such as the entirety of ‘fresh food’) and when I see something vaguely familiar I can click ‘rest of shelf’ and view products that live on the same shelf in-store.

This small feature is a wonderful way of linking offline shopping behaviours with online behaviour. See the example below with milk.

rest of shelf

22. Best Buy – ‘notify me’

Best Buy’s product listings sometimes contain products currently out of stock, such as this Apple Watch. Rather than disappoint the customer, the retailer changes its ‘add to cart’ button to a ‘notify me’ call to action. Customers can then enter they email address and wait for Best Buy to let them know when they are available.

notify me best buy notify me best buy

23. Booking.com – faceted navigation tool-tip

When I saw this tool-tip on Booking.com I wondered why I hadn’t seen similar examples before. After all, we mustn’t assume that there’s such a thing as intuitive web design. New users might need an extra prompt to narrow down their hundreds of search results.

The tool-tip says ‘Give us your must-haves. Filters help our customers find the perfect place to stay. Click the things that are most important to you and we’ll show you what we’ve got.’

booking.com faceted nav guidance

24. Booking.com – real-time social proof

More from the ‘chatty’ UI that is Booking.com. On mobile my product listings page told me what percentage of rooms on my selected dates had been reserved along with how many other people were viewing this search.

I must say, the little red pie chart of reserved rooms was quite the prompt to get on and book.

booking.com percentage reserved

35. Argos – add to cart from product listings page

I love the way Argos product listings pages allow you to add each product to your cart with one tap of this button, without having to click into the product details page. Not every retailer does this.

argos add to trolley

26. Size – quick-select faceted navigation

Here’s a feature that is creeping into more and more product listings pages. Rather than having to use the fiddly faceted navigation on the left hand side (which often involves small checkboxes and little scrollers), I can use the popular facets surfaced at the top of the page.

These are bigger buttons allowing me to narrow down to a particular size or a price ceiling. Let’s be honest, these are the two things shoe browsers care about most.

size faceted nav

27. Nike – illustrated faceted navigation

On a similar theme to the Size example above, Nike understands that some models of its trainers are iconic enough to merit an image and a button at the top of product listings pages.

In the shot below, I’ve selected ‘lifestyle’ shoes in the site header menu, which has taken me to this listings page, where I can pick an Air Max from the top menu if I want to focus only on these. It’s a useful addition to the traditional faceted navigation and a lesson for all sports brands selling direct to consumer.

nike browse by shoe

28. AO.com – delivery date in product listings

There’s plenty of information in AO.com’s product listings, and none as important for some users as a delivery date. Particularly in the run up to Christmas, shoppers want to know that their fridge/TV/washing machine will turn up on time.

The lorry icon and a delivery date help to reassure the customer that AO.com is the right choice for prompt delivery.

ao.com delivery on listings page

29. Booking.com – ‘in high demand / latest booking’ hover effect

One of many examples of social proof that Booking.com uses to give the user some pep. A red warning tells me when a listing is in high demand and how many times it was viewed in the last 24 hours. If I scroll over this information I’m also told when the latest booking at this hotel was made. Persuasive stuff.

booking.com high demand rollover

30. Lush – ‘Leaving soon’ stickers

A simple touch here, but one done well. Lush adds characteristic black and white stickers saying ‘leaving soon’ to its seasonal products such as halloween soaps. These messages can help to add a sense of urgency to the repeat shopper who may be fond of a particular seasonal product.

lush leaving soon

31. Size – product image hover effect

Hover effects on product listing pages have been around for a number of years, but that doesn’t mean they are always used effectively. In this case, I love what Size does with the hover state.

Not only am I offered different angles to view the product from, the fact they are portrayed sat atop their box almost feels like a little psychological ploy to make the user imagine unboxing the product at home.

size hover states product listings

32. Everlane – detail hover effect

I’m also a fan of hover states on apparel ecommerce sites which do something a bit different. Everlane sells quality clothing and so takes care to show a product detail when I hover over the full image. Yes, there are no model shots here, which some may see as an issue, but I like how this photography puts emphasis on material and shape, rather than an overall look.

everlane hover state

33. RS Components – list view or grid view

RS Components has so many different types of products that one view of product listings won’t suit everything. So, for more complex products, users can select ‘list view’, allowing them to sort by a number of different criteria.

rs grid view or list view

For quicker scanning, users can switch to the more common grid view that one would see in ecommerce.

rs grid view or list view

34. AO.com – customer counter

For online pureplays like AO.com, convincing customers to buy something for the first time without experience of a high street store could be a challenge. That’s why the appliances retailer takes the opportunity to display its credentials where it can, including telling users how many customers they have helped.

The shot below is taken from the TV category page, where AO.com states how many people have used their product guide.

ao.com we've helped 1,700,000 people

35. Rentalcars – new booking notification

This may annoy some users, a message that pops up every time a customer in my location books a car. Equally, it does show how popular and likely trustworthy is the site.

rentalcars new booking

36. Rentalcars – product tool-tips

Hiring a car can be an exercise that involves plenty of customer questions and some small print, too. Rentalcars makes sure it gives users as much information as possible on its product listings pages, with tool-tips appearing on pretty much every bit of copy. For example, when I hover over ‘collision damage waiver’, a tip appears saying “If the car’s bodywork gets damaged, the most you’ll pay is the damage excess.”

rentalcars hover states

37. AO.com – curated ‘best products’ landing page

What a simple idea – a page showing AO.com’s best products as picked by AO.com experts. This is a feature that Currys PC World, for example, seems not to provide on its website.

best product landing page

38. Booking.com – green text emphasising ‘risk free’ purchase

Booking.com can appear to be a tad on the bright side with its garish mix of font colours, but they all serve a purpose and have no doubt been thoroughly tested. The one I like best is the use of green text saying “Risk Free” and “FREE cancellation”. This shows the customer at a glance that they can book now and repent at their leisure.

booking.com risk-free booking

39. The Trainline – ‘Cheapest’ sticker

You’re shopping for travel tickets, be it plane, train or coach, and you really want a good listings page and the ability to find the cheapest seat at your convenience. Whilst the world of UK trains isn’t renowned for this kind of transparency, The Trainline does at least use a ‘cheapest’ sticker and a message telling me how many tickets are left at this price.

trainline cheapest price

Product details page

40. AO.com – dynamic price match promise

You may be familiar with this – it’s one of the most famous interactions in ecommerce. Block a product title on AO.com as if you are about to copy and paste to Google and you’ll be shown a price match message encouraging you to call AO.com and tell them if you can find the product cheaper. Ingenious.

ao.com price match

41. Argos – sticky add-to-cart button

Watch as I scroll down an Argos product details page, and the add-to-trolley button sticks to the top of the page, allowing me to throw it into my bag without having to waste precious seconds scrolling back up again.

argos add to cart

42. Best Buy – product “on display at…”

Customers may want to check local store stock, but equally with a considered purchase they may want to know if the product is on display at their nearest store. Best Buy lets the customer know with a message below the product photos. If it’s not on display at your nearest store, you’ll be given the next nearest option.

best buy product on display

43. ASOS – interactive size guide

Too many websites offering boring, large and potentially difficult-to-use sizing charts. Not ASOS, which gives me this lightbox where I can fill in my height and weight (in metric or imperial) and how tight I like my clothes. The tool will then return the sizes right for me – no sifting through data.

asos size guide

44. Debenhams – ‘Pre-Christmas Delivery’ message

Approaching the Christmas rush, Debenhams product details pages have a prominent green message which tells me an item is available for pre-Christmas delivery. Great for encouraging a confident add-to-bag.

debenhams xmas delivery

45. Debenhams – ‘Want it by tomorrow?’ order countdown

Most retailers offering next-day delivery require customers to order before a particular time of the day. Debenhams knows that highlighting this using a countdown timer will encourage indecisive users to purchase sooner rather than later.

debenhams order countdown

46. Lush – hero product video

I’ve long championed Lush (see here and here). One of my favourite features in its website is the use of hero video at the top of product pages. For my money, it puts all competition in the shade with this one authentic use of rich content. It also shows the product in action, so the customer knows what to expect.

gif header product page

47. ASOS – ‘Buy the look’

Here’s another feature that has long been talked about in ecommerce but rarely carried through with the simplicity and success that ASOS has managed here. Yes, there are some products out of stock in this example, but it’s still a feature that squeezes extra value out of stylish product/model photography.

asos product page

asos buy the look

48. Airbnb – reassuring micro-copy

How the tiniest things can just tip the customer in the right direction. Here, Airbnb uses small copy saying “You won’t be charged yet” to encourage customers to click the ‘Request to Book’ button without fear of immediate financial consequences.

airbnb request booking

49. Argos – ‘X others have looked at this….’

A common tactic among retailers and functionality that is available in most ecommerce platforms – dynamic messages appear for a few seconds when I land on a product details page, telling me how many have viewed or bought this item recently or are looking at it right now.

argos others have viewed

50. Debenhams – alternative ‘breadcrumb’

Those customers who haven’t found what they want on a product details page should always been given a quick and easy route back to browsing. This can often be via the main header menu, or by using the breadcrumb trail (e.g. Men – Shirts – Short Sleeve). Debenhams, as shown in the GIF below, also adds some category options, an alternative breadcrumb, if you like, below the product. This is a very helpful feature for customers to delve back in once again.

debenhams breadcrumb trail

51. Booking.com – user review carousel

Reviews are incredibly important for people booking a hotel room. So why not make them hard to miss? Booking.com includes a carousel of reviews inset within the product photography carousel. This way, as you review the photographs you can’t help but notice glowing reviews of service, location and facilities.

booking.com inset customer reviews in photos

52. The Trainline – ‘You’ve found the cheapest ticket’

For some travel sites, it’s important to make customers on listings pages aware of which product is cheapest, but it shouldn’t stop there, a message should be displayed on product pages, too. The Trainline does this nicely with a friendly “Hooray!”.

(Correction: This is actually on the search or product listings page as you can tell because the cheapest price doesn’t match the price below, it corresponds to the ticket above which I would have to scroll up to view. Still, a handy feature nonetheless.)

trainline cheapest price

53. Rentalcars – trip countdown

What better way to instil urgency in the customer looking for a hire car than displaying a timer inexorably counting down until the start of their trip.

rentalcars your trip starts in

54. Rentalcars – ‘Save for later’ email

Rentalcars lets users send themselves an email with all their selected product details, helpful for those who aren’t quite ready to book but don’t want to go through the rigmarole of search all over again.

rentalcar save for later

55. RS Components – warehouse stock counter

Trade buyers may need quite a number of a particular product from RS, so the ‘catalogue’ company provides accurate warehouse stock numbers so customers know if their order can be fulfilled.

rs number in stock

56. Argos – check stock in store

No self-respecting multichannel retailer will miss the opportunity to let customers check their local stock, should they want to purchase in-store or reserve an item.

argos check stock

57. Lush – cross-sell by ingredient

Each product contains an illustrated list of ingredients, some of which have their own ingredients page which users can click through to. Once on an ingredient page, I can see every product that Lush sells which contains said ingredient. A really neat way of bringing educational content back to commerce.

lush ingredient cross-sell

58. Barnes & Noble – send as gift

I had never come across SmartGift before. It’s a service which allows the user to send a gift link whereupon the recipient can accept or exchange online for any same or lower-priced item. The gifter will pay only once the recipient has accepted.

A great tool for no-hassle gifting.

smart gift barnes & noble

59. Rentalcars – ‘bargain’ popup

More persuasion from Rentalcars, this time on mobile featuring a fairly intrusive message but one that tells me I’m saving a heck of a lot of money (compared to average prices at this time of year).

rentalcars deal

60. Schuh – 360-degree product photography

I can choose a set of product images on Schuh if I want, but the default view is this drag-to-spin 360-degree imagery which lets me view the shoe from any angle.

drag to spin imagery

61. Lush – related article

Combining content and commerce is a hot potato. Does it distract the user from purchase? I would argue that for a multichannel brand, the goal is to engage with and educate the consumer as much as possible, placing your brand as the premier destination for shopping and browsing. Lush does this with a related article at the bottom of most product pages, as well as plenty of content on the homepage.

lush related articles

62. Rentalcars – double CTA

I debated whether to include this. Arguably it’s a dark pattern with the customer perhaps clicking to add full protection for £9.98 without actively wanting to (if they’re not paying attention). I’ve included it just to show it goes on, and because for all the moral questions this kind of UX throws up, I’m sure there have been plenty of customers who were glad they unwittingly chose full protection. Complaints on a postcard.

rentalcars two ctas (Dark pattern?)

63. ASOS – model size and fit

Want to know whether clothes will fit right? Size guides are helpful, but so, too, is product photography. Telling customers what height the model is, as well as what size they are wearing can help the customer decide on what size to purchase.

asos model height

64. ASOS – full-screen product imagery

This has been best practice on small mobile screens for a while, but it still impresses me and is one of the most impactful changes a retailer, particularly in apparel, can implement.

asos full page imagery

65. Argos – clever product recommends copy

A simple but elegant bit of copywriting from Argos. The product recommends feature towards the bottom of the product page uses the copy “…or how about these?”, which acknowledges the fact that the customer is likely to buy only one item from this category (coffee machines). The choice of phrasing shows a good understanding of customer mindset during the browsing stage of their journey.

argos how about these

66. Argos – ‘Our lowest price’

A very simple but very persuasive bit of copy on this Argos product details page. “Our Lowest Price” let’s the customer know the retailer has never charged more for this item. Perhaps not a revelatory claim, but psychologically it makes the customer think they’re getting a price that’s unlikely to be better elsewhere.

argos lowest price

67. Best Buy – instructional product photos

Why rely on the customer poring over the product specification to find the vital information they need about a fridge freezer’s dimensions? Best Buy uses instructional content from the product manufacturer in its product photos carousel. This way, customers can see exactly what they need to measure.

best buy instructional product image

68. Best Buy – instructional product video

Best Buy uses instructional videos in the product imagery carousel. In this example, I’m carefully walked through how to measure up, to make sure I don’t buy a fridge that doesn’t fit my kitchen. This type of content is part of the effort to reduce costly product returns and make sure the customer is happy.

best buy product video

69. Debenhams – ‘Hurry, 10 or less left!’ low stock message

Though customers are getting more savvy when it comes to urgency tactics such as ‘one room left’ when browsing hotel aggregators, this tactic can still be very effective in ecommerce when used responsibly. Here, Debenhams tells the consumer when there are 10 or less of a product in stock. If you have a realtime overview of stock levels, why not use it to keep the customer informed.

debenhams hurry box

70. Rentalcars – ‘Don’t lose this saving’ banner

More urgency-inducing messages from Rentalcars. All I want to do now is get this car booked.

today you save - rentalcars

71. Best Buy – prominent product Q&A

Lots of product details pages use question and answers, particularly for technical products, such as electronics or white goods. I particularly like the way Best Buy highlights the Q&A content alongside its average customer review rating, right at the top of the product page. This is key information and can make the difference between sale and no-sale for those customers who are sticklers for finding the perfect product.

best buy q and a

The Q&As themselves can be sorted (defaults to ‘most helpful’) and searched.

best buy product q and a

72. Debenhams – ‘Earn points with this purchase’

A dynamic message under the add-to-bag button on product details pages tells the customer how any points they will pick up if they had a store card or loyalty card. What do points make? That’s right, prizes.

reward points - debenhams

73. The Trainline – price increase warning

It’s worthwhile letting febrile ticket shoppers know that if they wait, prices may increase. The Trainline does this with a pop-up message saying “Advance tickets are likely to increase in price” and to “Look for tickets with ‘limited availability’ or fewer than 9 left”.

trainline price warning

74. Schuh – front-and-centre delivery info

On no other product page did I see delivery information turned into such a virtue as on the Schuh website. It makes sense though, the customer is made aware they can get almost instant fulfillment through Shutl or Click & Collect, they can pay for Sunday delivery or choose a particular day. There are Collect+ and UPS Access Points available, too. This is customer experience that walks the walk.

schuh delivery info on product page

Bag / basket / cart

75. Size – size-select lightbox on add-to-basket

I really like the UX on Size’s site on mobile when I forget to select a size before adding a product to my bag. This lightbox style size-select flashes up and I can quickly tap the size I want.

size size select

76. ASOS – bag time-limit pop-up

Make sure users know how long their chosen item will be held in the bag for. ASOS does this with a little pop-up telling me I’ve bagged it and it’ll be held for an hour.

asos it's in the bag

77. Barnes & Noble – “add $X of eligible items to qualify for free shipping”

The Barnes & Noble cart tells me just how much extra I have to spend to get my order shipped for free. A lovely incentive to buy more books.

eligibility for free shipping barnes and noblee

78. Debenhams & Toys R Us – ‘Your shopping bag qualifies for FREE Standard Delivery’

Don’t leave a customer wary of delivery charges, let them know in the cart/bag, before they get to checkout, that they qualify for free delivery. Debenhams does this with a chunky blue message including a blue tick and the hard-to-miss ‘FREE’.

debenhams add to bag

Toys R Us is even better. The retailer uses its mascot Geoffrey to delivery this free delivery message. A brilliant use of the brand to draw attention to a kew message.

toys r us free delivery

79. ASOS – next-day delivery subscription

Why should it be just Amazon that hooks customers into a subscription to next-day deliver? ASOS offers the service in the bag for £9.95, a great way to please your most loyal of customers.

asos premier delivery

80. AO.com – service up-sell in basket

I love the way AO.com will bundle in lots of services with delivery for those customers who want to eliminate hassle. When buying a TV for example, I’m offered stand installation, old TV removal and unpacking.

added services in checkout ao.com

81. AO.com – complimenting the customer’s taste

The AO.com basket also includes this very simple message telling me I’ve “got great taste” and am “getting one or [their] best offers”. A lovely touch. No reason not to checkout.

ao.com user compliment

82. Lush – full-page add-to-basket message

The whitespace and imagery on the Lush website makes it a joy to browse. Even this simple full-page add-to-basket notification made me feel special.

lush add to basket

83. AO.com – finance and up-front price in add-to-basket

If customers are having second thoughts when they add a big ticket item to their basket, AO.com provides a monthly price in the add-to-basket message. Finance options are shown on product listings pages and product details pages, but it doesn’t hurt to reiterate the option in this add-to-basket message.

ao.com finance in bag

Checkout

84. The Trainline – cute customised thumbnail

Look at this! The houses of parliament in a cute little thumbnail as I pay for my trip to London on The Trainline. I’m already excited about my trip.

trainline destination photo

85. AO.com – anxiety-killer delivery info

“You don’t have to stay in all day because…” – AO.com gets straight to the nub of its excellent delivery service. The information below tells me when I’ll receive a text message, how long my delivey window will be, that I’ll receive a call and that I can track my order any time I want.

ao.com don't stay in all day

86. AO.com – contact number in checkout header

A common sight in the best checkouts, the contact telephone number suddenly appears front and centre in the header menu. Any wavering customers can call to clairfy an issue rather than falling our of the checkout.

phone number in checkout ao.com

87. Barnes & Noble – form field reminders

Another bit of best practice that nevertheless isn’t always implemented. When I click into a form field, it’s title remains, shifting up slightly to let me type. This way I am less likely to make an error.

barnes & noble checkout form

88. AO.com – privacy reassurance

The GDPR has put privacy concerns more firmly on the agenda for many companies. This is only a small feature, but it’s increasingly common to see a promise under a telephone number field that a company will never share customer information.

privacy in checkout - telephone ao.com

89. Lush – checkout progress bar

One of the core tenets of a usable and converting checkout is a clear progress bar. None clearer than Lush’s.

lush checkout trail

90. AO.com – chunky, focused form design

Throughout the AO.com checkout, form fields are chunky and easy to select, with relevant buttons close by and similarly chunky. Compare with Lush above (which isn’t that bad itself).

ao.com chunky checkout

91. Lush – email field validation

Another bit of best practice. Do you validate email addresses with a nice green tick so customers know they have put dots and @s in the right places?

lush email validation

92. Debenhams – firm date and time for click and collect

One of the uncertainties for customers when they use click and collect is whether their item will arrive on time. Some retailers say ‘1-3 working days’, leaving the user waiting for a notification and hoping it will be one rather than three. Debenhams counteracts this unease by very clearly giving the customer a date and time by which their parcel should be ready for collection.

debenhams click and collect

93. Nike – tool-tips

And finally, more tool-tips, this time from Nike. They don’t add startling useful information, but enough to help new or unsure users.

nike tool tips

That’s your lot. Don’t forget to check out our Ecommerce Best Practice Guide. Or take a look at Econsultancy’s fast-track ecommerce training