Skip to content

A podcast for those who design, develop and run websites.

Boagworld is the blog of web strategist Paul Boag who lives in the heart of rural Dorset (hence the cows). He produces a weekly podcast with UX consultant Marcus Lillington on building and running websites. They also run the web design agency Headscape.

Latest Shows

203. Why your blog fails
This week on boagworld: the secret of successful blogging, will Google personalisation affect your sites ranking and how to help users too busy to read.
202. Rocket Surgery Made Easy
This week on Boagworld: Steve Krug on monthly usability, Steve Marshall talks about form design and Paul rejoices over the new era for browsers in Europe.
201. Are clients stupid?
This week on Boagworld: We review the freelancing book Noded, discover a new web tool called 'Support Details' and Paul tells us all a story.
200. A taste of the show
This week's show gives you a taste of the live 12 hour marathon that took place to celebrate the 200th Boagworld.
199. Time to generalise
This week on Boagworld: The changing role of web designers, Colin Firth on content and Becky Jones talks about the changes at Google.

or view all shows

Have your say

Become a part of the Boagworld community...

Non hierarchical navigation

Posted in Usability on: Tuesday, February 27, 2007 by Paul Boag

Just occasionally you come across a website that just doesn’t fit the normal pattern of things. Headscape was recently approach by a potential client who had literally hundreds of thousands of web pages which were almost impossible to organise into a traditional information architecture. They wanted us to suggest some alternatives and so I thought I would share with you my response.

There are lots of reasons why a normal might not work for your site. However, probably the most common is that your site has simply outgrown the constraints of a hierarchical tree and that your are getting lost deep in the information architecture. Often the answer is simply to do some radical pruning to remove much of the deadwood, however occasionally a different approach needs to be found.

So what are the alternatives available to you?

The most obvious approach is to use search as your primary navigational method. Indeed search is the primary mechanism we use to navigate the entire web and so we know that it has the scalability required. However, although potentially the best solution it is often poorly implemented. I have written about how best to implement search before and so I am not going to repeat myself here. Nevertheless, there are additional things to take into account when search is used as the primary for an extremely large site.

Firstly, position is important. A search box is a relatively small screen element and so can easily be lost within a . When search is the main way that a user will find their way around your site you need to make this obvious. Move the search into a more central screen position like or Amazon does.

Secondly, on a large site advanced search is important. The problem is that users struggle to build complex search queries. They find concepts such as using quotation marks or Boolean joins difficult to grasp. As web we need to search for new ways to help the user build these complex searches. As it happens the answer might be right under our noses.

Screenshot of find and replace functionality in Dreamweaver

Dreamweaver comes with an interesting tool that helps users build complex search and replace commands without having to know about regular expressions. Although a similar approach has been used on websites in the past, the arrival of AJAX and Scripting now means this kind of functionality can be implemented in a much more intuitive and responsive way.

Related Links

Although not a replacement for traditional navigation, related links can work as an effective accompaniment to search.  Related links allow you to establish a loose relationship between documents which is much more flexible than the static hierarchy of an information architecture. They can provide a context to a document which search alone does not offer. However related links are not without their problems. When publishing new pages it is a relatively simple process to link those pages back to previously published pages in order to provide context and additional information. However older documents are often neglected and when a new page is published these older pages aren’t updated with a link to the new page. In other words old pages atrophy.  The problem is caused because the system is reliant on editors remembering that there are older pages which need updating. Ideally some automated system should identify related pages, but we will come on to that later.

Breadcrumbs

Normally breadcrumbs are associated with a traditional information architecture where they show your current location in the hierachy. However, that is not the only use of breadcrumbs. A less used approach is that breadcrumbs show the path the user has taken through the site. The reason this approach is less used is because in theory the back button provides the same functionality. However, the majority of users are unaware that the back button allows them to skip back multiple stages. Historical breadcrumbs clearly show the user which pages they have previously visited and allows them to quickly jump back to anyone of those pages.

There is also an opportunity here to once again learn from desktop applications. Windows Vista has added an interesting new feature within its file that might be adapted for our historical breadcrumbs. Basically the file explorer’s breadcrumbs allow you to view the children of any folder in the hierarchy:

Screenshot of the new file explorer system in Vista

This approach could be used with our breadcrumbs to show any links within a document allowing the user to quickly jump to related pages. The primary reason a user utilises breadcrumbs or the back button is to select another link so this approach could prove invaluable.

Tagging

Next to search tagging is the most common way of organising non hierarchical information. Indeed this post has been tagged as shown at the bottom of the page and you can view a tag cloud for the entire site. Sites like delicious also allow for the bundling of groups of tags to create a basic information architecture for the site.

However, tagging does have some fundamental issues which need to be resolved. The greatest of these is who does the tagging? The most popular answer to this question is that the user does it. Indeed Russ Weakly of the Australian Museum put together a very compelling presentation at Webstock for a user driven information architecture based on tagging. There are also a growing number of tools that facilitate user tagging of a website. Of course the problem with this approach is that it requires the user to be motivated enough to do the job. When tagging my bookmarks on delicious I am motivated to do so in order to allow me quick access to them in the . However, the same motivation does not exist to tag a page on a standard website like this one.

