eCommerce usability: the ultimate guide

eCommerce usability
The ultimate guide

eCommerce usability: the ultimate guide

Usability is an integral part of holistic SEO. It influences bounce rate, time on page and conversion rate, just to name a few. A lot of these metrics affect your website’s SEO. Optimizing usability is essential for all sites, but even more for eCommerce sites.

Apart from user-testing, you can optimize online shops by looking at best practices. See how these work on your website and improve where needed. In this ultimate guide for eCommerce websites, we’ll take you through that testing process. We’ll talk about all the things you need to address to give your visitor the best experience possible.

In short, this usability guide for online shops will tell you all about: 

Improve the sharing experience of your products on social media with the Yoast WooCommerce plugin! »

Yoast WooCommerce SEO plugin Info

That’ll cover most if not all of your visitor’s on-site shopping experience. Let’s dive right into it!

Online store homepage usability 101

Have you ever looked closely at the homepage of your online shop? Chances are you just went with the WooCommerce theme that your designer presented and implemented the options it had. While most of these themes are nicely designed and indeed set up with the user in mind, that might not be the best practice for your target audience.

Focus on your target audience

Before setting up a design, you need to check what specifics your target audience has. Are these people looking for the best price, or do they want to read a dozen reviews before any purchase? Are there cultural differences you need to take into account? Things like that determine the setup or layout of your shop’s homepage. Do you need to focus on sale items? Are you addressing a particular niche? Make that clear from the start.

If one of the pillars of your mission is to provide the best price possible, the sales banner is probably the most prominent item on your homepage. But, if you are selling high-quality products that people are willing to pay a bit more for, sentiment and emotion will be your focus. You could use larger images and focus on core product aspects.

Homepage call-to-action

On your homepage, your job is to guide the visitor to your products. The homepage of your online store isn’t per se set up with SEO in mind but focuses on the user instead. That also means you’ll have to create a killer call-to-action on that homepage. Here are some tips to keep in mind when setting up that call-to-action:

  • Make sure it stands out from the design. Use a different color or button shape.
  • Make sure it looks like a button. I wouldn’t recommend so-called ghost buttons.
  • Use active text, and that doesn’t mean ‘Submit’ but rather a variation of ‘buy our stuff’.
  • Use enough whitespace around it, or: reduce clutter.
  • Using a hero image is popular these days and for a good reason. It sets a mood.

After welcoming your visitor to your website, you can guide them to where you make your money: the product pages. Before we address these, let’s see how to optimize internal search, and category/landing pages!

Want to optimize your WooCommerce shop for local shopping? You need Local SEO for WooCommerce! »

Local SEO for WooCommerce Info

Internal search

Internal search is the most important navigational option for your online shop. You should optimize it to the max. You’ll have noticed that the larger brands and online shops all focus a lot on their internal search. The reason is simple: you will buy their stuff if you can find the product you are looking for.

Next to adding focus to that internal search option, you need to make sure that your search result pages look focused and show a great overview. Next to the products name and image, you want to show the price and even an Add to Cart button. For instance, if you have a shop selling Bluetooth speakers, a comparison option will come in handy.

Filter options

After the search query, online clothing shops will allow for filtering by size, gender, color, the lot. Filtering options like these, or sorting by price or availability, will help your visitor to find the desired product as soon as possible. If you’d like to read even more about this and see some examples, I recommend reading my post Enhance online shopping with eCommerce filters.

Category page optimization

Your category pages might be even more important than your product pages. They will give the visitor the option to choose and compare, much like your internal search result pages. Your shop category page should be considered a regular page for SEO, but is so much more when it comes to usability.

