Good pathway pagesPosted April 7th, 2009 by David Hamill
Your website is just a series of inter-linked pages, but some of those pages are very different from others. In this post, I’m going to talk about pathway (or gateway) pages.
I want to help you to identify pathway pages and explain some considerations you should make by discussing real examples.
So what’s a pathway page then?
Pathway pages are pages that your users experience on their way to finding the information they need. Let’s say I visit the website of the NatWest bank and I’m looking for car insurance. I select ‘Insurance’ from the menu and arrive at the page pictured below.
This is a pathway page. Its job is to be the parent page of the different insurance products (the child pages). The page should point me to the insurance product I want without fuss. In this example, it’s fairly obvious where I need to go to find car insurance. I don’t need to do a lot of reading in order to find it.
Pathway pages are navigation
Think of pathway pages as navigation. When we’re on a pathway page, we’re still on the journey to the content we need. We don’t want to read, we just want to find the link and move on.
Hyperlinks are the key to good pathway pages, not passages of text. Any text you use should help your users choose the correct link.
Good pathway pages are better than navigation menus
A good pathway page answers a simple question. “What’s in this section?“. This is as much about telling people they’re in the wrong section of the site as it is about telling them they are in the correct section.
In reality, navigation menus are often ignored in favour of links within the content area of the page. So the design of your pathway page can be very important to the effectiveness of your site.
In some cases, your pathway pages can actually replace a navigation menu altogether. Check out the example below from Transport for London.
This page doesn’t have a secondary menu at all. Instead it uses a pathway page to deliver links to child and grand-child pages. In this example, it allows the site to improve potentially complex user journeys by providing a simplified design.
Dealing with introductions
When you feel an introduction to the subject is required, consider creating a separate introduction page. This allows you to devote the pathway to navigation.
Such an approach is demonstrated by the Business Link website, as pictured above. This website gives people advice about starting-up and running businesses. The page above is the main page on Value Added Tax (VAT).
It has no introductory text on the subject. Instead it provides a link to an introduction for those who need it. This allows the page to fulfil its role as a pathway page, while still providing an introduction.
If you’re using linked headings on your pathway pages, make sure they look like links. Otherwise they might be ignored. The image below from the NatWest insurance page shows an example of such a problem. The heading ‘Essentials Contents Insurance’ is the same colour as normal text. It’s just bigger and bold. It looks like a heading, but not a link.
NatWest is obviously aware of this problem because they have repeated the link below the text. It has sacrificed a little simplicity in order to adhere to the site’s style guidelines.
The Business Link page does a better job of the same approach. There is no need to repeat links here. The headings are obviously links.
Dealing with lots of links
When your site is a little bigger, you often have pathway pages linking to more pathway pages. So instead of an explanation, you can provide some deeper links to important ‘grand-child’ pages. Here’s an example of how to do it badly, from the Scottish Government.
The design of this page lacks discipline and is difficult to read. It’s unnecessary to provide all of the links underneath each section.
Showing a selection of links
The example below from Direct.gov shows how the Scottish Government should be doing it. If you can’t feasibly show all of your lower-level links below each heading, then don’t try. Instead show just a few as an example and make it obvious there are more available.
Direct.gov gives priority to the heading links. Only 3 examples are provided below each heading and the dots indicate that the list is truncated.
These examples are hyperlinks, but they look like normal text. This makes them more readable and also gives prominence to the headings. Their primary role is to act as examples, the fact that they are hyperlinks is a bonus.
When you can show all of your links
When you have only a few lower level links under each section, you can show them all on the same page. The example below is from the Barclays website. Barclays makes it obvious where the links are.
When you list the lower level links in this way, people assume that this is all of the available links under each section. So you should only take this approach when you can provide all of the links. When you can’t, the Direct.gov approach is more effective.
Did you find this useful?
If you found this article useful or if you want to tell me I’m wrong, please leave a comment using the form below. You might also be interested in the following posts:
- What is this site for?
- The increasing importance of usability in e-commerce
- Short and simple sentences
You can also subscribe to me RSS feed if you havenâ€™t already.