Get In Touch

Get In Touch

01202 237370

Visit Us

Bournemouth HQ

First Floor
8-10 Christchurch Rd
Bournemouth
BH1 3NA

London

10 York Road
Waterloo
London
SE1 7ND

Enquiry Form

eCommerce Usability: Website Design Do’s & Don’ts!

  • Written By Grace
  • Posted May 28, 2018
  • 9 minutes Read Time

As the Data Analyst here at Media Lounge, I see countless design faults on eCommerce stores which lead to poor website usability and consequently, poor sitewide conversion rates. The issues I most commonly see reside with the layout of categories and the general site navigation which, with a little more thought for the user, would make a vast improvement to the overall user experience on the site.

Thus, in an attempt to reduce the number of sites experiencing low conversion rates and unhappy users, I’ve decided to share with you some of the most recurring design do’s and don’ts I see on eCommerce stores. Follow these simple tips and your site should be equipped for a seamless user journey.

First things first, it’s important we agree on one thing before we continue with the rest of the article:

Website usability is now one of the most, if not the most, important factor you need to consider when you are designing an eCommerce store.

Why? Because the easier it is to use a site, the easier it is to buy from a site. Therefore, the easier a site is to buy from, the more money that site will make – simple right? To give a site the best opportunity of making a profit, the user experience must be prioritised throughout the site build.

The easier it is to use a site, the easier it is to buy from a site. Therefore, the easier a site is to buy from, the more money that site will make!

Tweet this now

Additionally, website usability is not just in the interest of the site owner but also the interest of the potential customer. Much like visitors to a physical store not taking kindly to rude staff or uncleanliness, there is now a certain level of customer service expected from an online store.  Users now expect websites to be fast, work smoothly and be easy to follow. If a website falls short of simple usability expectations, the accessibility of the internet makes it extremely easy for a user to deny the site their time.

And where do these users go when they leave the site?

Most commonly to a better performing site selling a very similar, if not the same, product range – that’s right, extensive competition on the internet provides yet another prime reason why good website usability is essential to the success of a site.

Now the importance of website usability has been established, it’s time to explain the most common eCommerce website design do’s and don’ts to help you avoid drop off rates, poor conversion rates and unhappy customers…

1. Product categories should be displayed in the main site navigation bar

The first and most detrimental design don’t is websites which use a solitary main navigation item as opposed to displaying the sites main categories in a navigation bar. On sites which implement a solitary main navigation, users are required to hover over the item – typically called ‘products,’ ‘departments,’ or ‘catalogue’ – before being able to view the first level of product categories (e.g. Clothing, Home Decor, Electronics). This vague style of navigation is still implemented on 18% of sites according to a study in 2017 and causes multiple navigational issues for users.

Issue 1: Inferring the type of the site

Users heavily rely on the homepage content to infer the type of site they are on and the type of products the site sells. When a solitary navigational item called “Products” hides all the product categories, it makes it difficult for users to immediately grasp. Providing category headings is even more relevant for external traffic that does not land directly at the homepage.

Issue 2: Double-hover navigation interaction

The second issue is less severe since it does not disrupt the users understanding of the site but instead makes the user experience increasingly frustrating. Double-hover navigation relates to a two-directional navigation through subcategory drop-down menus. Having a singular main navigation item such as ‘Products’ requires nearly all users to perform a double-hover interaction, which is generally undesirable (see screenshots below):

As you can see from the marked red arrows, navigating the category and subcategory menu is a vigilant task; the user must first hover the singular main navigation item ‘Products’ to reveal the main category options, then move the cursor downward within the narrow hover area, then when the user has found the desired category, they must move their cursor in a straight horizontal line within the height restricted hover area to reveal the larger hover area containing more sub-categories.

Needless to say, this restrictive navigation path causes interaction issues making it difficult to navigate reliably. This often results in the user accidentally hovering and switching between unwanted subcategories as well as accidentally leaving the hover area altogether, causing the entire main menu to close and the user having to redo the entire hover sequence.

The solution:

Ensure the main navigation bar contains a range of product categories for clarity of the user and easy navigation.

2. Flickering issues on the main drop-down menu

Using a drop-down menu for category navigation on eCommerce sites has become an industry standard. However, this popular design trait often suffers from ‘flickering’ issues which majorly disrupts the ability to navigate the category drop-down menu smoothly and frustration-free.

