More and more content is being published everyday and site owners need to find ways to categorize all this content. And with more content and categories comes greater navigation problems. Sometimes navigation becomes a problem when there are simply too many options.
Thus, it’s of great importance to cure the navigation-itis syndrome and make website navigation user-friendly and easy to navigate.
This article offers tips on how to approach navigation design. These tips can help you solve website navigation issues and provide a clearer user experience. You’ll also get a real-world example of curing the navigation-itis syndrome on a website with cringe-worthy navigation.
But first, here are the tips…
Tips on How to Approach Navigation Design
When we started working on this article, Jon (SpyreStudios founder) and I exchanged some ideas, and came up with a basic set of rules as to where the navigation could/should be placed, how it should look, work and behave:
1. Stick to one navigation menu
One navigation menu is often enough. Don’t add any more nav bars than necessary; instead, combine multiple menu items into drop-down menus.
2. Have clear, simple, obvious menu choices
Make it obvious what the choices are using clear and easy-to-understand text. Be as simple as possible while still being descriptive. This way, the user doesn’t get confused but instead knows exactly what they are clicking on.
3. Keep the navigation looking like a menu
A navigation menu should look like a navigation menu. No need to reinvent the wheel. If it ain’t broke, don’t fix it. Basically, your creativity should come from the content, not how you’re presenting the content. People don’t care how to access the content so much as the content itself, so make it a no-fuss and immediately-recognizable process for them to get to it.
4. Have drop-downs be no more than 2 levels deep
Never make drop-down menus more than 2 levels deep, 3 if absolutely necessary. If you need more than that you should probably go back to the drawing board. Eliminate menu items – zap redundancies. Do you really need those 2 separate categories or pages when combining them into one will do? It’s all about better categorizing your content.
5. Have no more than 10-12 items in a drop-down
Never put more than 10 or 12 items in a drop-down menu. If you need to cram more items in a single list, try to group things or go back to the drawing board. Like with tip #4, zap redundancies by combining multiple items into one.
6. Minimize drop-down choices
Keep drop down choices to a minimum. If possible, avoid using mega drop-down menus. More choices often means less action. Don’t let users have indecision-paralysis by showing too many choices, where they don’t know what to choose in a menu so they end up not choosing anything at all and leaving the site instead.
7. Avoid icon-only menu items
Icons are great but they should be used in addition to the menu text, not instead of. Not everyone will know what every icon is, and if you don’t know what something is, you tend not to click on it. A floppy drive icon to represent ‘save’ may make sense if you’re in your thirties, but it may not make sense to a teen who has never even seen a floppy drive.
8. Avoid vertical navigation
It’s become a pretty accepted standard to have a horizontal navigation on websites. It’s not difficult to have your nav bar be horizontal rather than vertical, and in a lot of cases it’s easier to add to the design. Thus, there’s really no reason to use a vertical navigation. Not only is it more unconventional, thus potentially throwing a percentage of users off, but it wastes precious screen real estate too. A horizontal nav bar literally takes a sliver on a website, whereas a vertical navigation takes a block (you have to make space for longer-word menu items) and needs space around it to make it clear it’s navigation. Obviously it depends on the project.
9. Make it touch-screen friendly
As touch-screen devices get more widely used, make sure the navigation works with touch devices like the iPad. This is especially important for drop-down menus – make them click-friendly (and thus, touch-friendly) instead of working only for cursor-hovering.
Curing the Navigation-itis Syndrome: An Example
Let’s look at an example of navigation-itis syndrome: National Geographic’s website. While the magazine and National Geographic as a whole are great, the navigation on their website is cringe-worthy.
Have a look at the following screenshot. How many navigation menus do you count?
There’s 3 nav bars! Isn’t that a bit much for visitors? So how is it possible to prevent something like this, or what solutions would make more sense than putting 3 nav bars?
It’s possible to transform the 3 nav bars into just 1 well-designed nav bar:
1. Create drop-down menus
First and foremost, the 3rd nav bar menu items (the sub-menu items of the 2nd bar) can be moved into drop-down menus. This frees up space and presents much less choices to the user. If you’re interested in, say, photography, you click or hover over that menu item and be presented with all the items related to that.
2. Move search to the existing nav bar
There’s no reason to have search be on its own nav bar (the 1st one at the top). By moving it down to the existing nav bar, there’s even more space saved. The fact that a user is only looking at a single nav bar – even though there’s still the same number of items – will seem like there’s less choices to look at nav bar-wise.
3. Eliminate as many choices as possible
Yeah, a bit of a cop-out repeating a tip from above here, but it’s true and applicable. Does there need to be NatGeoTV and Video menu items? Is the Home link necessary when the logo can be made click-able that takes the user to the home page – an accepted standard? The same can then be done to the sub-menu items (now drop-down menu items).
Solve Website Navigation Issues and Provide a Clearer User Experience
The greatest content in the world doesn’t mean a thing if users can’t easily access it. Well okay, they’ll find and access it eventually. But many users will become frustrated or give up and leave if they can’t easily find something or become overwhelmed by unnecessary choices. So why make it harder than needed for them?
Make it easy for users to consume and share the content by curing the navigation-itis syndrome. Solving website navigation issues will provide a clearer user experience, make users happy, and make you happy by having a better-designed website that gets more content consumed, used, and shared.
Over to you: have you been able to cure navigation-itis syndrome for your site or a client’s work? What has worked best for you to solve website navigation issues and provide a clearer user experience? Share your most effective tips and guidelines in the comments section below.