PSDFan Extra

Thursday Theory: Rules For a Perfect Website Navigation:

It’s time for our second installment of Thursday Theory, our new weekly post series!

Today I’ll be looking at how to achieve a really effective website navigation, and how to avoid some of the most common pitfalls that website owners encounter. I should be clear that it’s really impossible to have a ‘perfect’ navigation, but we can certainly try! Of course, your navigation will vary depending on your site topic/layout, however, hopefully these ground rules should give you a good foundation to work from.

Include Active/Hover States

This is an incredibly important part of website navigation, yet something overlooked by a lot of people. There are several benefits of including an active/hover state in your navigation:

• The active state will allow the user to instantly know where they are within your website. Combined with breadcrumb navigation (covered later) this should eliminate a lot of usability issues.
• The hover state will let your users know that your menu is in fact comprised of links, rather than just being static text.
• The hover state will also give your menu a more interactive feel, engaging the users. I typically click links with hover states more than those without, primarily because the hover state encourages me to do so!

Looking at the navigation right here at PSD.FanExtra we not only use a hover state on the primary navigation, but also in our drop down menu, to aid usability. And yes… I know we’re not using active states right now, but it’s something I’m working on.

CSSMania uses a great active menu state, so that the user knows exactly which part of the site they are viewing.

Don’t Include Too Many Links

Another common error in website navigation is including too many links in your menu. If the user is bombarded with a huge variety of options it will simply confuse them, and render your links useless.

A good tip is to try and keep your links below 6-7. Any more than this and it may be a good idea to introduce a second tier navigation or drop-down navigation. It’s no excuse to say that you have a lot of content, as even the largest sites in the world can manage to use a minimal navigation menu.

LogoMotive is a great example of a simplistic navigation. The limited number of menu items means that it’s very easy for users to comprehend.

1stWebDesigner is a blog with a lot of content. However they’ve kept their navigation menu down to 7 links, by integrating a category-based drop down menu. Furthermore they’ve integrated attractive icons to make the navigation even easier to understand.

Keep Your Menu Prominent and Clear

There is no point integrating active/hover states and limiting your link numbers if nobody is noticing your menu! You absolutely must ensure that you menu is prominent and legible. This means pick a font face/size that are legible, and ensuring adequate contrast against your background. Also try to have your menu near the top of your page, preferably as part of your header.

BuySellAds proves that you don’t need to use huge typography to have a clear navigation menu. The white text against a bold red background ensures that the primary navigation is really clear and legible.

Garphee uses a side navigation, yet it’s still very effective. Rather than a textual navigation, the text is constructed using images. However, this makes it all the more prominent as the button format really makes each link pop.

Don’t Forget These Essentials!

It’s important not to forget about sub-navigations and other browsing methods. Be sure to include the following on your website:

• Breadcrumb navigation – This is incredibly helpful for letting users jump between various sections of your website as well as knowing where they are within your site’s structure
• Site map navigation – This is useful for search engines, but also for your users if they want an overview of all of your site structure.
• Search options – Even with the best navigation in the world it’s helpful to include a search form. This is the key difference between searching and browsing, and it’s likely that your users will want to do both!

Smashing Magazine may not have the greatest navigation in the world, but they do well to include a navigational menu and search form in the same prominent area.

UXBooth integrate a search form into the same bar as their navigation. This makes navigating their site extremely clear and simple!

Have Your Say!

This whole point of these Thursday Theory posts is to encourage discussion and let you have your say on pressing design issues.

Do you make any of the common mistakes above, and what do you think about the issues raised? Please leave a comment below.

About the Author:

Tom is the founder of PSDFAN. He loves writing tutorials, learning more about design and interacting with the community. On a more interesting note he can also play guitar hero drunk with his teeth.

Related Posts

• A Guide to the Vignette Effect
• The Website Evolution of 6 Monster Design Blogs
• Tricks of the Trade: Great Portfolio Design (Part 1)