Flicking issues refer to when a visitor tries to move their cursor towards a sub-category option within a category, and in the process, accidentally activate a sibling parent category which causes the drop-down menu to change.

At first glance, this might appear as a minor interaction detail, but ‘flickering’ issues can be extremely frustrating and can deter users from using the site. To resolve the accidental activation of the unintended sibling category, users must recognise that the wrong sub-category information is being displayed, relocate the correct parent category, hover over said parent category and try to move the cursor towards the desired sub-category following an invisible, non-linear ‘safe’ hover path.

As illustrated by the above green arrow, a users natural cursor path will take the most direct route to its desired destination. Due to how ingrained this ‘direct-line’ cursor behaviour is, users often repeat the same issue multiple times before finally being able to actively stop their direct-line movement and avoid accidental activation of the wrong parent category.

The ‘simple’ solution:

Implement a hover delay. By adding a minimum amount of time the user has to hover a new parent category before the drop-down content changes, the user simply brushing past a different parent category will not alter the display.

The ‘advanced’ solution:

Display categories in the main navigation bar and feature a drop-down menu which stretches across the width of the screen with all clickable subcategories mutually accessible. For example, the new Binopolis site we developed lets the user move freely within the subcategory drop-down without any unwanted interaction changes.

3. Avoid Implementing Product Types as Categories

Time and time again I see websites over-categorise and make the mistake of implementing product types as categories. Over-categorisation can cause a number of website usability issues including:

  • Forcing users into overly narrow category scopes
  • Users overlook the totality of product type selection on offer on the site
  • Users combine product types to match their purchasing preferences

While this may seem like an insignificant labelling issue on the surface, over-categorisation has been found to have a direct effect on site abandonment rates – causing serious business implications.

Categories vs Filters:

The most common misimplementation are filters being listed as categories since they work in a similar way, are often displayed next to one another and can technically be almost the same thing. However, categories and filters are by no means interchangeable as they come with important differences:

  • Categories make up the hierarchy of the site and product catalogue. Only one category can be selected at one time for example ‘jeans’ or ‘shirts’. Typically, each category will have its own page and its own set of filters specific to the category, e.g. ‘skinny, wide leg, bootleg’ could be filtered in the ‘jeans’ category but not in the ‘shirts’ category page. In other words, categories not only determine the products listed on that page but often control the features available for browsing those products (including filters), which is why categories need to be mutually exclusive.
  • Filters are tools to adjust and narrow down the products displayed in a category page. Filtering values are not mutually exclusive and therefore allow users to combine multiple filter values to narrow down their product list. For example, in the ‘shirts’ category, a user might combine a range of filters to get a tailored product list, such as ‘size: 10’, ‘material: cotton’, ‘colour: blue’, in order to see all available ‘size 10 blue cotton shirts’.

Over-categorisation means the sites category hierarchy has become too extensive. The site has taken product types and product attributes that should have been implemented as combinable filters and mistakenly implemented them as categories instead. The implications of this confusion are plentiful, although the three most important issues include

  1. The user will only be able to view a limited product range of a particular product type. For example, the user will only see ‘maxi skirts’, despite being interested in other styles of skirts. Thus, there is a tendency for users to be lead into overly narrow category scopes because the user was forced to select one option over the other.
  2. Users cannot combine categories even if there is a ‘View All’ feature on the page. This becomes problematic when the user has a particular product attribute in mind, as they have to repeatedly apply one or multiple filters within each sub-category instead of getting one combined list of products.
  3. Users can fail to understand the product types labelled as categories which means that they are now forced to select something that they do not understand the implications of.

The Solution:

Only feature category headings in the main navigation menu and feature filters within the main category pages.

Summary

In summary, the success of a website is in the hands of its visitors; if the visitors are happy whilst using a site then they are more likely to buy into the products the site has to offer. As such, the five key takeaways from this article are as follows:

  1. Website usability is VERY important.
  2. Website usability must be prioritised in website design for best performance results.
  3. Categories should feature in the main navigation menu as opposed to hidden within a solitary navigation item.
  4. Consider a robust drop-down menu with little-to-no opportunities of accidental category activation.
  5. Know the difference between a category and a filter.