If I gave you the keys to my house and asked you to find a particular object in it, you would probably be able to get hold of it fairly quickly. Even though you’ve never been to my house, you’d have a pretty good idea where to find my computer, an alarm clock or my toothbrush. No matter what I asked you to look for, you’d be able to find it pretty quickly.

But how can you manage that, given that you have never been inside my home? The answer comes from some basic psychology that suggests we have mental representations of the world around us. These models are there to help us cope with the world. Think how difficult it would be to lead your everyday life if you had to randomly search for your computer every time you needed it? Or what about the struggle you’d have each morning if you couldn’t remember where the shower was? The mental model that automatically tells your brain that the shower is in the bathroom, which is upstairs next to the bedroom, means you can cope easily. Knowing that computers are usually in a study or spare bedroom helps you get on with your work quickly and without frustration.

If you visit a strange city, you could probably hazard a good guess as to where the railway station would be – somewhere near the city centre – or where to get some food in the evening – where all the bright lights are. Your mental model of what a typical city centre is like means that you can cope with the world you are surrounded by without too much difficulty.

So what’s your mental model of a website? Indeed, is your mental model of a website the same as the next person’s? We know that on the whole we all tend to have similar models of homes or cities – very familiar environments. That’s why you’d be able to find things in my home. But what about websites – do we all share the same notion of what a website is, for example?

Very little research has been done on this, but one study in 2002 at Kansas State University (www.trnmag.com/Stories/2002/071002/Conceptual_ links_trump_hyperlinks_071002.html) suggests that the mental models of websites that web designers have are remarkably different to the mental models of the users of the sites they design. There appears to be a huge mismatch between the way in which designers perceive websites and the way that users perceive them.

Nowhere is this mismatch more obvious than in the navigation system a web designer has chosen. If the navigation system reflects the mental model of a web designer too closely, there’s a danger that website visitors will not be able to find their way around. The Kansas study reveals that website users have a contextual model – they associate the context of the content more easily than the structure.

In the early days of web design – or, to be more precise, website production – all you could do was produce hyperlinks as a means of navigation around the few pages that existed. And those hyperlinks were almost always based on context. Only when structure-based design programs (like NetObjects Fusion) hit the scene did the designer get the opportunity to easily structure a site with sections, subsections, departments and so on. This led to structurally based navigation, rather than being centred on contextual connections between the various bits of content.

Even so, structural navigation bars and lists certainly helped people find their way around websites. Standard terms began to creep in: Home, About Us, Contact Us and so on. Several standardised sections of websites became regular territory for designers. Indeed, web design programs even incorporated several of these standardised structural elements in website creation wizards. Ask Microsoft Expression to set you up a new website and it will happily create a basic index page, but will add a Contact Us page, an About Us page and several others of these now de facto standards.

This structural approach certainly helped web designers and site developers; working out where to place a particular item of content was easy as you had a good idea of which section it deserved to go in. However, the more sections a site needed, the wider the menu bar had to be. So it wasn’t long before web designers resorted to vertical menus, mostly on the left-hand side of the page.

In the Web 1.0 world, this led to two standard methods of navigation: a menu bar across the top of the page, or a longer menu in a left-hand column. The importance of such clear navigation in those relatively early days has meant that site visitors have been able to develop a mental model of a typical site.

Researchers working for Fidelity Investments discovered how important navigation location was during a study of a new design for their website, which they conducted in 2005. Several alternative navigation options were tested among 700 users, but the navigation option that led to the lowest error rate in finding specific information was a menu bar across the top of the page. In other words, the study confirmed that navigation at the top of the page was more closely linked to the user’s mental model of a website, since they were more able to find relevant information using a menu bar than they were using a button menu with rollovers, or one of four other alternatives.

In a sense, it’s a bit like a UK road map. No matter who draws up the map or who publishes it, motorways are always big, fat, pale blue lines. It means that no matter which map we buy, we always know how to locate a motorway. It seems that menu bars at the top of the page have become as familiar as blue lines on road maps. Since so many sites use such navigation, we know where to go to find our way around.

But it’s not just giving users a familiar method of finding the navigation system – it also has implications for accessibility. Peter Abrahams (www.it-analysis.com/about/author/47/peter_ abrahams.php) says that top menu bars are important for disabled users in particular. He said, “The top menu bar is an important accessibility feature for all users as it not only provides quick access to the relevant areas, but it should also give a clear view of what the site owner believes the site is about. Having a clear view of the structure is important for any user, but for people with visual impairments, being able to build up this mental image is really important.”

However, in spite of the need to meet accessibility standards and the emphasis that structural-based navigation put on the whole notion of menu lists and menu bars, the advent of rich internet applications such as Flash-based design has meant that many designers are now experimenting with alternative navigation systems. What was once a central theme of good website design has now been somewhat sidelined.

Now, designers are looking towards what has been termed the ‘speaking block’ method of navigation. This is where web designers have moved away from the menu bar towards blocks combining images and text and colour codes to explain to visitors where they should go next and what they can expect to find there. Navigation has been moved from showing people what’s available on the whole site towards what might be termed ‘pathway navigation’. Users are now presented with only a handful of options to choose from – often in Flash-based boxes on a page – giving them relatively few choices as to what to do with a site.