Here are some of the things you need to keep in mind:

  • Make sure the page has a great intro. It’s the glue that holds your products together and the main reason the potential buyer ended up here. Even if they scroll right to the product listings, they’ll appreciate the extra information (Google does).
  • List all other categories as well, or at least make them accessible via a drop-down, especially when you have a lot of categories like Amazon. It makes more sense to make them available than listing them all. But if your shop only has ten categories, list these (in a sidebar/footer/menu).
  • Product listings need a proper call-to-action, don’t hide that one. Add a button.
  • The product image in the listing will convince the visitor to click, buy or compare an item. Use great images that display the product well.
  • Optimize the product title, for instance by including the SKU as well. Next to SEO benefits, people searching for specific products – like that one LEGO box – will thank you for it.
  • State if a product is available. No greater disappointment than finally finding the desired product only to find out it’s sold out in the shopping cart. Add a notice to the category page listing already.

Other pages worth optimizing are your landing pages.

Landing page optimization

A landing page is a page where your visitors end up from other sources, such as search engines or social media. It’s a page on your online shop that you optimize to evoke a particular reaction from the visitor, such as buying a specific product.

Focus on one product or product bundle and optimize that page to guide your visitor to the purchase. In other words, welcome them. Make sure the visitor feels safe to pay, for instance by adding security seals and safety signs. Add social proof in the form of testimonials, so your visitor will understand why your product is so good, and they need it.

On your landing page, you’ll like to deliver the message of the page as well as you can. Using headings and images for this is something we strongly recommend. Particularly for buyers scanning your page, these help a lot. Make sure these deliver the right message to a visitor.

If you’d like to read more about landing pages, be sure to read our article Landing pages and why they matter. It originates from 2014 already but is still very much valid and besides that, we recently updated it.

At last, your visitor will arrive on your product page.

Product page optimization

Generally speaking, make your product page as usable as possible. Product pages need to be optimized for SEO, by using data and for instance OpenGraph text. Read more about that in our article on product page SEO. But when your visitor gets to that page, you should try your best to convince the visitor to buy that particular product on your website.

Get the Local Premium bundle and fully optimize your local site! »

Yoast Local Premium bundle Info

Best practices

Let’s go over some best practices for that product page:

  • Create scarcity: only a limited number of products available. But be honest about the numbers.
  • Add ratings and reviews. Social proof helps in comparisons and creates trust.
  • In stock or not? Be clear about that, as it will help manage visitor’s expectations.
  • Add to cart AND add to wishlist. People might not want to purchase right away because of budget or other reasons.
  • Multiple product images. As the images replace picking up the product in a store and looking at it from all angles, please add more than one image.
  • Offer product bundles. Buy this and that, as these products belong together. You might offer a discount for that bundle as a sales promotion.
  • Free shipping, or free shipping on any orders over a certain amount. It’s a nice gesture and a sales argument.
  • Related products, people that bought this product also bought, etcetera. Show me more; I might need to spend more money.
  • Show people using the product (as a part of your product images). People will find it easier to relate to that and see why they need your product.


Besides all this, your product page, like your homepage, needs an excellent call-to-action. That will in most cases be the Add to Cart button. Limit all distractions, make the text actionable, use the right color. And if possible, add a review somewhere near that button. More on calls-to-action here, and more on button design here.

More details and real-life examples in our product page UX article. If you like more insights on creating trust, please read this article we did on the matter: 7 ways to increase sales by creating trust. You also find a good starting point for more insights on testimonials and reviews. If you’d like some extra reading on discounts, check The psychology of discounts.

From your product page, people and products end up in your shopping cart, which is part of your checkout process.

Checkout page optimization

Shopping cart abandonment

There could be more than one reason that people leave your website without buying anything. They might even fill up their cart, only to abandon it. There is a reason for that. In our post Shopping cart abandonment, we go over some things that might lead to this, like:

  • “Wanted to do more research.”
  • “Found it cheaper elsewhere.”
  • “Wanted to wait for it to go on sale.”

For mobile carts, there are even more reasons, like loading speed and poor design. Investigating this will make your online shop better and can increase your number of sales.

You are about to close the deal: the customer wants to buy your product, so let’s gently guide him to our payment page. The first thing we need is to tell him where in the checkout process we are, so be sure to add a progress bar.

