Improving Your Website Navigation

OPTCHero

The Onehunga Powertool Center caters to a mainly commercial clientele, selling professional-grade hardware and repair service. The newly launched optc.co.nz aims to support this business as well as reach customers in rural New Zealand.

While off to a good start, the website’s navigation can be improved to increase flow through the website and conversion. This is what it looks like currently:

optc_current_header

Limit the Options

The navigation bar is too crowded making it difficult to find one’s way around the site. Humans can scan and process up to seven items in a list, with three to five entries being the ideal. If you group the icons together, there are currently nine chunks of information to process, which is far to many.

optc_current_header_count

Reduce Clutter

Let’s try to reduce the content in the header. Firstly, a user expects to find contact details and social media accounts in a website’s footer, so space is easily won there.

Secondly, ‘My account’ should always be positioned at the top, far right. This is a learnt behaviour that has evolved along with the internet.

optc_current_header_reduce2

Even big players get this wrong. I was looking for this link on the vodafone.de website for at least a minute the other day because it blended into the menu and wasn’t where I expected it to be.

vodafoneDE

Group Similar Content

We also want to group related content. The options Brands, Tools, Categories and Accessories should be grouped to help users navigate to products. Additionally, these labels should be renamed to better explain what is contained in the drop-down menu when clicked.

Current Labels:
Brands
Tools
Categories
Accessories

While ‘Brands’ and ‘Accessories’ is clear, the options in ‘Tools’ and ‘Categories’ are often doubled up because the labels are ambiguous.

Improved Labels:
Brands
Tool Types – contains nouns: Saws, Concrete Cutters, Nail Guns…
Job Functions – contains verbs: Sawing, Cutting, Nailing…
Accessories

It will now be easier for users to scan the lists of links and easier for the OPTC team to maintain the categories as it is clear what goes where. A nice result of the new labelling is that they are now all plural.

Focus on Search

A well working search allows people to find what they want quickly. The search results pages on OPTC, when you can find them, are very good.  The problem is, the search field is hidden behind an icon and amongst other icons.

optc_search

Instead of using a fly-out menu over when hovering over the search icon, it’s best practice to have the field visible all the time. You want people to use the search, so direct them to it.

The Proposal

Here is my proposal for the navigation:

optc_improved_navigation

The following improvements were made:

  • The logo is larger so that the word ‘Onehunga’ can be better read. It is key to a user remembering the URL, so it needs to be legible.
  • The navigation over two lines to break up product categories and account functions.
  • The product categories have new labels for clarity.
  • The font used for the product categories is bigger, bolder and black instead of gray.
  • Search is no longer hidden behind an icon, making it easy to locate.
  • The ‘My Account’ account link is in the top right where the user expects it and renamed to ‘Login/Register’ let people know that anyone can create an account.
  • The shopping basket information is grouped with the account link.