Usability is an important part of holistic SEO. It influences bounce rate, time on page and conversion rate, just to name a few. A lot of these metrics have an effect on your website’s SEO. Optimizing usability is important 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:
Webshop homepage usability 101 Internal search Category page optimization Landing page optimization Product page optimization Checkout page optimization
That’ll cover most if not all of your visitor’s on-site shopping experience. Let’s dive right into it!
Webshop 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 setup 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.
On your homepage, your job is to guide the visitor to your products. The homepage of your webshop 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!
Order a website review and get a plugin of your choice for free. We’ll even configure it for you
$ 599 – Buy now »
More info »
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.
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 Internal search for webshops: an essential asset .
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.
Clearly 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 webshop 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 schema.org 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.
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 related 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 a number of 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 webshop 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.
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.
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 differs 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 in optimizing the usability of your eCommerce website. In the end, a better user experience will bring the SEO and conversion of your webshop to the next level as well.