The product page on your ecommerce site is where people decide on whether they’re going to purchase the product or not. More often than not, ecommerce ux best practices are ignored on product pages, giving your users a negative ecommerce User Experience and causing people to abandon the site.
To ensure your website visitors don’t bail, we’ve written a ecommerce ux best practice guide on the 4 essential elements of high performing e-commerce pages (below) to ensure your add to basket button doesn’t just get more clicks, it gets worn out!
The 3 Purchase Stages – What are people thinking when they head to your product pages?
Understanding the decision making stage users are at is vital in helping your users. Sometimes users are ready to buy, and sometimes they’re not.
Consider the 3 main purchase stages that your users may be at:
- Just taking a look for future purchasing
Some users are just browsing products, with no intent to buy
- I need this product, and I’m ready to buy now
Other users go straight to the product and are ready to purchase
- I don’t know much, but I know I need a product like this
And the remaining users know absolutely nothing about the product and need to understand the entire product category as a whole.
This decision making process means that the product page is a tricky thing to get right. Too much information and you stop the immediate ‘I-want-it-now’ user to take action. Too little information may mean the ‘casual browser’ may not come back.
The product page is the centre piece of your ecommerce site, and there are a wide number of page elements that you need to get right. According to Baymard Institute just 18% of e-commerce sites have an overall “acceptable” or “good” product page UX performance. Which means 82% have a poor UX.
82% of the world’s ecommerce sites have a poor product page experience
If you’re one of those 82% of ecommerce sites, do not fret, you can experience higher conversion rates. Begin with your product page, the centre piece to your ecommerce store.
The product page, the centre piece is ultimately where your site visitors will decide whether or not they buy from.
What are the 4 essential product page elements required for the the highest conversion rates?
There’s no one ideal design. However, there are tried and tested elements, which when utilised, can increase your conversion rate by a factor of 10 (at least).
In this article I explain 4 of the most vital areas you should be adding, tweaking and testing regularly to help more people buy your products.
- The Buy Area
- Product Images
- Product Descriptions
- Shipping & Returns
Also included are examples from leading e-commerce sites to inspire and help you when improving your ecommerce product page design.
1. The Buy Area
The buy area is the design and position of the following elements:
- ‘Add to Cart’ button
- Prices & discounts
- ‘Out of stock’
- ‘Save to wishlist’
- Shipping & Returns
‘Add to Cart’ button
Keep your cart icon the same on buttons and the cart itself
If you mark your cart with an icon such as the ever popular basket icon, use the same icon for your “add to cart” button. Mixed symbols makes your site messy and less intuitive.
Use ‘Add to Cart’ not ‘Buy now’
Button text – use ‘Add to Cart’ rather than ‘Buy now’. ‘Add to cart’ manages user expectations and tells the user what’s going to happen when they hit the button. Whereas ‘Buy now’ suggests that they’ll get taken straight to the checkout and buy immediately – they may not be ready for this yet.
A strong contrasting background colour is vital
Colour – use a background colour on your button that contrasts with your design. Blue, orange, red, green and black are common colours.
Using contrast takes advantage of the principle known as the Isolation Effect (discovered in 1933 by the German psychologist Hedwig Von Restorff), in which people see distinctive items (those isolated from a series) more than similar ones.
By using contrasting colours for your ‘Add to Cart’ button, you make this primary call to action quick and easy to find.
Prices and discounts
A bold price underneath the title
The price on your product page is ‘the’ key piece of information (obvs), so feature it below the product title, make it bold, make it prominent.
Pro tip: repeat the price just above the ‘Add to cart’ button, this quickly reminds users of the price and doesn’t divert them from the button you want them to press.
Discounted pricing – new price, old price, and a discount all included
If you have a discounted price, show the original price directly next to the discounted price.
But make it very, very clear to your users what discount is offered. Notice in this example (below) from Joybird that the user can see the price she’ll pay, the regular price and even the amount of discount she’s being offered.
Your users want to feel like they’re “getting a deal” when buying a discounted product, so show them exactly how much they’re saving.
‘Out of stock’
Are your items completely out of stock, or temporarily out of stock? If it’s completely out of stock and you can no longer ell the product, redirect your users to an
However, if your product is temporarily out of stock don’t lose out on a sale and prevent people from buying a product from you.
Just because your product isn’t in stock right now, doesn’t mean people won’t buy it.
According to Baymard:
“If customers can’t buy your product(s) because they’re ‘out of stock’, 30% will abandon your store to look for the product elsewhere”
The solution: Allow your users to purchase temporarily ‘out of stock’ products by increasing the delivery time.
- Tell your users that the product is temporarily out of stock, and that you’ll ship it when it’s available.
- Plus, offer alternative products which are in stock.
These 2 options will ensure your customer will not just head off to a competitors site, and helps them to buy from you.
P.s. Don’t offer the ‘Email me when in stock’ button, unless you have a really unique product your users will head to your competition to get what they want.
Save to wishlist
Do customers save products to a wishlist? Yes, but only if it’s easy.
Firstly, lets explain the wish list “Wish lists provide an easy way for shoppers to organize the products they want, making it unnecessary to use the shopping basket for quick recall.” – The Good
Don’t block access to a wishlist with unnecesary login walls
Wish lists are commonly seen on ecommerce sites, but what’s also common is the need to setup an account to even start creating a wish list. Asking people to setup an account, just to create a wish list can make the process hard. and therefore your users may not use the feature at all or worse opt to just adding items to their basket.
Why is it bad for your users to just add items to a basket instead of creating a wish list?
Because your basket abandonment rate may hit the roof, giving you false basket abaondonment rates and skewing your website analytics.
Ensuring your wish list isn’t blocked by a login wall will help your users take advantage of the wish list feature.
Make your wishlists discoverable and consieder changing the name to ‘Favourites’
In their article ‘Shopping Cart or Wishlist? Saving Products for Later in Ecommerce’ Norman Nielsen group discovered that changing the name of a wish list to Favourites or even My List removed the negative conatations of having to signup to use the feature. Therfore, more people tended to use the wishlist functionality when it was named differently.
Can your users even find the wishlist feature?
Make sure your add to wishlist or add to favourites buttons/links are super easy to find. Placing them in hard to see or hard-to-find areas will likely mean they’re never used at all.
John Lewis offer a very discoverable wishlist button, directly under add to basket, see the example below.
Shipping & Returns
When considering a purchase, your users need to be able to calculate the entire price of the product, including shipping.
If your users can’t quickly estimate a product price with shipping within the product page, they may not wait until they get to the basket or checkout to find out.
Next day and standard delivery
Thanks to the rise of Amazon, users expectation is that they can get their products the very next day. So, be sure to tell your users that you offer next day. You don’t necessarily have to tell them the price of next day at this stage, but just giving them the expectation will reassure them that they can get the product quickly.
People will also want the standard delivery option, as most users will be willing to wait for their products.
When can I expect my item?
As well as delivery options and prices, you should also give your users a timeframe.
For example, ‘Order within the next 2 hours and get it tomorrow’.
Telling users when to expect their delivery will answer an important and immediate question they may have. The more questions you answer on the product page, the more likely it is that your ‘Add to cart’ buttons will get more taps.
Coming up in Part 2
Find out how to design a high performing imagery gallery for product pages and create a richer and more engaging shopping experience for your site visitors and ultimately more sales.
Further reading and references:
References in this 4 part series on ecommerce Product Page best practices.