How to improve site navigation

Stripping a website to its barest form, ignoring for a moment, content which is only text and images, all a browsing experience is, is navigation. It’s clicking links that take you to other pages with more links. The main navigation of your site is such a crucial part of this as it represents the persistent doorway to the most important pages of your content.

Many sites also have secondary navigation, relegated to the bottom of the site, containing ‘boring stuff’ such as Terms of Use, or Privacy Policy links; it makes sense not to have those links in your main navigation; you don’t want them spoiling your landing page. But here’s a hint, if you have to have a site map included in that secondary navigation bar, you’re doing it wrong.

Be boring

Good design requires good organisation. You need to work out what information is necessary to the user, and then divide that into sections. This is a standard process for web designers, and unless your site is single page/parallax scrolling, you’ll want to put this on individual pages to make it easier to digest, traditionally accessed through a main nav bar. The standard format for this is a horizontal bar along the top of the site, and whilst you may think that having pretty or whimsical navigation will engage the user; or you think that you can redefine ‘navigation’ and make it more usable by having one link that subdivides through nesting links in the pages; it won’t work.

The majority of users don’t want to work to use the site, they will expect to see standard format, unfortunately. As much as I would love to see innovative designs and navigation processes, the average user does not, and will instantly turn off. Having a non-standard interface for your main navigation will, simply put, increase your bounce rate instantly. The most important thing here, however, is not style, but persistency. Having the navigation on every page is important, coupled with consistency of location, as it is a landmark on your page, tethering your user’s browsing experience.

By this point you’ll probably have noticed the point I’m trying to hammer home, web design is so important for standing out, but your navigation is not the place to do it.

Be transparent

The second mistake often made is thinking that navigation is content. It isn’t. Imagine if you were invited to a party, great food, great people and conversation; however the invite doesn’t tell you this, it isn’t what you expect at all. Instead of telling you where, when or what the party’s going to be, it gives you a fancy name, perhaps ‘John’s Fancy Pants Party of the Century’. You get the idea. The navigation needs to be descriptive, it’s just a link, people need to know what to expect. Don’t forget it’s a part of your SEO, so if someone Googles ‘your PRODUCTS’, they will be taken to your Products page, unless of course you labelled it as ‘Our creations’, or something equally lovely and unique.

If you look at sites that have won design awards, they will very likely break one of the navigation rules that I’ve laid out here. However, their use of white space and elegant design is all at the cost of usability. This type of poorly-functioning site uses what is known derogatorily in the web design industry as ‘Mystery Meat Navigation’, or MMN. It can look cool, and make total sense to the designer: “Isn’t it obvious that mousing over the left hand side of the page, 45.1cm down the page bring up the links to the page highlighting my political views? It’s clearly a reference to Farenheit 451, my favorite book, and the left-wing political views that I share with it. Duh!” Extreme scenarios aside, MMN can be a nightmare for a user who actually wants to use your site, not just look at how pretty it is. Imagine the bounce rate of a site that went through every link like an automated phone service goes through options! MMN is the same thing! ‘Mouse over 1 for: Home‘, ‘Mouse over 2 for: About‘… you get the idea. You have to go through every single link to find what you want, and by the time you’ve reached the end of the navigation, you’ve forgotten what you came for! This also goes for location feedback, which is essentially highlighting, usually with a color change, where on the site the user is, through the navigation.

Be singular

Navigation is the familiar portal to new and interesting content. Whilst I have previously been telling you to stick to conventions for familiarity’s sake, and to keep your bounce rate as low as possible (providing your content is good), there are a few oft used navigation elements that you should avoid.

The primary offender is the dreaded drop down menu, the greatest sin if you don’t have a separate mobile interface. It often doesn’t extend to search engine crawls, and is bad for usability if it’s unexpected by the user. They see the top (parent) links and make their choice based on what options they have there, and then suddenly there are a number of other pages. Don’t bring in nested child sites to your main navigation, it’s messy. This contributes to a general point, having many pages dilutes your hits, and therefore negatively impacts your traffic-related SEO. If you need more pages than you can fit on a standard navigation bar, you have bad, verbose, content, and will suffer as a result.

Be succinct