The alternative to user tagging is that the owner of an individual page tags it. The owner is certainly much more motivated to tag the document but that doesn’t mean they are the best qualified to do so. The problem is that an owner’s mental model can be radically different to that of a user and so their choice of tag can be inappropriate to those navigating the site. Web page owners tend to rely heavily on jargon and view the world from an institutional point of view. Of course the other problem of editorial based tagging is this can present a massive problem if there is a substantial backlog of web pages that need tagging.

Active Navigation

Much of the problems that arise with both tagging and related links comes from the need for human intervention and in particular the degree of intervention needed to tag or link older documents. One solution might be to automate some of the process.

Back in 2000 I was fortunate enough to work with a ground breaking company called Active Navigation. These guys were working with similar algorithms to those found in a search engine like Google but applying them in a very different way. Like Google they were using linguistic routines to analysis a page and identify the keywords which best described the . However instead of using the results to build a simple search engine they were also using it to build a navigational structure of related links and tags. This would ensure related links were always up to date and avoid much of the human intervention required for tagging. Instead of having to tag and manage individual documents they can simply edit and manage the tag cloud to ensure only the most relevant keywords are featured.

Because the system fundamentally uses the same approach as a search engine algorithm it is more than capable of also providing search functionality. By bringing together search, tagging and related links in a relatively automated process I really believe that active navigation provides a viable way of dealing with massive websites.

What did you think about this post?

8 Comments

Comments are for the discussion of this post. If you have other questions / comments then post them to the forum or send me an email

  • Eric says:

    Interesting read Paul. I particularly like point you made about breadcrumbs in Vista.

  • Folders123 says:

    Is this instead of the podcast!! ;-D

  • Paul Boag says:

    No, the podcast is coming… I am covering this subject so wanted to produce more than the normal show notes.

  • A.C. Riley says:

    Thanks for these cunning ideas and clever solutions for sites that don’t fit into hierarchical norms. A user-friendly search function is so important (and so often overlooked). Content is only valuable when people can find it.

  • Matthijs says:

    Very interesting article Paul. I saw Russels presentation (not live, unfortunately) and indeed that was a thought-provoking presentation.
    But I do think it will take a while before thoughts as these will ring a bell in most managements. In other words, you’ll need a very convincing story to be able to implement stuff like user generated tag-clouds on a bigger website. I remember Russell talking about that problem as well.

  • Joe Lamantia says:

    Hmmm. Why recommend search so heavily? The best way to offer an effective experience is to being by understanding users’ goals, and then designing solutions that support those goals.
    With the exception of reference style usage scenarios for dedicated information retrieval roles, user goals focus on more valuable and context-specific objectives, rather than search. An example of a broader goal might be, “choosing a flower shop to order flowers from”. Searching may be a very important task users have to accomplish in order to achieve their real goal, but that’s not what they need to accomplish in the first place.
    This means that it’s essential to take a holistic view of user goals, and provide a balanced set of capabilities like search, navigation, tagging, etc. that support those goals – unless you’re designing strictly for information retireval contexts.
    Relying exclusively or predominantly on search to solve all other design problems is a shortcut – sometimes it works well, but even when it does, it’s not a long-term solution for the challenge of ensuring findability and adequately supporting all users’ goals…

  • shopping says:

    Joe is right about the importance of knowing the needs of both your customers and users when deciding on any element, and in particular an element that aids your visitors in navigating around your site. That said, I think that what you’ve posted here is a fantastic selection of options, including a couple I hadn’t considered. It’s certainly impossible to make the best decision for a client if you haven’t thought through all of your options carefully. In addition, I have to give you credit for making sure your site is accessible to people of different abilities, by posting both a written summary and a pod cast. The web needs more site designers who take account of accessibility issues.

  • I love your tagging idea. I think this is the best advantage you have. Just like what you said, this is the most effective way to serve most Internet users and web sites.

Leave a comment

Additional Information

Produced by Headscape

Boagworld is produced by the web design agency Headscape founded by Marcus, Paul and Chris Scott. Headscape also has a number of other talented guys who blog. Check them out.

  • Craig Rowe is one of our amazing developers and writes some superb posts on everything from .net to AIR apps.

  • Ed Merritt is a Headscape designer who's blog contains examples of his work and a number of free Wordpress themes.

  • Dave McDermid is a Headscape developer who has an excellent blog. He blogs on everything from AJAX to security.

  • Rob Borley is one of our project managers and blogs regularly on client and project management issues.

  • Leigh Howells is our multimedia design guru (whatever one of those is). He blogs on a mixture of design and music.

Paul elsewhere

Paul just can't shut up. He publishes regular audioboos, has a personal blog and is addicted to twitter. He also writes and speaks regularly. Check out the most recent below: