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.
Author: Oleg Mokhov
Oleg Mokhov is an electronic music artist and design enthusiast. He makes electronic music that’s a cross between Four Tet and Boards of Canada.
Deplatt says
March 27, 2011 at 12:41 pmWhat do you do if you have 60 nav items that are all equal in importance? (a portfolio for example)
-dp
Deplatt says
March 27, 2011 at 12:45 pmAlso, drop-down menus essentially HIDE information so you don’t know what info is there until you start looking for it.
Also, sometimes too much real-estate on a page can be a bad thing if you have limited content. So a left side nav might be a better choice in such cases
-dp
Alex says
March 27, 2011 at 1:31 pmI agree with a lot of points, but the National Geographic example is a wrong example in my opinion. I think its a very easy to use and clear navigation.
Jon Phillips says
March 27, 2011 at 3:46 pmWell, a well-designed drop-down should help the users narrow their search. You’re right, information is hidden, but it should be clear that clicking will reveal more options related to the main nav item.
Jon Phillips says
March 27, 2011 at 3:47 pmA portfolio with 60 nav items? :)
ngassmann says
March 27, 2011 at 3:50 pmThis post fails to take in to consideration users with disabilities. Everytime we run a usability test on a site with a drop down menu, those users with disabilities always give the site awful marks. Also, simply discounting vertical navigation because horizontal navigation can do the same thing isn’t a valid reason. Sure it may be less appealing to you, but it doesn’t mean it is not less appropriate. How are vertical naves “more unconventional”? Have you done studies, or is that a subjective opinion too?
I’m all for simplifying nav, and even prefer horiz navs, but I can’t say that just because that is my opinion, it is the right decision.
Jon Phillips says
March 27, 2011 at 4:13 pmI can completely understand why users with disabilities give awful marks to sites with drop-downs, I don’t especially like drop-down menus either (unless it makes sense for a particular project). The point was not about drop-downs only but more about giving some ideas and tips on how to improve navigation and make a clearer path for the users to follow and find information.
You mention that every time you run a usability test on a site with drop-downs, people with disabilities give them bad ratings, I’d be curious to see those sites you’re running the tests for and the test results, this could be very interesting.
One of the reasons we talked about drop-downs in this post is after looking at some popular sites like Google (drop-down in the top right for signed-in users), Yahoo (some drop-down menus in the header), Digg, Twitter and a bunch of other sites. It all depends on your target audience.
Greg Pettit says
March 27, 2011 at 5:31 pmVertical nav is just as valid as horizontal. I tend to use horizontal because as you say it’s easier to fit into a design. But I’ve seen lots of sensible vertical nav. I would say that when you have very few menu items, you should consider if a vertical nav fits into your site design better. Your site is probably more likely to be heavily content-based (such as a personal blog) and this allows more immediate visible access to the content.
The Urban Times says
March 27, 2011 at 7:16 pmGood article – will definitely take some of that into account
theComplex says
March 28, 2011 at 3:17 amGreat post Oleg. I’m always looking for new ways to consolidate.
Karl says
March 28, 2011 at 9:08 amWe use vertical and horizontal menus, and both have their place for sure. But there’s some good advice here. The navigation and how it works is one of the most important things to consider when designing website!!
Thanks again
IntuitionHQ says
March 28, 2011 at 9:03 pmCut it down to your top 5 or 10. Certainly each of them don’t need their own navigation item. You could make a slideshow series of them, do something nice and ajax-y. You can make sure they are tagged nicely, so if people really need to see a specific type, they can search for them.
Whatever the solution, showing all 60 in your navigation menus isn’t going to help.
Junior D'haese says
March 29, 2011 at 7:42 amThank you for this most inspiring post!
wally says
March 31, 2011 at 5:27 pmThere are competing theories on using Drop-downs. At the moment, I’m on the fence with this issue. Although dropdowns are often expected, and fairly well received by desktop visitors, mobile visitors are quickly frustrated by them–as they often don’t respond well to touch. Sites that can afford to make a “mobilized” version probably won’t run into this.
For the rest of the world, what can we do? Maybe the idea is to make gallery pages which better house the sub-categories of each critical category on the “navigation” menu. This could lead to better SEO, or even a better user experience.
I’d agree that its easy to get carried away with “important” navigational elements, which is why good categorization is so important. Think about what the user wants to accomplish, not where you think they should go.