At the start of the checkout process, we serve the customer an overview of the products he wants to buy. This is, of course, the same as the cart overview. There are a couple of elements that are required here:

  • Product image, even a small one will confirm to the soon-to-be customer that the right image is in the cart.
  • Prices, not just the price of one article, but also the number of items and the total price.
  • Additional costs, like shipping costs. No extra surprise costs after the cart overview.
  • Payment options, just to let the customer know he will be able to pay.
  • Security signs, like the green address bar seal. Plus perhaps extra logos like Trustpilot right below the cart overview.

Guest purchase

Furthermore, I’d also make sure a guest purchase is possible. Having to register for a one-time sale is a deal-breaker to me.

Short forms

If you need to ask more than an email address, make sure to make the forms as short as possible. Think about useful things like a checkbox to confirm that the delivery and invoice address are the same.


Make payment easy by choosing the right payment provider and offering the right payment options. Which ones differ from shop to shop.

Finally, after that optimized shopping process, a happy customer will leave your online shop. Now make sure to keep that customer happy. There are some things you can do to help with that. Find more tips on that in our article on checkout page UX!

Conclusion: eCommerce usability is a trade of its own

Don’t trust your theme or eCommerce platform to fill in the blanks for you. Put some real effort into optimizing the usability of your eCommerce website. In the end, a better user experience will bring the SEO and conversion of your online store to the next level as well.

Read more: ‘eCommerce SEO checklist’ »

12 Responses to eCommerce usability: the ultimate guide

  1. Daisy Lucy
    By Daisy Lucy on 8 August, 2016

    Nice Blog..!!

    Thanks for sharing great information for eCommerce website.

    Product page optimization and landing page optimization little difficult for eCommerce website. I have provided all types of SEO services for eCommerce website and I have followed all things you mention your blog.

  2. Boris
    By Boris on 8 August, 2016

    Nice post. What do you recommend as a CTA for a category page to take a user to a product page? I am experimenting with “Learn More” – over “Buy Now”


    • Armin
      By Armin on 9 August, 2016

      “Buy Now” would be the very end of your funnel, so I’d suggest a “Learn more”, More Info, Check it out, etc. might be more useful here. Maybe it’ll work worse, but it’d be more correct. It’d be best to check the behavior in your Google Analytics.

      • Michiel Heijmans
        By Michiel Heijmans on 16 August, 2016

        Makes sense, indeed, Armin. And yes, I would test, tweak and retest that :)

  3. Nathan Payne
    By Nathan Payne on 7 August, 2016

    Recently been doing some CRO for a website which sell technology products. We noticed that conversion were consistent which was great, but they were on the lower side.

    There were various things I had noted as things to improve UX but decided to install hotjar first to get a little more insight into how the website was used in the wild.

    With the help of a little more info we have essentially tripled the conversion rate in less than a month. The changes that made the biggest difference were already on the radar but hotjar essentially helped us find a few UX issues but also helped us define the priority of what we wanted to change and split test.

    I have been in SEO for over a decade but CRO is something that I find so damn exciting and interesting!

  4. Mike
    By Mike on 7 August, 2016

    Impressive article, especially on the part “Checkout page optimization”. So far I have been using it on woocommerce on wordpress, and it is working great.

  5. Jeroen
    By Jeroen on 6 August, 2016

    Nice blog. Is there a real difference between category pages and landing pages? When you optimize category pages they become the landing pages for users from Google.

  6. Armin
    By Armin on 4 August, 2016

    This depends on many aspects: amount of products, what kind of products (physical / digital /…), legal requirements (many are only good for US), payment options, technical knowledge of shop owner,..
    the list is long.
    A standard solution for WordPress would be WooCommerce. Yoast also has a nice SEO-plugin for WooCommerce shops.

    • Maulik
      By Maulik on 5 August, 2016

      Hello Admin,

      Thanks for your suggestion, I asked to my many friends for the same and the suggested for the WordPress.

      Thanks for your time mate :)

      • Armin
        By Armin on 5 August, 2016

        No problem! :-)

  7. Maulik
    By Maulik on 4 August, 2016

    Great article.!!

    Could you please suggest which platform is good for eCommerce website?

    Thanks in Advance.

Check out our must read articles about eCommerce