Chris Rourke, who runs Uservision (www.uservision.co.uk), an eye-tracking and usability testing company based in Edinburgh, thinks this could be a good move. “If a user is unsure which link to click on, it shows itself in the eye-tracking data through eye movements between the two or three options they are considering clicking on,” he explains. “With clearer navigation, their eye movements show a clearer direction to the place they want to go.”

Rourke also suggests that things like rollovers, additional text to support menu items and previews of subsequent pages can all help users find their way around a site, because they provide confidence that they are choosing the right links to go to and that they are in control.

The trend towards pathway navigation using ‘speaking blocks’ certainly appears to be backed by usability specialists, since it all tends to make it easier for a user. However, it can also mean laziness among web designers. They could produce simple speaking-block navigation that sends people in directions they don’t want to go in. The user then either becomes frustrated because they can’t find what they really came for, or worse, they abandon the site and search for an alternative.

The way out of that is to ensure that the website navigation is closely linked to the mental model of the users. Chris Rourke explains, “A key thing is to provide a good navigation system based on the user’s mental model and that should be based on research with end users. Methods like card sorting are a great way to discover how people group and label things on websites. People like to know where they are going before they click on a link. This is still true, even though pervasive broadband means that the cost people pay in time for clicking the wrong link is less.”

Even though speaking-block or pathway navigation may seem clear, it might not fit the mental model of the users of your website. They could therefore click on the wrong link, or be unsure of where to go as what’s provided doesn’t match their model of the website. Furthermore, if the navigation options are not in the place where their mental model has them (often at the top of the page), then users will not even find the appropriate links in the first place.

This is shown in a blog by designer Nathan Borror who produces Playground Blues (www.playgroundblues.com). Unless you’re quick, you won’t realise that the brightly coloured strip down the left-hand side of the page is actually the menu bar. And when you do hover over a colour in the strip, you are given a slide-in icon, leaving you to work out what it means and whether or not it is where to go. It’s a lovely design implementation, but whether it fits the mental model most people have of websites is debatable.

Even more experimental is Nickad (www.nickad.com); you don’t even see the navigation unless you actually click the mouse. The navigation menu then pops up anywhere you make a click – and it only sticks around if you keep the mouse button held down. Hardly what you might call intuitive, and so far removed from the familiarity of top page menu bars that it could be rendered useless to many visitors.

The recently revamped BBC website (www.bbc.co.uk) is an example of speaking-block navigation. Indeed, the whole of the front page is now just navigation, but again it’s doubtful as to whether it actually fits the mental model people have of the BBC website – there is just so much navigation, it’s almost overwhelming link overload.

Heat maps of website usage show that the most frequently clicked on areas of a page are the top and the left of the page – eyes and clicks tend to follow the shape of the letter ‘F’. So even the BBC’s front page is turning its back on established usability knowledge by putting its pathway navigation in less ‘hot’ parts of the page.

Usability guru Jakob Nielsen reckons that the vast majority of websites are not getting these basics right. In the rush towards Web 2.0, says Nielsen, many developers have ignored the primary elements they need to ensure work properly. “People just want to get in, get it and get out,” he told the BBC last year. And that obviously means clear, usable, accessible navigation – something many sites are now ignoring in the rush towards newer technologies and the software that allows better creative expression of a designer’s ideas. The mere existence of Flash means a web designer can do things they could only dream of in the past, but allowing designers almost complete creative freedom could mean that they’re taking their ‘eye off the ball’ in terms of the principal function of what they are doing – helping users find their way around.

So how can you be sure that you are striking the right balance between creativity and fitting the mental model of websites, so that users can find their way around? Usability testing is key, but it can be expensive. However, as the usability experts at Amberlight (www.amber-light.co.uk) explain in their report on return on investment of usability testing, “The cost of employing usability methods is considerably cheaper than that associated with redesigning an end product.” They highlight the example of Staples.com, which had a navigation button without an associated label. By labelling the button, it led to fewer shopping cart abandonments. It’s not just making navigation easier for the user, but it can also clearly impact the profitability of a site.

You don’t always need to go to the expense of employing usability experts to ensure your website navigation actually works for your users. You can, in fact, do it yourself, using software such as Morae (www.techsmith.com). This records user on-screen activity (such as mouse movements and clicks) together with a video of where they looked. Together they can help you analyse how people use your navigation and check whether, as Chris Rourke from Uservision says, they are confident in using the site. The base Morae version is just $195, although the full package costs $1,495. Even so, it can be less than employing a usability company.

Usability testing with Morae will also help you work out what parts of your site people actually use to find their way around. Not everyone will stick with a menu bar, even if you place it in the expected position of the top of the page. As accessibility expert Peter Abrahams points out, navigation “includes all tools and techniques that enable a user to get from where they are to where they need to be on the website”. So navigation is not just about menu bars, but about links, search options, hot spots, access keys and so on. It’s about every process people might use to find their way around.

So to go back to the subject upon which we started – finding things in my house – you could only succeed if my house is typical and contains all the various things in it you would expect to help you. If I had an experimental design, perhaps with several floors where each floor was one room, and each room was built around moods rather than functions, you’d be hard-pressed to find what I asked you to look for. And it’s the same on the web. Move away from the mental model people have of websites and you risk losing visitors. No matter how creative you have been and how wonderful and amazing other web designers find your work, if users find it all too difficult to locate exactly what they’re looking for, then all your work may have been for nothing.