The Navigation Structure

Okay, let’s start with the story. Have a read of this: BBC News website redesign: telling the story. This article includes an image of what the BBC News website used to look like in 1998, which you can still see live on the internet. (How much longer this will last with all the cuts remains to be seen. Anyway, that’s another story).

What the article above says about navigation is:

The first thing you might notice is that the left-hand navigation has gone. A horizontal navigation now gives links to the same sections at the top of every page. This was one of the first – and certainly one of the most carefully considered – decisions made on the project, and one that we wouldn’t have made without good reason.

First, there was the issue of how much horizontal space the left-hand navigation took up. Story templates and indexes (the front page, the Magazine index and the specialist indexes like business and politics) were always compromised by having 100 or so pixels taken up by a piece of unrelated navigation. Now we can offer larger images and galleries, videos and interactive graphics across the site.

Second, horizontal navigation has long been the standard method of navigation across the rest of the BBC and is an understood interaction that we were sure people would find easy to use.

To support this fundamental design change, we carried out a round of user testing, pitting the current site against one with identical content but a horizontal navigation. Users reacted positively across the board, some not even noticing the difference until it was pointed out to them. With this decision made, we were able to start the redesign of the whole site with a wider, blanker canvas.

I want to explore two issues in this post: top vs left navigation, and information architecture.

Top vs Left Navigation

The reason given for top navigation is to allow more width in the body of the page. The additional width is required because of more multimedia used on the newer website. I really think this is disingenuous, when you consider the amount of width in the original website, and the fact that users will quite happily scroll in 2010. However, there are other reasons in favour of a top navigation. But first, a history lesson.

Before content management systems, server includes and DreamWeaver, navigation was tricky. It meant repeating HTML on every page. If the navigation changed, it might mean going in and changing every single page on the site manually and individually. To get around this, frames were used. A frame at the top for the header, and a frame on the left for the navigation. In addition, it took so long for even a small page to download, that it was desirable to keep as many navigation links on the page as possible so that the user could navigate at a reasonable speed. Those two issues no longer exist, which means we can ask the question: where is the best place to locate navigation; and how many navigation links do we need for navigation to be effective? Okay, I’ll come to the second question in the next section on information architecture. But what about where navigation should be located.

Research shows that users look at a page in an ‘F’ shape, but mayby that’s just because it’s where content happens to be located. Users will in general look at content first, and then look at navigation only if they need to. That means that navigation needs to have two qualities:

1. That people can tell it’s the navigation without looking at it by using their peripheral vision.
2. That when people do use the navigation, they can get around the website.

Although I haven’t run a usability test on the new BBC News website design, I would expect people to know where the navigation is with their peripheral vision. So the navigation is fine where it is. But is it better or worse?

If we take Scotland as an example, the previous design had four blocks (main navigation, video and audio, features, and related BBC sites), and it had 29 links. With the new design, the Scotland section has two blocks (1st and 2nd level news links) and 16 links – which is 55% of the original number of navigation links. Going back to my previous point: because the internet is faster than in 1998, it’s fine for people to click on ‘home’ if they can’t find what they are looking for on the current page. So the new design gets a big usability thumbs up, because the less links there are on a page, the easier it is for users to find the right link. It also means that the additional width means there is less scrolling as there is more space available for content. The content is also less cramped and uses a more mobile device type layout – ‘most popular’ looks like it was designed for mobile. This is a medium thumbs up. I personally find the layout a bit unclear, but that’s not really an issue with the navigation system, so I won’t give this a little thumbs down.

Okay, so from a usability perspective, the new navigation makes a lot more sense. But what about the information architecture.

Information Architecture

There always seems to be a fear of chaning the information architecture when a site is redesigned, in case people can’t find the content. I have no idea why. If you go into a department store, and the layout has changed, you wouldn’t be surprised if the signage has changed too.

In the news site, there are 14 top level navigation links. In the old site there was 15. The reduction is because ‘Also in the News’ has been moved to be a ‘Home’ second level links. The top level links in the new site are of three types:

• Home (which include second level links of features)
• Location (World; UK; England; N. Ireland; Scotland; Wales)
• Category (Business; Politics; Health; Education; Sci/Environment; Technology; Entertainment & Arts)

Okay, I hope you can see a problem straight away. Northern Ireland has been abreviated to N. Ireland, Science & Environment has been abreviated to Sci/Environment. This is not ideal, especially for SEO (Search Engine Optimisation). If you want to compare the effectiveness of top navigation vs left-hand navigation, then of course you want to compare like with like. But I do think the information architecture is not entirely logical.

