Website visitors don’t generally have a lot of patience – and this is especially true in the ecommerce space where ease, convenience and speed are expected. When these expectations aren’t met, the result is often a drop-off in traffic and a failure to convert visitors to buyers. In this article we cover universal best practices for improving website usability and making your site a pleasure to shop, while touching on some useful plugins for WordPress site owners.
What Do We Mean By “Website Usability”?
Consider a sub-optimal visit to a high street department store. When you arrive, trolleys are blocking the entrance. Inside, the aisles are dimly lit, the signage is vague and products are piled on top of each other in a haphazard manner. You look around for a sales assistant to help you but there are none to be found. When the queue at the tills is alarmingly long and slow-moving, it’s the last straw. You park your trolley in a corner and head for the exit.
The experience of visiting a poorly structured ecommerce website is much the same. By contrast, a website with optimised usability is easy to navigate, easy to search and easy to buy from, with need-to-knows clear and understandable and online support a click-away. The overall experience of using it is a pleasure. Let’s dive into some ways you can ensure your ecommerce site is a treat for visitors.
Start With Data
Running a site-wide analysis with Google Analytics may help you identify some issues that need resolving. If you’re seeing a short session duration and high bounce rate on your home page, visitors are likely arriving on it, then feeling confused about what to do next.
A high rate of cart abandonment at checkout might mean your payment process is too onerous. If you’ve been heavily promoting a certain product or category on social media, yet the resulting traffic isn’t leading to sales, the problem may lie in the images or information on your product pages. This article offers some helpful tips on optimising product pages.
Keep Your Site Content-Light
In the era of streamers, tweets and WhatsApp, reading is sadly a dying art. People don’t like to spend a lot of time reading long passages of text online. Even more so when they’re browsing on a mobile phone; an increasing ecommerce trend. This in mind, here are some pointers for how to handle copy on your site:
- Keep sentences short and to the point, whether their purpose is to inform, inspire or compel.
- Place your most important content above the fold, with no scrolling down required to read it.
- Use headers and sub-headers to break up longer content pieces, like your “About us” page.
- Use adequate line spacing so that text isn’t cramped.
- Italicise or bold most important words or messaging.
- Consider using short intro’s for longer sections, with a “Read more” linking through to the full text.
- Consider housing text in text boxes for a clean, organised page layout.
Keeping your site content-light also means not cramming too many images, animations, sliders, pop-ups or other elements into the pages. Every element should have a reason for being there. Retaining some “white space” on your site’s pages is a good idea.
On your product pages – arguably your site’s most important – you should showcase product images, information and CTAs in an attractive, organised and easy to navigate manner. The easiest way to do this is by installing a suitable gallery plugin like our FooGallery, more about which here.
Optimise Text Visibility
Related to the above is the visibility of your text onscreen. If it’s too small, fading into the background, or jarring with it due to clashing colours, your website usability will be greatly decreased – and remember that some visitors may have motor, visual or cognitive disorders that affect the way they read text onscreen. As best practice, use a simple font, adequate font size and complementary rather than clashing colours, with enough variation between text and background. Opt for dark text against a light background, rather than light text on dark. Most sites use black text on a white background, because its easiest on the eyes.
Show The Way With CTAs
Call to Actions (CTAs) are like helpful signposts for website visitors, directing them to where you’d most like them to go – a newly launched product, a sale, an e-mail sign-up form or elsewhere.
Probably the two most important CTAs any ecommerce website can have are a “Shop now” CTA directing visitors to your shop, and an “Add to cart” CTA on every product page. A CTA should be eye-catching and compelling. With a plugin like FooBar, you can add customisable CTAs, including sale countdown timers and other dynamic CTAs, like this one.
Make It Easy To Get Around
Simple, clear navigation is the tentpole of website usability. You want your visitors to be able to find whatever they need in a minimum of clicks. In your website menu, which should stand out on the page, have as few tabs as possible. If your site has a lot of sections, consider incorporating drop-down sub-menus into the main menu. Label menu tabs logically and simply – shop, FAQs, contact etc. – this is not the place for “clever” words. Here are more tips for setting up your menu.
Prioritise site navigation around the most likely customer journey: home page, likely followed by clicking through to your online store, or to a particular product by way of the search portal. From there, on to checkout. Side-visits, for example to your “About us” or FAQs page, will be tangential to this main journey. CTAs will help – keep reading for more in this.
With effective search functionality being integral to an ecommerce site, consider installing a suitable plugin like Search. Related to search is the ability of shoppers to filter products easily in your website shop – by price, type, colour or other parameters. Again, a suitable plugin like WOOF can help you optimise this aspect. Of course, FooGallery PRO Commerce comes with filtering, search and a product gallery, combing all of these features in one plugin.
Guide Visitors With Breadcrumbs
Remember being lost in a supermarket as a child, then trying to retrace your steps? Breadcrumb navigation helps visitors to always know where they are as they move around an ecommerce website. Breadcrumbs are navigational links displayed in the address bar at the top of a page, which show visitors their current location on a website by displaying the steps that led them to the current page.
For example, let’s say you’re browsing a website selling sporting goods shopping for hiking gear, starting with waterproof boots. The address bar might read Sporty Home > Outdoor > Hiking > Equipment > Boots > Waterproof. Once you’ve added the right boots to your trolley, you can shop for other hiking equipment by simply going two clicks back.
You don’t have to be a developer to make your website breadcrumb-enabled. Simply install a plugin like Flexy Breadcrumb to add intuitive breadcrumbs to your visitors’ journeys.
Provide a smooth payment process
It’s a tragedy when an ecommerce site has converted a visitor to a buyer and gotten them to the very last step – payment – only to have them abandon their trolley out of frustration with a slow or obtuse payment process. So here are some best practices to follow:
- Endeavour to house the full payment process on a single page.
- Keep form fields to a minimum.
- Enable autofill to help make form completion easier. Here’s how to do so in WooCommerce, the most popular ecommerce plugin for WordPress.
- Enable multiple payment methods for buyers’ convenience.
- Make customers feel safe about transacting with your site, by installing a valid SSL certificate as well as a suitable security plugin.
- Always thank buyers for their purchase, confirming all order details including expected delivery date, shipping costs and total invoiced.
- When trolley abandonment happens, you can try to reverse it by offering shoppers a discount coupon, or ask them why they’ve abandoned their trolley, via automated emails (you’ll need a suitable plugin). This may help you to iron out any common issues with your payment process.
Here are some tips on optimising the checkout flow, from WooCommerce.
Be Accessible To Customers
Another common frustration for ecommerce shoppers is not getting assistance when they require it. You should have all of your contact details prominently visible on your site, as well as the hours of the day when you will or will not be available to quickly respond to enquiries. This could be via a site-wide notification bar, generated with a notification plugin like FooBar. Your site should also have a “Contact us” page with a simple contact form.
If you want to automate and organise your customer service to a degree – and still have funds for one more plugin – you could install an e-ticket system plugin, which will prioritise customer queries and keep them informed of the status of their queries.
Check That Your Site Is Responsive
Last but not least, for both conversion rates and healthy SEO, it’s imperative to make sure that your site is responsive, meaning it is easy to browse, shop and pay on devices of any size. If you think you have the skills, here’s a detailed guide to making a WordPress site responsive. If you’d rather save time with a plugin, here are a few recommendations – and these ones are free.
If you feel like all the website usability steps we’ve outlined here feel like a lot, know that the outcome will be worth the work. To inspire you, here are 24 of the best, most usable WordPress ecommerce sites out there. Wishing you satisfied repeat customers and robust sales.