Good pathway pages
Posted April 7th, 2009 by David HamillYour 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.
Linked headings
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.
Tags: navigation, web writing
21 Responses to “Good pathway pages”
April 7th, 2009 at 8:25 am
Hey David,
interesting post. I like the principle of having a “pathway page” to guide the visitor. Instead of just having a link-plastered sitemap – pathway pages help answering the users questions instantly.
what can i get here?
where can i get it?
I think the most important piece here is “We don’t want to read, we just want to find the link and move on.”
Designers can support this behaviour by highlighting keywords or adding intuitional pictures to the sections.
Do you have any user-feedback on a “all-links” site like the one from Barclays? Personally i tend to think this much links are bad.
Greetings
Patric
April 7th, 2009 at 8:52 am
Hi Patric, it depends on the website. Taking the Barclays example, for the insurance bit, it works well. But for the Barclaycard bit it’s a little confusing. If I’m buying car insurance, I’m hardly likely to change my mind and opt for travel insurance instead. But if you look at the Barclaycard bit, I’m probably going to want to see the difference between the different cards before I choose one. So they are best just providing a link to the main Barclaycard page.
April 7th, 2009 at 11:48 am
Great post, David! I agree completely.
I love your comment about the Scottish gov’s site links: “If you can’t feasibly show all of your lower-level links below each heading, then don’t try.” Too many people try to cram everything on the page at once thinking that it will be easier for users to find exactly what they’re looking for, when all they’re doing is clutter and de-emphasize EVERYTHING in the name of making some very minor content “more visible”.
A lot of blogs are guilty of this too; they have every feature under the sun on their blog simply because someone “might” use it. Do we really need links to ratings, comments, email, permalinks, six different social networks, and more for every single post? Not to mention the typical blog sidebar that has categories, search, tags, month list and/or calendar, recent posts, about the author, and even more. It easily becomes just a distraction rather than helpful features.
Thanks for bringing the issue to light.
April 7th, 2009 at 11:53 am
Good timing on this post because I’m planning page layouts for a couple of new sites. Some pathway pages would be very appropriate for them!
April 7th, 2009 at 12:12 pm
Great write-up. I like how you emphasized reducing copy on those pages and just show the user links!
I have noticed the trend of some to put the entire pathway page or sitemap in the footer. Personally, I find that more annoying than taking the time to design a guide through the site. Sitemaps can go in the footer, if they are a simplified version of the pathway page. Just my $0.02.
April 7th, 2009 at 12:26 pm
Hi Kmett, the sitemaps in the footer are often motivated by SEO rather than usability. People tend not to navigate to sitemaps so there may be a good case for having a brief sitemap in the footer of the page. It could be a bit overhwhelming though because with a pathway page, the links are contextual to the section you’re in. Whereas a footer sitemap will show a lot of links to other parts of the website. I haven’t tested a website that does this so couldn’t say for sure.
April 7th, 2009 at 12:30 pm
This article will be useful for me in helping others to organise their content. I like the bit about how to deal with Introductory text. Where I work, people want to clutter thier site with “who we are”, “Our Vision and Values” information.
I always advocate putting this into the About us section and leaving the rest of the page for task-based links.
This will help.
April 7th, 2009 at 4:47 pm
Nice post. I always like bringing a new descriptive term to my UX vocab. I generally use the term Landing Page, but Pathway page is much more expressive and accurate to it’s purpose.
On another note…I would argue that every header should be hot, everywhere even if you don’t make it look conspicuous.
We’ve trained people to click on headers and images, it is so frustrating to click, get nothing then have to mouse down to the little “link” under the copy or image.
Cheers!
April 7th, 2009 at 11:05 pm
Hi Tyesha, I used to use the same term myself. But Landing Page was commonly used to describe those pages that people land on after clicking a pay-per-click ad. The term pathway page came from Janice Reddish’s excellent book – Letting go of the Words.
April 14th, 2009 at 7:20 pm
Very nice article!
Isn’t a pathway page just a ‘grown out of proportions’ sub-navigation?
The transport of london page for example is nothing more then links to subpages which also could have been placed in a very large dropdownmenu couldn’t they? Don’t get me wrong, I do like the way they did it!
This article kind of opened my eyes on dealing with navigation when there’s lots of information. Thanks!
April 14th, 2009 at 7:24 pm
Hi Thomas. Basically yes. That’s exactly what it is.
April 21st, 2009 at 11:05 pm
We had a page like the Scottish Government’s on our intranet. It was one of the least used pages – visitors saw it and fled. I wouldn’t be surprised if their stats showed the same thing happening.
April 27th, 2009 at 4:01 am
[...] Good Usability: When we’re on a pathway page, we’re still on the journey to the content we need. We don’t [...]
April 29th, 2009 at 10:43 am
Great article, David.
I especially love the point about the ‘Linked Headings’ in the NatWest example. There is no point repeating the title again, (as a link) underneath. As you say, just make the title a link!
Thanks.
ps, I’ve noticed recently that websites/products are using ‘>>’ after a link e.g. Link >>
Isn’t this wrong? Steve Krug points out these arrows should be in front of a link, (>> Link). Am I going mad?
April 29th, 2009 at 10:51 am
Hi Stu,
Regardless of the positioning of the arrows, the arrows alone don’t make the text obvious as a link. You need to make it look like a link with colour, positioning and often underlining and emboldening. Or make it look like a button.
May 7th, 2009 at 9:38 am
But doesnt google stop following after the first hundred links on a page?
May 7th, 2009 at 9:44 am
I’m not sure. I don’t really get your point.
May 16th, 2009 at 11:00 pm
Thanks for the article David. I think that pathways pages can really function as a make-or-break feature of a significantly complicated site. . Many intranets and microsites depend upon a good pathway page.
Unfortunately, the people that need to understand good pathways pages are more than likely the same people who won’t understand it’s importance.
June 8th, 2009 at 9:19 am
Been pouring over your blog this past half hour. Much respect, admiration, gratitude for your knowledge!
June 18th, 2009 at 2:56 pm
This is a great article thank you! All too often do I see these pathway pages and rarely think twice about them. I guess that is a good thing though, a pathway page shouldn’t get in the way of my experience and instead simply point me in the right direction.
I wrote an article on category page design, which may be considered along the lines of a pathway page. Feel free to check it out if you wish.
Thanks!
June 18th, 2009 at 2:58 pm
Thanks Shay, checking it out right now.
Comment on this article