7 Tips To Make Your Website’s Navigation More Usable

Thursday, September 13th, 2007

Trackback

In this article on our series detailing web usability, we will be discussing your website’s navigation and how we can improve it in terms of usability.

How well your navigation functions is sometimes over looked by Web Designers and Developers. It’s very important because if a user finds it difficult or time consuming to navigate your website, it may discourage them from returning or browsing longer. Sometimes, a client may want a navigation format that seems unreasonable but it’s our job to educate them. Keep in mind that this blog does not follow all the tips, sometimes due to blog engine restrictions or other factors. Let’s get right to the tips:

1 - Maintain Consistency

This may seem pretty straightforward, but we’re often guilty of smaller infractions:

Don’t add or substract items from your navigation - An example would be adding a link to your Homepage as soon as you enter a subsection
Standardize your navigation’s location - Don’t suddenly change your top navigation to a side navigation if the user reaches a mini-site or subsection. This includes changing your header image’s size, which in turn shifts your navigation.

2 - Avoid Using Images

Fortunately, this trend is slowly dying down. The age of having to make three link states (over, active, normal) are over for most of us. A text-based navigation:

Helps with Search Engine Optimization
Meshes well with Content Management Systems
Is easy to create and maintain with stylesheets - Stylesheets help with redesigning a navigation throughout your website

3 - Reduce The Clutter

Do a navigation clean-up once in a while. Make sure there are no dead links and think to yourself: Is this section really needed? If you’re considered having a serious look at your navigation to improve usability, I suggest drafting an Information Architecture for your website, similar to the one I’ve done for a client as seen here:

Information Architecture

4 - Avoid Duplicate Content

If you’re able to reach identical pages via different navigations or different items in the navigation, users may get confused. They could end up visiting the same page twice and getting disoriented or frustrated. Like mentioned above, maybe going through your website and detailing an Information Architecture may be the best idea.

5 - Avoid Dropdown Navigations

Fortunately, these are also on the way out. Sometimes, clients may think these are the best things since sliced bread, but it’s your job to convince them otherwise. Dropdown Navigations are a bad idea because:

They are not standardized - How they may work on one website might be different from another. Some users don’t enjoy having to go through a learning curve when arriving at a fresh website
They are often clunky - Have you ever tried to reach a third hierarchy on a dropdown navigation? It sometimes requires a lot of meticulous mouse work, a big pain in the butt for some users. It gets even more frustrating if the user wants to reach several different third hierarchy items and has to repeat this process
More trouble then they are worth - You have to worry about validating them/getting them to work across all browsers and to worry about coding them in the first place

6 - Match Your Header Title to your Navigation Title

This also helps with orienting your user. Imagine the frustration if you clicked the title: “8 Tips For Web Usability” and ended up arriving at a website with the title: “8 Tips To Make Your Website’s Navigation More Usable”. The same applies to your navigation. Keep them identical. If you need 5 words to explain that specific page, use those same 5 words in the navigation.

7 - Distinguish Active Links

Users don’t enjoy clicking on links only to have a page reload. You can avoid this by distinguish active links, whether it’s by removing the underline, bolding the link or changing the font color. Sometimes you’re restricted by your blog’s engine, but if you can easily pull it off, do it.

That’s all for now, I hope that helps.