I think the BBC have also designed the navigation so that the features hang off the home page so all the familiar links are visible. This means that the home page has 21 links in the navigation. It is not a coincidence that there were 21 links on previous home page main navigation block, excluding ‘related BBC sites’. Yes, the BBC have kept the same identical navigation items on the home page. Okay, so people can find their familiar links. But in the long run, it may not be the most findable solution – by findable, I mean the ability for users to find the page they want on the site.

I believe that the links off the home page called be described as ‘features’ and put in their own top-level links, and that the nation links would make more sense under UK. This is my more findable taxonomy (taxonomy is just a posh word for navigation structure).

• Home (no second level navigation)
• World
• UK (with England, Northern Ireland, Scotland and Wales as second level links)
• Business
• Politics
• Health
• Education
• Science & Environment (not abbreviated)
• Technology
• Entertainment & Arts
• Features (with Video & Audio, Magazine, Editor’s Blog, In Pictures, Also in the News, Have Your Say, and Special Reports in the second level).

The missing links which have now disappeared from the home page can be put in the footer area. As the footer would include all the links from the old BBC navigation (including ‘related BBC sites’) people can still get to where they want to be in one click. A block in the right-hand column or in the body for ‘features’ could also be added.

Okay, to be fair, let’s compare like with like:

• The main navigation on the home page of the old BBC news site had 21 links.
• The main navigation on the home page of the current BBC news site has 21 links: a reduction of 0%.
• The main navigation on the home page for my suggested taxonomy has 11 links, a reduction of 48% – making it much more findable.

There is the issue of third-level links to be sorted out in my design. For example, in the design, Scotland has sub-navigation for Scotland Politics and Scotland Business. These could either be added to the UK second level navigation, or the third level could be designed into either the navigation block, or even the content of the page. For example, once you clicked on Scotland the navigation could change altogether. The top level would be: Home | UK | Scotland, and the second level Scotland Politics | Scotland Business.

Maybe they thought this would be too much to do in one go with the new design. However, the BBC could have introduced a new taxonomy to the previous design before launching the new design. And they could change the taxonomy within the new design.

If we take a more agile approach to website development – one of constantly tweaking and improving. A little change here and a little change there. Then these improvements can be made. It’s only like moving socks from one aisle to another in a department store.

Design

I just want to quickly mention a design feature of the site. The navigation block links are plain text. I do like this. I prefer it to sites where the navigation is a design feature, as this overstates its importance. If I’m in a department store and I’m looking at the floor guide, I just want a nice simple plain list of what’s on each floor. I think the BBC news site makes good use of plain text, hover states, and simple seperators.

Conclusions

BBC News Navigation – heading in the right direction, but needs to be bold about cutting the number of items.

I would love to hear your comments on this post, in particular on the structure of the navigation links.

If you would like me to review the taxonomy (navigation structure) of your website, then please do get in touch. Either comment on this post, or see the contact details at http://www.extremeusability.co.uk

I’m really interested in the demise of left-hand navigation. When it was originally introduced, it was pretty difficult for people to get around websites. We didn’t have JavaScript and page includes and content management systems. This meant that to do anything sophisticated, each page would have to be hand-crafted, which was a lot of work. The first way we got around the problem, was by using frames. These allowed web  developers to put the navigation in one frame, and then a single navigation file could be used for a whole section of pages. But frames are not accessible. This was abandoned in favour of page includes. This allowed a single navigation file to be included on every page, but without the problems of frames. Finally, content management systems meant that menu systems could be included in the template (including DreamWeaver templates and library items).

But surely with the improved processing power of servers and improved interface design applications (such as DreamWeaver) we can produce better navigation. Wouldn’t it be great if navigation was contextual and you just saw the navigation relevant for the page you’re on. If I’m in a department store, I don’t want to see the sign for the whole floor on every aisle, just at the lifts and escalators. I just want to know where I am, what’s around me, and where I can go to see the full floor plan.

Hopefully the new BBC News navigation is a step to a more user-friendly navigation system.

I really don’t like the idea of being found, and I wonder whether this taps into an evolutionary psychology fear of giving away location in case of being found by predators. There were mentions of a couple of other potential reading material sources: ‘The Accidental Leader’, and ‘Howard Rheingold’. Anyone familiar with these?

