Awful Website Navigation Mistakes You Should Avoid

A website’s navigation is one of the most important elements in a site’s design. Visitors need to use navigation to make their way through the website and find the information that they are looking for quickly.

If the navigation is confusing or if it trips up the user in any way, you run the risk that they will grow frustrated and leave the site altogether. Simply put, website navigation should be clear and intuitive. To achieve these traits, I outline 7 mistakes that you really need to avoid in the design of your website navigation.

1. Too Many Options

Give a person 15 options to choose from and it will take them longer to make a choice than if you had only give them 8 options. The fewer possible choices that someone can make, the quicker they can evaluate those choices and then make a decision.

Unfortunately, when it comes to website navigation, many companies try to cram everything possible into their site’s primary navigation bar so that visitors have immediate access to all page options.

This may sound like a good idea since making content easy to get to is a worthwhile goal, but an overload of navigation links will actually end up backfiring. Instead of allowing visitors to easily see what pages are available, they will become overwhelmed by the breadth of choices and unable to quickly make a decision as to what to do next.

The minute those people start to question what they should click next, you run the risk that what they will actually do is click is the “Back” button that takes them away from your site and its confusing navigation scheme.

When planning and designing a site’s primary navigation, be aggressive in editing that menu down to the fewest, most important options possible. By presenting fewer options up front, you will actually encourage people to make quicker choices and go deeper into your site.

2. Wrong Options

Another mistake that people make when planning a site’s navigation, especially when they start deciding what to leave in the primary nav and what to move to subsection navigation, is that they cut the wrong items and leave in links that are not important to a site’s actual audience.

Remember, a website needs to be designed for the needs of the people who will use it. As such, the content or features that are important to them are what should be focused on.

A link like “Message from the President” may be important to a company’s CEO, but if that company’s customers are not looking for that content, then placing it in the navigation row is misguided, especially if it is in there instead of a link that actually is important to the site’s customers!

3. Go Big or Go Home

Today’s websites are being visited on a variety of devices and screen sizes. The days of only giant, desktop monitors being used to access web content is long over, so to succeed on the Web today, sites and their navigation need to accommodate this wide range of screens.

Navigation schemes are too often designed solely for large screen monitors. On smaller screens, including tablets and phones, that navigation will break down and become unusable. This is why websites need to be built with a responsive approach to multi-device support.

With a responsive site, navigation can be redesigned for different screen sizes to ensure that it is always clear and easy to use. A platform like Webydo, with their pixel perfect responsive editor, is a great way to design different navigation schemes for the various sizes that a website will display at – and with Webydo’s code-free development platform, once the navigation and pages are designed, they can be easily published as working webpages!

4. Fly Out Menu Mayhem

As you work to edit the number of options down for a site’s primary menu, you will begin to find links and pages that are better presented as submenus. For instance, the primary nav may have an option for “Our Company”, and underneath this button/section you may have other options that, while necessary for the site, are not important enough to warrant primary nav placement. These could include:

  • Company History
  • Leadership Team
  • Testimonials
  • Careers

One of the ways you can present these submenus is with a dropdown or a fly-out menu. This is where a menu appears once you hover your mouse cursor over a top-level link. This treatment, while common, can prevent some challenges, however.

For instance, on touch screen devices where there is technically no “hover” state, you want to make sure your links are still accessible to users. You also want to avoid fly out menus that have 3 or more levels. It is often difficult to navigate menu systems that have fly-outs that come from other fly-outs, so avoid these unwieldy menus in any site you design.

If you would like to learn more about which navigation type is best suited for your site, The Importance of Navigation Design Patterns discusses the various types of navigation systems using examples from some of the hottest websites and web apps.

5. Inconsistency

Once a person figures out how to use your navigation menu and they are comfortable with where everything is, do not change that on them! Websites should have consistent navigation through the entire experience – for each iteration of a menu, across devices and regardless of what page they are on. Submenus may change from page to page, but the primary nav or controls should be set in stone.

6. Too Long

Editing a site’s navigation options to present fewer choices is important, but you also need to make sure that the text label for the choices that remain are short and sweet.

A link that says “All About Our Company” is unnecessary when just “Our Company”, “Company”, “About Us”, or “About” would all work just fine. This may not seem like a big edit, but we have gone from 4 words to just 1 or 2.

If you edit like this across an entire navigation bar, you will have effectively cut the amount of text that people have to process in half while still conveying the proper content for those links.

7. Wrong Tone

Every website has a tone. That tone could be loose and friendly, it could be professional and straightforward, or any number of other possibilities. Whatever the tone of a site is, the language of the navigation should reflect it.

If a website is meant to be friendly and helpful, a link that reads “How We Can Help” may be more suitable that one that simply says “Services”. By understanding the tone of a site’s message, you can design navigation that is consistent with that tone.

Yes, in this instance the first text is much longer than the second, which seems contrary to other tips presented in this article, but remember the goal is not necessarily to make the text as short as possible, but to make the right choices overall. This does include the proper text length, but it also includes the right tone, options, and more.

If you’re looking for a design solution or ideas for your own site’s navigation, take a look at this post.

In Closing

The design of a website’s navigation can make or break an experience. By ensuring that the navigational structure is clear and easy-to-use, you encourage visitors to spend some time on a site and you help direct them to the content or features that are important to them and important to your business.

