SpyreStudios

Web Design and Development Magazine

  • Design
  • Resources
  • Showcase
  • Inspirational
  • Tutorials
  • CSS
  • Resources
  • Tools
  • UX
  • More
    • Mobile
    • Usability
    • HTML5
    • Business
    • Freebies
    • Giveaway
    • About SpyreStudios
    • Advertise On SpyreStudios
    • Get In Touch With Us

Curing the Navigation-itis Syndrome

March 26, 2011 by Oleg Mokhov 14 Comments

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.

Navigation-itis

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

Touch Devices

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?

National Geographic Magazine

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.

Filed Under: Accessibility, Article, Design, Usability, UX

Comments

  1. Deplatt says

    March 27, 2011 at 12:41 pm

    What do you do if you have 60 nav items that are all equal in importance? (a portfolio for example)

    -dp

  2. Deplatt says

    March 27, 2011 at 12:45 pm

    Also, 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

  3. Alex says

    March 27, 2011 at 1:31 pm

    I 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.

  4. Jon Phillips says

    March 27, 2011 at 3:46 pm

    Well, 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.

  5. Jon Phillips says

    March 27, 2011 at 3:47 pm

    A portfolio with 60 nav items? :)

  6. ngassmann says

    March 27, 2011 at 3:50 pm

    This 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.

  7. Jon Phillips says

    March 27, 2011 at 4:13 pm

    I 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.

  8. Greg Pettit says

    March 27, 2011 at 5:31 pm

    Vertical 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.

  9. The Urban Times says

    March 27, 2011 at 7:16 pm

    Good article – will definitely take some of that into account

  10. theComplex says

    March 28, 2011 at 3:17 am

    Great post Oleg. I’m always looking for new ways to consolidate.

  11. Karl says

    March 28, 2011 at 9:08 am

    We 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

  12. IntuitionHQ says

    March 28, 2011 at 9:03 pm

    Cut 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.

  13. Junior D'haese says

    March 29, 2011 at 7:42 am

    Thank you for this most inspiring post!

  14. wally says

    March 31, 2011 at 5:27 pm

    There 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.

Leave a Reply

Your email address will not be published. Required fields are marked *

Please prove you're human *

Recent Posts

  • How to Choose a Stunning Font Package for Your Brand
  • 31 Fresh Design Elements for Spring and Easter
  • 10 Templates for Music Concert Flyers
  • How to Build a Web Scraper Using Node.js
  • Best PHP Books, Courses and Tutorials in 2022

Archives

  • May 2022
  • April 2022
  • March 2022
  • February 2022
  • January 2022
  • December 2021
  • November 2021
  • October 2021
  • September 2021
  • August 2021
  • July 2021
  • June 2021
  • May 2021
  • April 2021
  • March 2021
  • February 2021
  • January 2021
  • December 2020
  • November 2020
  • October 2020
  • September 2020
  • August 2020
  • July 2020
  • June 2020
  • May 2020
  • April 2020
  • March 2020
  • February 2020
  • January 2020
  • December 2019
  • November 2019
  • October 2019
  • September 2019
  • August 2019
  • July 2019
  • June 2019
  • May 2019
  • April 2019
  • March 2019
  • February 2019
  • January 2019
  • December 2018
  • November 2018
  • October 2018
  • September 2018
  • August 2018
  • July 2018
  • June 2018
  • May 2018
  • April 2018
  • March 2018
  • February 2018
  • January 2018
  • December 2017
  • November 2017
  • October 2017
  • September 2017
  • August 2017
  • July 2017
  • June 2017
  • May 2017
  • April 2017
  • March 2017
  • February 2017
  • January 2017
  • December 2016
  • November 2016
  • October 2016
  • September 2016
  • August 2016
  • July 2016
  • June 2016
  • May 2016
  • April 2016
  • March 2016
  • February 2016
  • January 2016
  • December 2015
  • November 2015
  • October 2015
  • September 2015
  • August 2015
  • July 2015
  • June 2015
  • May 2015
  • April 2015
  • March 2015
  • February 2015
  • January 2015
  • December 2014
  • November 2014
  • October 2014
  • September 2014
  • August 2014
  • July 2014
  • June 2014
  • May 2014
  • April 2014
  • March 2014
  • February 2014
  • January 2014
  • December 2013
  • November 2013
  • October 2013
  • September 2013
  • August 2013
  • July 2013
  • June 2013
  • May 2013
  • April 2013
  • March 2013
  • February 2013
  • January 2013
  • December 2012
  • November 2012
  • October 2012
  • September 2012
  • August 2012
  • July 2012
  • June 2012
  • May 2012
  • April 2012
  • March 2012
  • February 2012
  • January 2012
  • December 2011
  • November 2011
  • October 2011
  • September 2011
  • August 2011
  • July 2011
  • June 2011
  • May 2011
  • April 2011
  • March 2011
  • February 2011
  • January 2011
  • December 2010
  • November 2010
  • October 2010
  • September 2010
  • August 2010
  • July 2010
  • June 2010
  • May 2010
  • April 2010
  • March 2010
  • February 2010
  • January 2010
  • December 2009
  • November 2009
  • October 2009
  • September 2009
  • August 2009
  • July 2009
  • June 2009
  • May 2009
  • April 2009
  • March 2009
  • February 2009
  • January 2009
  • December 2008
  • November 2008
  • October 2008
  • May 2008
  • April 2008

Categories

  • Accessibility
  • Android
  • Apps
  • Art
  • Article
  • Blogging
  • Books
  • Bootstrap
  • Business
  • CSS
  • Design
  • Development
  • Ecommerce
  • Fireworks
  • Flash
  • Freebies
  • Freelance
  • General
  • Giveaway
  • Graphic Design
  • HTML5
  • Icons
  • Illustrator
  • InDesign
  • Infographics
  • Inspirational
  • Interview
  • Jobs
  • jQuery
  • Learning
  • Logos
  • Matrix
  • Minimalism
  • Mobile
  • Motion Graphics
  • Music
  • News
  • Photoshop
  • PHP
  • Promoted
  • Rails
  • Resources
  • Showcase
  • Tools
  • Tutorial
  • Twitter
  • Typography
  • Uncategorized
  • Usability
  • UX
  • Wallpapers
  • Wireframing
  • WordPress
  • Work

Meta

  • Log in
  • Entries feed
  • Comments feed
  • WordPress.org

SpyreStudios © 2022