Are You Making These Common Website Navigation Mistakes?

It’s critical. The design of a website’s navigation has a bigger impact on success or failure than almost any other factor. It affects traffic and search engine rankings. It affects conversions and user-friendliness. Everything important about your website is connected to the navigation, from content to the URLs.

Let’s look at some common navigation mistakes and see what we can learn.

Mistake #1: Non-Standard Style

Visitors expect to find horizontal navigation across the top or vertical navigation down the left side. Putting your navigation in standard places makes your site easier to use. That means a lower bounce rate, more pages per visit and higher conversions.

non-standard navigation

Be expected. Yes, marketing is about differentiation, but your navigation style isn’t the place to do it. Your goal is to help people find your content, not show them a new way to get around a website.

Mistake #2: Using Generic Labels

Navigation should be descriptive. Labels like “Products” or “Services” are generic to all businesses and do nothing to communicate with visitors. Ironically, “What we do” doesn’t say what you do. Save visitors the click (and help reduce your bounce rate) by making your website navigation descriptive.

When your navigation shows your main services or products, your site will communicate instantly.

generic website navigation

Your navigation is also a huge opportunity to indicate your relevance to search engines. Since your audience isn’t searching for “products” or “services,” navigation with these labels won’t help you rank. Use labels that include popular keyphrases according to the Google Keyword Tool.

Pro Tip! The navigation throughout the site and the site’s structure itself should be planned with search engines in mind.

Mistake #3: Drop Down Menus

Drop down menus are bad for two reasons. Depending on how they’re programed, can be difficult for search engines to crawl. But there’s another, bigger reason…

Drop down menus are annoying, according to usability studies from the NN Group. This is because as visitors, we move our eyes much faster than we move the mouse. When we move the mouse to a menu item, we’ve already decided to click…and then the drop down gives us more options. It’s a moment of friction in our minds as visitors.

drop down menus

Even worse, drop downs encourage visitors to skip important top-level pages. If your site uses drop down menus, you can see the problem right there in your stats: low visits on high pages.

Exception: really big “mega drop downs” with lots of options test well in usability studies. If you have a big site with many sections, they may improve usability.

Mistake #4: Too many items in your navigation

You’ve seen this before: that website with hundreds of links on the home page. Terrible. But even eight may be too many. This is because short term memory holds only seven items. That means that, eight is a LOT more than seven.

With fewer menu items, your visitors’ eyes are less likely may scan past important items. Every time you remove a menu item, the remaining items become more prominent. Challenge yourself to limit your navigation to five items.

Too many items in your navigation

Pro Tip: This trick also works for the rest of the page, not just the navigation. Every visual element removed makes everything remaining more prominent. You can many anything “louder” by making other things “quieter.”

Concise navigation is also important for SEO. Since are inevitably more links to your home page than your interior pages, it has the most “authority” with search engines. SEOs call this authority “link juice” and like a liquid, it flows from the home page to deeper pages through the navigation.

When your navigation has too many links, less authority and trust passed down to the interior pages. The link juice is diluted. The more concise your navigation, the more home page authority will flow to interior pages, making them more likely to rank.

Use the Link Juice Calculator to count the total number of clickable items on your home page. Amazon has around 100 and their site is bigger than yours, right?

Mistake #5: Getting the order wrong

Items that appear first or last on any list are most effective. Navigation is no exception. Psychology studies show that, attention and retention are highest for things that appear at the beginning and at the end. It’s called the “serial position effect,” and it’s based on the principles of primacy and recency.

navigation order

So put your most important items at the beginning of the navigation and the least important items in the middle. “Contact” should be the last item on the list, putting it at the far right in top-level horizontal navigation, a standard location.

Bonus Reminder! Always links, never buttons

