WEBSITE DESIGN GUIDE - OPTIMISING YOUR WEBSITE'S NAVIGATION STRUCTURE

Avoid making your visitors think too hard about browsing your site by leveraging existing navigational conventions, keeping your site’s structure simple and ensuring your site loads quickly.

CONTENTS

 

1. INTRODUCTION

 

Return to contents

There is a popular principle in web design theory called ‘Krug’s First Law of Usability’. It goes like this:

Don’t make me think.

This mantra is simple, but it perfectly encapsulates the wish of the average website visitor. Regardless of the mission they're on, the visitor mandate is clear; give me a website with an intuitive navigational structure and limit the number of tough navigational decisions I need to make. Let me browse the site mindlessly, so I can save my brain power for the job I'm actually trying to complete.

The best bit of advice about navigation is simply to follow convention. Unless you're a website that is visited frequently by each of your visitors (such as Google, Facebook and some news sites would be), don't try and impose a new navigational style. Of course you can, and should, make small tweaks to optimise navigation for your specific site, but don't try and reinvent the wheel.

The second best bit of advice is keep it simple. Don’t ask your visitor to read too much, make too many tough decisions or perform too many clicks as that will lead to frustration and fatigue. 

Thirdly and finally, make sure your website is quick to load as this has a real bearing on how easy a visitor perceives their journey to be. Research has shown that we perceive things that are slow as complex and effortful even if they’re not, for example the experience of queuing in a busy bank or phoning customer services feels like hard work. Waiting for things to load snaps your visitor out of the flow of their experience, forcing them to decide whether to stay on your site or not.

 

2. GENERAL NAVIGATION CONVENTIONS

Return to contents

Positioning

Website visitors have expectations around where to find things, for example:

  • The main navigational bar is at the top of the page, sometimes on the left.

  • A search bar, if it exists, will be in the top right (or top left for transactional sites).

  • Any log-in and checkout buttons will also be in the top right.

  • At the bottom of a page will be a footer, containing items like contact information, help information and FAQs (frequently asked questions).

One thing website designers can learn from supermarkets is that they position the products they most want to be seen in the place where they are most likely to be seen - at a shopper’s eye level. This is where the most popular branded items and other premium-tier products get placed.

It might surprise you, but the concept of eye-level actually applies to websites too. Developers will refer to ‘the fold’, and specifically ’above the fold’ (anything you see on the page as soon as it loads) and ’below the fold’ (anything you have to scroll down to find). This stems from old newspaper terminology to refer to content that was on the upper or bottom half of the newspaper, with content in the upper half much more likely to be read.

This means you should put the most important things, including the most important navigational items, at ‘eye level’ - above the fold. Anything that requires the visitor to scroll is more likely to be missed, so don’t put important things down there. In practice, this isn’t always possible. The space above the fold is limited, but the space below the fold is infinite (although having an infinitely long page would be a terrible design choice). If you need to put an important navigational item or piece of content somewhere less immediately visible, then give it a boost by ensuring it is in a large font size, a different text colour or ensuring it has plenty of white space around it.

 

Broken links

A broken (or ‘dead’) link is a link that, when followed, doesn't lead to anything and results in the site, or browser, returning an error known as a 404 (page not found) error. There are two main causes of these errors:

  1. The link was always pointing at nothing - either as a result of a typo in the link (eg flower.htm rather than flowers.htm) or because the page name or directory was incorrectly referred to (eg content/flowers.htm rather than pages/flowers.htm).

  2. The link was originally working but then the page it was linking to moved, was deleted or changed name. Some website builders will update links to changed or moved pages, but you shouldn't rely on this.

Broken links are unequivocally bad. They are frustrating to visitors, disrupting their journeys and very often forcing them to leave the site. Unfortunately, they remain a common pitfall of building and maintaining a website. 

