» Navigation » Where Am I?
Updated: August 31st, 2009
Each page of your site should have a strong identity, clearly showing the purpose of the content and how it relates to the rest of the website. If your visitor found a link to your website on a social network or job, they will not be familiar with the layout of website and hopefully will want to find more content.
As a user browses the website, they may forget which links they have clicked and require a visual reference to this. Our objective is allow the user to quickly see what the page is for, where on the site it is and where related content can be found. We have a selection of possibilities for this, as outline below.
Breadcrumbs
More often associated with cooking, the name breadcrumbs most likely derives from the Hansel and Gretel fairytale, where a trail of breadcrumbs is left to mark the path followed through the forest.
A direct adaption of the fairytale would be to record the exact path the user has followed – each and every link the user clicked on their journey. Consider an example breadcrumb for the typical Wikipedia user, made by clicking interesting hyperlinks within the text:
Home > Hansel and Gretel > Fairy Tale > Goblin > J. R. R. Tolkien > The Times
Is this useful? Is “The Times” in anyway related to “Hansel and Gretel”? We are effectively replicating the functionality of the back button in all browsers.
It can be much more useful to use the breadcrumb technique to store the hierarchical path from the homepage of the website, just as we do on this page:
» navigation » where am i?
This method doesn’t replicate browser features and the information shown is identical on every visit to the page. On this website, I have merged the page title with the breadcrumbs themselves and this hits all three targets. The user knows about the content, the section and has a good link to related content.
The drawback of this method is its linearity, it can only display one path. The Hansel and Gretel page on Wikipedia is a member of six seperate categories. Which do we choose? That remains an exercise for the reader, but the likely option is that breadcrumbs don’t suit this scenario.
Highlight Current Page
Within the each of the navigation sections around the page, you should highlight any links to the page that is currently shown. This includes the main navigation, linking to the section the user is browsing and any other navigation pointing to the exact page in question. With this in place, when the user browses the menu, they can the section they are currently viewing and can choose content in a related area.
Make sure these links are still click-able. Even though the user is on the page, they may want to click the link in order to refresh it or reset any data fields or variables.
On this site, the top navigation has only two links, articles and blog. As there are only two options, it could be difficult to style the current section in such a way as it is obvious which is selected. In this case I managed to produce a “tabbed” effect to the site, imitating a paper diary or organiser. The effect is subtle but enough for a user to naturally understand where they are on the website.
Highlight Visited Links
By default, when a user has already visited a page, the browser will colour links to it in a different colour. Users can easily identify the places they have already been, allowing them to search or browse the remaining areas. It is also useful for recovering interesting articles they have found in the past.
There are two types of links to consider, those in the site navigation and those inline with your site content. Links within the content definitely need to be coloured different for when the target page has already been visited, as the links can be hidden within the text, making it difficult for the user to identify them.
However, many style conscious web designers would prefer to keep their main navigation links in a single colour, to keep a clearer brand. If your menu links are descriptive enough, this is acceptable.