If you haven’t guessed it already, keeping the number of items on your navigation down is crucial. Overcrowding is especially evident on sidebar navigation menus, where designers think that they can extend it indefinitely since the user is accustomed to scrolling vertically. Now assuming the menu is easily recognisable as mentioned earlier, having fewer items make them easier to memorise in the short term, meaning your site is more usable for the average user, as they can recall what your main pages and links are.

It is often quoted that the short term memory can hold only 7 items, for up to 20 seconds, meaning you should restrict your navigation to 7 items or less. Whilst this has sound logic to it, and I would hate to endorse navigation with more items, if you have links very specific to your site, you can relegate the more familiar ones to less important zones of the bar (which I will explain further later on), as users will expect, and know those are there without having to look to hard.

Be standards-compliant

In this, the age of Google, we all know just how important good SEO is; and by ‘good SEO’ I don’t mean compromising your content and site for higher search rankings, because that’s just bad SEO. Optimising your site for search engine crawlers isn’t always about using as many keywords as possible or anything like that, it can be as simple as not using buttons in your navigation. Always use links for your navigation, it’s a good long term design choice, and it can be detected by search engines. It’ll also make your site more usable (as long as it’s well designed). Users with bad eyesight for instance, who bump up their text size, will particularly benefit from this; as well as mobile users would have to wait longer to load your button images, then wait some more after clicking them as their update state was loaded! Segueing from using button images as navigation, using actual images without subtitles is a bad idea. This sort of navigation is never recommended, text should always be used, and as stated many times above, in a standard format.

Be ordered

Finally, we reach the most disputed and psychoanalytical of all the navigation tips, the order! It is often claimed, with fairly sound logic, that the first and last links on a standard navigation bar are given the highest priority to the subconscious mind, hence why so many sites use a banner as a home/landing page link these days, instead of having a traditional Home link at the start of the navigation. The thing with the ever-present Home link is that it’s so often overlooked out of a simple expectation that it’ll be there. It makes very little difference to the browsing experience of the average user whether it is or isn’t, and therefore isn’t really counted as ‘first’ link if you decide to put one there.

That aside, users will naturally view links left to right, assuming they’re western and read in that fashion, as the majority of your users are likely to do. This means that the links with the least individual impact will be those in the middle of the navigation menu, however they can have a collective effect that may have repercussions in how the user’s subconscious perceives the experience of your site. This is detailed further in my article on telling stories with your designs, where I explain how the order in which you place your menu items tells a story about the progression of a user through your site. This theory is mostly speculation, however it makes sense that having a support link directly after a store/products one in your menu can infer both failure to deliver on your products, and that support is needed and used enough to warrant a place on your main navigation menu.

Conclusion

Whilst all this advice is relevant for most traditional websites, and will improve usability for the average user, do not take these tips as gospel. All sites and designs are different, and some may benefit from ignoring some of the guidelines listed above. Above all make your site usable first and pretty second, your bounce rate will decrease, and you can build on what you have.

Take a look at the navigation of other sites and try and think about what makes it work, not work, or even makes it unusable. Take RockPaperShotgun, for instance. It has a navigation bar, yes, and it would have been standard about 10 years ago! It works, but its basic format and numerous links make it feel very secondary, and the site feels like there’s something missing from the big hole next to the title banner, where a navigation bar would go; an upgrade to a tabbed design could improve this.

Or take Google.com, an obvious example of course, this one’s a little different however, as they have a persistent banner navigation for a network of sites. You’ll notice that the link for YouTube (the only link where the banner menu doesn’t persist) is placed in the middle. This is because YouTube is often used as an independent site, rather than as part of the Google network, so is relegated to the least important spot on the bar. The drop down ‘more’ tab is at the end so that it feels like an extension to the original bar, without items clogging up the main banner. The others you’ve probably worked out for yourself; the Search button being the first uses the same reasoning as the ‘Home’ button, and the Images link is the second most used, meaning that you need minimal mouse and eye travel in order to click it. Once you begin to break it down, you’ll probably begin to see how much thought Google has put into this, and you can see why they are one of the leading innovators in the online design spheres.

Have a look and see if you can work out why the rest of the links have been put where they are, and then have a think about whether there are any improvements you can make to your navigation.

Do you adhere to the tips here? Do you favor single level navigation or comprehensive drop-downs? Let us know in the comments.

Featured image/thumbnail, signpost image via Shutterstock.

Dan Rajan

Dan Rajan is a film student, creative content designer, and passionate writer from the UK, follow him on twitter!