In case you’ve missed the web design trends from the last eight years and you’re still tempted to use graphical, button-based navigation (rather than text-based links) here are five good reasons not to:

  1. Buttons are not search friendly, since the text within is invisible to search engines.
  2. Buttons are harder to update than links, requiring Photoshop and a new image for every update.
  3. Buttons load more slowly that links, making them especially bad for mobile visitors.
  4. Buttons are less accessible to the visually impaired.
  5. Buttons are unnecessary, even if you want to use non-standard fonts, thanks to tools like TypeKit.

5 Examples of Navigation Done Right

Let’s wash out our eyes with some better designs. Here are five sites that don’t make the mistakes we just looked at.

Smith Brothers – descriptive, concise navigation

smith brothers

Navigation on the Smith Brothers site is descriptive and concise. Just four items, starting with the first and second most important services and ending with a contact link.

Independent Publishers Group – descriptive, grouped navigation

Independent Publishers Group

The IPG website uses strong contrast to differentiate between the primary and secondary navigation in the header. Each with five or fewer items, making it easy to scan. The general term “services” is broken up into two more descriptive labels: “distribution services” and “digital services.”

Sweat Vac – descriptive, concise navigation with short labels

Sweat Vac

In case you didn’t see the photo (or you’re a search engine) the navigation tells you what this company does: headwear. Other products, like shirts and gear are listed next. In this minimalist approach, each item is one simple word.

Kiefer Swimwear – descriptive, ordered navigation

Kiefer Swimwear

The Kiefer site has a huge catalog, but the categories are available as main navigation throughout the site. The most important items to visitors (swimwear and swim gear) are listed first. An important item for Kiefer (sale) is listed last. Less popular categories are in the middle.

EuroFurniture – ordered navigation with mega drop downs

EuroFurniture

Most visitors have a room in mind. Fewer visitors are looking for a specific product or a brand. The EuroFurniture navigation lists items accordingly. Mega drop downs make it easy to jump into this huge furniture catalog.

Pro Tip: Tablet Friendly Mega Drop Downs. Notice the little blue ‘x’ in the top right of the mega drop down above. It’s a close button. Without this, tablet users would have no way to dismiss the window, since they have no mouse cursor to move off of the drop down.

TL;DR – Conclusion

Website navigation mistakes are expensive and avoidable. One mistake could affect both search rankings user friendliness. Make the labels descriptive. Limit the number of items to seven. Put the important stuff at the beginning. Avoid drop down menus. Follow the web navigation best practices in this article. …Then finally, check the difference in your analytics.