To ensure this doesn't cause your visitors a hard time, there are a couple of steps you can take. Your first step should be to identify any broken links and fix them. Fortunately, both of these things are quite easy. Fixing them simply involves rewriting or amending the link so that it points in the right direction. Finding broken links should be both a manual and automated process. You can start by browsing your site and following the most important links to make sure there are no errors occurring, and that they are pointing in the right place. For larger sites, it is then worth using an automated tool (search for ‘broken link checker’) to check all of your links.

 

These tools do a lot of the hard work for you, but they will only flag links that return a 404 error and not those which point to the wrong (but existing) page. This is still going to cause visitors frustration (the link is not pointing to where it should be), but it is much harder to spot as the link still points to something.

A good second step is to build a custom 404 page. Typically, when a visitor experiences a broken link they are shown a pretty ugly and unhelpful default error page. A custom 404 page, if you’re using one, will display instead of the default error message when a visitor hits a broken link. The benefits of doing so are you can keep the error page in your branding (making the error page feel less visually jarring, and even giving you a chance to reinforce your brand) and you can provide visitors some clear next steps, for example giving them a way to get in touch with you directly, or showing them some other navigation options. Most website builders provide this facility, so search their help pages to find out more.

Other link behaviour

As referenced in the earlier guide on design, visitors have expectations about how links typically work. Below are a few rules you should follow to ensure you are meeting those expectations:

  • Links should be underlined (and nothing else should be). Underlined text tells the visitor that that particular text is a link. If it’s not a link it shouldn’t be underlined, and if it is a link then it should always be underlined. 

  • Visited links should display in a different text colour. Again, this is a shorthand that tells the visitor that they have already been to that page - helping them better judge if they want to click the link.

  • Links should be descriptive about what they link to. Not only is it good SEO practice, but it helps the visitor experience. ‘Find out more about the products we offer’ is much better than ‘To find out more about the products we offer, click here’ as it means the visitor can more quickly process what the link is without reading the whole sentence.

  • Your site logo should be at the top of every page and always link to the homepage. This is a very common way visitors navigate websites, and it’s frustrating to use sites where this isn’t in place.

  • Links to external sites should load in a new window or tab. When a visitor clicks a link that is to a site other than your own, most of the time they don’t want to leave your site in the process (and you don't want them to either). Ensuring the link loads in this way means visitors can finish their journey with you first before moving on.

 

3. SIMPLE NAVIGATION

Return to contents

Avoid having too many navigational layers

 

Every time your visitors have to click a link to get to another part of your site, a proportion of them won’t. This happens for a number of reasons:

  • Not everyone will see your link (no matter how visible you think it is). Remember: visitors are most often skimming your site, so it’s easy for them to overlook things.

  • For those who do see your link, not all of them will understand that following it will move their journey in the right direction.

  • For those who do understand this, not all of them are going to be bothered to click it. Remember: visitors are often time short and looking for an easy life. If this is the sixth or seventh link they’ve clicked, then they might well be ready to give up.

To minimise this drop-off, reduce the number of navigational layers as much as possible. Every single page on your site should be easy to find and ideally take no more than three clicks to reach. Of course, this is a rule of thumb - it is actually much better to give your visitor a slightly higher number of simple decisions to make than a smaller number of harder decisions. Don’t reduce the number of clicks if doing so makes your navigation more complex - only if it simplifies it.

If this isn't making sense yet, don’t worry - we’ll be covering this in finer detail in the next guide when we consider the main navigation bar. 

The role of the sitemap

You might have heard of a sitemap before. You might have even used one before, but there's an equally strong chance you never have. 

The role of sitemaps has changed over time. The term ‘sitemap’ used to refer to a written or visual representation of how the entire site was laid out, which would help visitors who were lost, or were looking for a specific page - a bit like a store map. Nowadays it more commonly refers to an XML page (you don't need to worry what this means) that shows search engines how your site is structured, so that they can present better search results to their users. These XML pages are almost always automatically generated, and completely unreadable by the average visitor.

You will definitely benefit by submitting an XML page to the search engines as it can improve your search ranking and help bring more visitors to your site. Most website builders make this process extremely easy - just search your provider's help pages to learn how.

As to whether you need a visitor-facing sitemap, that depends very much on your site, but most will be fine without one. The reason for that is most visitors only turn to site maps as a last resort. I couldn't find data showing how frequently they are used, but I'd be confident in saying that it's less than 1% of visits to any given site.

You might need one if your site is large and complex in structure. However, if this is the case then a better course of action would be to carefully examine the navigational choices you've made. It would be far preferable to try and simplify the structure down, for example by removing a navigational layer. To this end, drawing a site map can actually be a beneficial exercise, as you can take a step back from the intricacies of your structure and really understand and interrogate how it works as a whole, giving you a better chance of optimising it.

 

4. LOADING SPEED

Return to contents

We are all impatient and don't like waiting for things that we want. Online that is doubly true - the internet is where we go for fast, on-demand service and problem resolution. There aren't any queues and there aren't opening times to restrict us.

There has been some highly popularised research that shows the extent of our impatience. It is claimed we don't like to wait for more than two seconds for a website to load, with many of us choosing to leave the site we’re visiting if it takes longer to load than that. In general, there are a number of reasons why having a slow loading website can cause issues:

  • Visitors get impatient, which increases their chances of leaving your site. They will begin to question if loading the current page, or the next page, is really worth it.

  • Visitors might think your site has crashed, increasing their chances of leaving your site.

  • It gives a bad impression of you and your company, subconsciously communicating that you are going to be slow and difficult to work with.

  • It affects your position in Google searches, reducing the amount of traffic that arrives on your site.

There are lots of great free tools out there to tell you if your site is slow - Google even has one itself. These tools can even then tell you what you need to do to fix the problem. Although beneficial to know, a lot of this advice is quite complex and requires a decent level of technical proficiency to understand, let alone implement. However there are a few ways that you can make a difference to your loading speed without this technical know-how:

  • Make sure your images are optimised for use on the web and that they are suitably compressed to a small enough size. New image formats like JPEG 2000, JPEG XR and WebP are rising in popularity due to their superior compression, allowing for better quality images at smaller file sizes.

  • Don't use too many images on a single page. In general, don't try and do too much on a single page - break up your content over multiple pages or scale it back.

  • Don't run too many plugins, add-ons or scripts on your website. Website builders make it easy to add these features that other users have built, but including too many will slow your site.

  • Upgrade your web hosting plan. Most providers will offer a premium plan with faster speeds for websites on that plan.

  • Work out where your site is being hosted in comparison to your typical visitor. For example, if all of your visitors are from the UK, you're starting at a disadvantage by hosting your site on American web servers.

 

5. CHECKLIST

Return to contents

  1. Position things where your visitors would expect to find them.

  2. Keep the most important content and navigational items ‘above the fold’.

  3. When displaying anything important ‘below the fold’, emphasise it through use of font size, colour and white space.

  4. Regularly test your website for broken links and quickly fix any you find.

  5. Develop a custom 404 page to better help visitors when broken links do occur.

  6. Ensure all of your hyperlinks are underlined (and are the only things underlined).

  7. Ensure all of your hyperlinks change colour when the page they link to has already been visited.

  8. Write descriptive links (such as ‘Find out more about the products we offer’) rather than relying on ‘click here’ linking.

  9. Position your logo at the top of every page and link it to your homepage.

  10. Ensure any links to external sites load in a new tab or in a new window.

  11. Limit your number of navigational layers where possible.

  12. Prioritise giving visitors a larger number of simple navigation decisions to make rather than a smaller number of complex ones.

  13. Decide if your site would benefit from a visitor-facing site map.

  14. Draw out your site’s navigational structure to help you better understand and optimise it.

  15. Occasionally test your site’s loading speed.

  16. Improve your site’s loading speed by compressing images, limiting their usage and avoiding doing too much on any individual page.

Found this content valuable?

Want to get in touch?

Contact us by email or Twitter.