The Sessions

Okay, in no particular order – just whatever order I remember them in (not including the one I did – see below):

• Making ethical cola http://sparror.cubecinema.com/cube/cola/ - tastes pretty damn good
• Discussion on dashboards – I like the idea of a console widget with status of current projects etc.
• The Eccentric City – the world’s first dedicated eccentric newspaper – see http://www.eccentriccity.co.uk/
• Session on bad interviews (hope we shared some useful ideas on what intereviews are looking for)
• A couple of sessions on freelancing
• JQuery (I really am going to use it me)
• Frameworks (ditto – if I get back into creating apps)
• Emotion recognition (very interested in the mechanics of it)
• PowerPoint Karaoke (using slideshare)  – next time i’d like to have a go
• About the life science centre (see www.life.org.uk) – what a find – I will definitely be going (and about the Kielder observatory)
• Accessibility problem  solving (live session)

What I presented on

I presented on ‘a short history of navigation. Someone asked me why I was interested in this. It’s because I’m a pedant. I hate it when the links are wrong and don’t work properly. That’s what makes me a good information architect. I’m interested in evolutionary psychology, because we’re using senses evolved over millions of years and need to design websites that align with how people have evolved – it is unrealistic to expect people to adapt to websites, and I see all the time in user tests how people struggle when we don’t get websites right. So I showed some slides of some of my favourite navigation concepts, including ancient historical wayfinding, animal behaviour (including how bees find nectar), urban signage and some humour.

I’m really glad I did the presentation, because it reconnected me with my passion, and I’m thinking more about navigation. I feel that web navigation could be better. I love the simplicity of SatNavs, iPods etc, and will create a new way of navigating which make life so much easier for users.

Favourite Bits

• Meeting great people
• Feeling inspired
• Watching Dr Horrible’s Sing Along Blog – see http://www.amazon.com/Horribles-Sing-Along-Blog-Patrick-Harris/dp/B001M5UDGS
• Playing werewolf (especially the first round) – see http://www.portlandwerewolf.com/rules
• Discussing hubs (an information architecture concept)
• Disovering the Life Science Centre
• The Eco Kettle

Final Thoughts

See http://www.uie.com/brainsparks/2006/03/30/the-one-minute-test/

The Big Idea

Mr Horrible’s Sing Along Blog – okay, not really a big idea – but I will definitely be getting a copy. Really, the big idea is to make navigation on the web easier for everyone

The Big Surprise

The fact that wifi wasn’t working too good actually encouraged people to interract more – I was going to do a presentation on ‘usability question time’ but couldn’t get wifi working on my machine or through my mobile. Which leads me nicely to…

The Big Question

What non-IT sessions could I do at my next BarCamp? On the way back, I’ve had a couple of ideas, such as how to get inspiration during a creative block – or communication tips - or whatever I’m intersted in at the time. I’d like to do a session that involves looking at sites live (like the Accessibility session yesterday) – and one that involves just chatting (like the last session today on dashboards).

Simulation
http://zool33.uni-graz.at/schmickl/models/bee_foraging_decision.html

This raises a couple of important information seeking issues for the information architect. Firstly, how do we enable people to find information when we can’t provide them with smells or waggle our tails at them? Secondly, what can we learn from this in terms of how we enable users to find things on websites?

I believe that bee foraging behaviour behaviour helps to explain the potential of folksonomies. Look at the simulation at the link above. A tag cloud is a metaphor for bee foraging. Users find content which interests them and tag the content: they smell nectar. The tag cloud tells other users where to find content which might interest them: they respond to the tail waggling dance.

Metaphor
http://del.icio.us/tag/

During the plenary, I asked the audience how many institutions had at least one full-time information architect. Only three hands went up – and I suspect that most of those, if not all, were from St Andrews. So, it’s still a very small community. However, there seems to be some interest in the topic. I hear the phrase mentioned by people, and there was a good turn out for my workshop.

I had various activities planned for the workshop, but in the end, we only had time for the one on ‘what is information?’ The questions sounds easy enough, but it’s a good one. And where does knowledge fit in with the information archtecture role. Some academics argue that there is a level beyond knowledge, and that’s wisdom. Although, presumably, you have to be a professor to have wisdom

The rest of the workshop turned into an IA surgery, and I really enjoyed the discussions which came out of the questions people brought. We discussed, amongst other things, the relationship between information architecture and usability, governance, user testing, faceted taxonomies and portals.