About the Author: Andy Crestodina is the Strategic Director of Orbit Media, a Chicago web design company. He’s also the author of Content Chemistry, An Illustrated Guide to Content Marketing You can find Andy on and Twitter.

  1. This is a great article, thanks for the tips (reminders)!

    I often run into headbutting conversations with clients who want to do something off the beaten path or have put together a menu before hiring a web designer and think their decision is correct. Using the info from this article, I can definitely have friendlier conversations with clients with some supporting content!

    • Often i have similar mistakes been done from so many site owners, and then they come asking for optimization help. Even some entrant web-designers have performed similar mistakes, especially stuffing extra drop down menus, thinking it would be a better way to build a huge linking ground.

  2. This is a great article. What’s best about it is that you not only showed what’s wrong but examples of how to fix it. Maybe those companies you used as examples will get the hint…

  3. Fantastic post and something i’m definitely going to show to clients since they are constantly making navigation/menu mistakes. Question though:
    You have the following:
    “Mistake #3: Drop Down Menus

    Drop down menus are bad for two reasons. Depending on how they’re programed, can be difficult for search engines to crawl. But there’s another, bigger reason…”

    But then under Navigation Done Right you list “EuroFurniture – ordered navigation with mega drop downs”.

    So my question is are drop downs a good thing or a bad thing? Good in certain scenarios (like EuroFurniture’s “mega” dropdowns?

    Thanks!

  4. Very informative post. Although I developed my blog on a premium theme, yet the points above do help me to understand where I’m going wrong.

    Thank you once again for the great tips.

  5. Everything seems correct, but then we have asian website. Take a look at any asian succesfull retailer they’re doing the opposite any common sense would suggest. I had some experience designing rakuten pages and it was frustrating to look at the data and to design an awful/succesful page. Some of the rules above (too many items in your navigation it’s a classic) are simply not correct if you aim a customer with a different culture.

  6. Thanks Andy for this superb Tips. I am soon going to launch my another Authority Site. Will implementyour tips. Thanks.

  7. Totally agree with this. There are some business owners who only care about the design and not the usability. These people forget that although nice designs are great, average designs can often beat a website with all of the bells and whistles if it is easier to use and there are less road bumps in the conversion process.

    • Great point, Angela! I would add that I don’t think great design and good usability have to be mutually exclusive. It’s definitely possible to have both! Warby Parker is my go-to example of a website that’s easy to use and has a nice design. Finding a way to marry the two is the real trick, and something many sites haven’t achieved…

  8. What an aye opening article. I never realized these things, but its so true. I’ll def make an effort to keep this in mind as my company’s site development evolves

  9. It is amazing to see these common mistakes happen time and time again on practically every site I visit. I cringe every time I see mistake #2! However, I am glad to see that you provided a handful of good examples at the end.

  10. This is a great article. I always find the worst part is actually convincing my clients to reduce their navigation and to use descriptive (and concise) words. This article will be a good resource to point out next time a client pushes for something that’s less effective for them.

    Lately, I’ve been tossing around how to effectively eliminate drop-down menus. I know they’re not very tablet or mobile friendly. Do you have suggestions on how to reduce clicking and unnecessary page loading while still eliminating drop-downs? The article didn’t get into much detail about solutions to the “Mistake.”

    Next, if we could all just convince the world that sliders are conversion killers… :)

  11. You say that drop down menus are a bad thing – but what is the alternative?

  12. In 4 of the 5 best practices I miss the Home in the navigation. So home isn’t needed Nymore? This is not what I see in usability studies

  13. Hello, could you explain me more about #2 and #3

    Mistake #2…I’m a little confused….a Webpage must have labels like ” products ” ” services” or is better ” what we do “?

    Mistake # 3….If Drop Down Menus = Bad Usability / Bad Seo

    Could you give a different option for a Website???? Do you have an example???

    Thanks a lot for your help

    • Andres,

      I can’t speak for the author, but as a web design firm, we do have a little experience here.

      In #2 He is making the point that a navigation title like “pool equipment” makes more sense (both for the user AND search engines) than a generic “products” or “what we do”.

      In #3, there are a number of ways you can change this. The first one I recommend is taking a look at how your website is laid out. We recently had a heating and cooling client that we changed from dropdowns to no dropdowns this way.

      Rather than having a long list of services under the “service” navigation, we re-organized his pages to fall under each of his services (i.e. heating, cooling, air quality). Then, on those pages, we created sub-navigation to get into the sub-services (heating repair, furnace installation, etc.)

      Hope this helps!

  14. I feel like I’ve already followed every one of these rules…at least I think I did. I would love some feedback from the community on my navigation. Is it too hard to understand, or too simple?

    Just click my name for a link to the website in question.

    Thanks for a great post!

    • Matt,

      I just took a look at your site and I think you have indeed followed most of these “rules”. If I had to suggest something, I would recommend adding the word “pools” after “inground” and “aboveground”. This will make it more clear what the link is pointing toward.

  15. As usual, Andy, great article, very useful information.

  16. Too many links in the drop down menu is not good as the authority passed to the other inner or internally linked pages will be less and hence it affects the page’s serp ranking abilities. Search engines will need lot of bandwidth and time to crawl & index the linked pages on the site, as mentioned by Andy in the blog its better to keep it concise and only important links in the navigation rather than stuffing all the unwanted links in it.

  17. Nice article post,
    I learn from your post on how to build a web that is highly effective.

  18. Hey,

    I’m very pleased to find this great post. I need to thank you for ones time for this fantastic read!!

    Regards,
    Jenifer Taylor

  19. I didn’t think I agreed with point #2 until I saw your Smith Brothers example. I like how they stuck with the standard “about” and “contact.” When you start calling it “our team” or “give us a shout,” it can be very difficult to find. When I get to a page, I usually search (Ctrl + F) for the word “about” or “contact”…it’s annoying if those can’t be found. I see how they got more creative with the “serives” and “products” by adding industry-specific descriptors. This makes sense for branding and SEO.

  20. Thanks for The article and the tips

  21. > Always links, never buttons

    This is terrible advice and I suspect you may be misunderstood in your use of the term ‘button’. I believe you mean to advocate against the use of images as buttons or links.

    The button HTML element IS search friendly, IS NOT harder to ‘update’ than links, DOES NOT load any slower than links, is equally accessible to links, and is ABSOLUTELY necessary to web design. Buttons and links have their own semantic meaning and purpose in the construction of a website and to advocate the use of one over the other in such a general sense is absurd.

    • I completely agree on this point. There is also plenty of research out there that shows links which appear ‘touchable’ are more likely to be used.

      That being said, navigation shouldn’t compete with content or action items.

  22. Good article with practical, helpful examples. It all goes back to usability – even if you’re a great company and offer a great product, it won’t do you any good if your customers can’t navigate your website.

  23. Thanks for the great info. I think it’s really tough to reduce the amount of page links in the (my) menu. I want to redo my site but I don’t know how to consolidate pages when the pages are already quite long. I was actually thinking of reducing the size of a page by splitting some of them up but then I would need an additional menu link.

    I will get rid of my menu buttons although I like their look.

    any thoughts?
    thanks, ken

  24. This is a rather poorly researched article. Some of it is just completely wrong, and some of it is way out of date.

    For example,#4. The ’7-8 items’ in short term memory has absolutely nothing to do with a visual menu. The menu is there on screen…there is no need to retain any of it in your short term memory. The myth debunked: http://uxmyths.com/post/931925744/myth-23-choices-should-always-be-limited-to-seven

    In addition, studies have shown that the number of links isn’t necessarily an issue. What’s important is that the links are meaningful to the user. This is a good study for that: http://www.uie.com/reports/scent_of_information/

    And your “don’t use buttons” declaration doesn’t bother to define what you mean by ‘buttons’. I believe you are referring to images. Which is fine, but there are so many other ways to make a ‘button’ that have nothing to do with images that you are likely giving out bad advice by not defining the term.

    As for #3, yes drop down menus can be annoying, but at the same time, mega menus have been shown to be useful for users. Again, it’s the vague assumption that is the problem.

  25. My spouse and I stumbled over here different web address and
    thought I should check things out. I like what I see so now i
    am following you. Look forward to looking into your web page again.

  26. what a person will do if he has a lot of things to add in navigation bar ?
    If his website has more then 100 products then what should he do ?

    Thanks

  27. If I wanted to attract artistic people (and I would, being an artist/musician/game developer), I would make an artistic site and the relevant visitors would know what to expect. They’d expect flash, they’d expect music, they’d expect something more than black and white scrolling text (with blue links). They’d expect an interactive experience that shows as much imagination as the content itself. Anyone who didn’t like it, probably shouldn’t be there anyway, so them going elsewhere just saves wasted bandwidth.

  28. Nice article post,
    I learn from your post on how to build a web that is highly effective.
    n pleased to find this post

  29. Great tip about drop down menus. I always thought drop down menus were annoying.

  30. Hey Andy Crestodina !
    This is an awesome post. Non-standard style is going to ruin your website entirely.
    Drop down is really not a good idea.
    I totally agree with you.
    Thanks.
    Brian

Comments are closed.

← Previous ArticleNext Article →
Buffer