Comments

  • Phe Le

    I have to disagree with you here.

    “People hide things in that little hamburger icon (which by the way senior citizens don’t understand, but no one seems to care about that).”

    If senior citizens use smart phones, in order to surf the Internet, they have to click on that “browser” icon. How do they know that icon allowing them to visit websites?. Yes, they learned and got used to it. What makes you think that they can’t learn and get used to the “Hamburger” icon?

    “Smart phones were designed to be able to zoom in and out (which by the way senior citizens will also do even if you think you are designing your site to look great on a mobile device because they have a hard time reading text on screen no matter what size you make it).”

    Why do they have to zoom if the text size is good enough to read? Why do they have a hard time reading?

  • Fredslund

    I think this is only a problem if you are constantly switching from desktop view to mobile view and back. And the majority won’t do that; they are on a desktop OR a mobile. They might continue reading on another device, but they will not be switching every minute.

    Also, putting a desktop site on the phone and forcing people to use zoom to be able to read anything is really really really bad and make people leave your site quickly. Plus it will punish you in Google search results.

    I think that most users today understand there are a desktop navigation and a mobile navigation.

  • Mochizuki.

    There’s a lot that seems a bit off about your statement. To start off with, I don’t know many older folks who are well versed in electronics that aren’t aware of the hamburger symbol and it’s meaning or see the hamburger symbol and don’t think to click it, investigate it, or ask about it. For those who are on the other end of spectrum, they tend to either ask a loved one who is well-versed in it to help them or ask someone to do it for them. I would also like to point out that there is a multitude of ways to pretty much make your code look the same on mobile devices. Heck, most blogging sites allow you to view the web version of your blog mobile and it looks just fine, minus the fact that it’s smaller. Coding has expanded and become something more than even developers can even begin to completely understand. Most people just choose to make their mobile site and their desktop site differ from each other slightly.

    Again, navigating one way on a desktop and then viewing something different on a mobile site does not mean that you can’t get the same sort of navigation. Mostly, it boils down to the developer’s and their clientele’s choice. You’re making it sound as though it is a given that you can’t view a layout the same way on a mobile as will a desktop, which is incredibly incorrect. PCs were also designed to zoom in and out, especially on browsers, seeing as most browsers actually have not only sliders, but shortcuts for that option. So that is an irrelevant factor. Things have zoom in and out so that it’s easier for people to read, no matter the medium. It’s not limited to mobile devices whatsoever. Also, I would like to point out that you can make large text on mobile devices work fine and without people having to zoom in on the text easily unless they are near-blind. Older people tend to have trouble seeing, but I think that if you have a good size 16 or maybe 18 font, line spaced it accordingly, and decked it out in a nice, readable font, you’ll be fine.

  • From one Tim to another, you are very correct. There will be compromise no matter what you do and it won’t be the same cross-device/resolution. What I personally hate is a mobile nav on a desktop. One where everything is hidden, but hey, at least they are the same wherever you view it :rolleyes:

  • “Unfortunately, these two statements are at odds with each other. When you are on a desktop device the menu 90% of the time does not look the same as it does on a tablet or phone. People hide things in that little hamburger icon (which by the way senior citizens don’t understand, but no one seems to care about that).”

    These two statements are not actually odds with each other but there might be cause for additional clarification. When we say “websites should have consistent navigation through the entire experience” we are speaking about an experience on a computer or on a tablet, not both at the same time (just as Fredslund noted). As noted in the article, we advocate a responsive approach to multi-device support dictating different configurations across devices to ‘fit the screen’. This principle is essential now, more than ever, not only in light of Google’s decision on prioritizing responsive sites (http://webdesignledger.com/news/google-wants-your-website-to-be-responsive-is-your-website-ready-for-their-mobile-friendly-requirements) , but also for the overall user experience, of which, the rise of the ubiquitous hamburger icon was part. Further, like all technological advances, people independently of age or status, are able to adapt.

    “If you navigate one way on a desktop and then the same person goes to the site on their phone, the navigation is lost and they have to hunt around for it. This is especially true when the nav is hidden beneath some icon you have to click to get it to appear. Smart phones were designed to be able to zoom in and out (which by the way senior citizens will also do even if you think you are designing your site to look great on a mobile device because they have a hard time reading text on screen no matter what size you make it). When developers build websites they always talk about making them as friendly and accessible as possible, yet they tend to forget that there are more old people in the world than any other age group.”

    ​​That is exactly what we are saying: sites should implement responsive design so that the nav is not lost but rather adapts to the scree size. The great thing about responsive design and the reason why responsive is becoming a web standard is for this very reason – no, not specifically for senior citizens, but for the overall user experience. Just like pouring water into different sized glasses (imagine a pitcher, coffee mug and shot glass), the elements on your screen adjust to the size accordingly. In terms of zooming in, you are also correct that smart phones were designed to zoom in and out, but that was before the concept of responsive design and crafting different experiences to optimize and adapt content across a range of devices. The size of the text is not static in the example of the water and as you might have noticed, text across all device types are trending towards larger fonts. If a site is executed using the principles of responsive design, there is really no need for zooming-in to see content.​ In terms of seniors and interest usage, you might want to check out a Pew study (http://www.pewinternet.org/2014/04/03/older-adults-and-technology-use/) for more information on cellphone, table and computer usage in the senior demographic. Although the representative population is American, it is very telling of how many users are actually senior citizens and how many are browsing on phones or tablets.

  • Another reason why designers are so important in this equation and why Webydo developed a platform that will put designers at the front lines of website creation.

  • It sounds reasonable, and can not be more right !