Home » Tutorials » Usability » Navigation


One of the biggest mistakes that developers make is creating a navigational structure that has poor usability. If people love your content, they want to read more. How do they read more? They first have to use your navigation to get to the other content. Let’s face it, you enjoy having users visiting more pages and they enjoy reading great content.

Sometimes, you might have a massive amount of content and you want easy access to that content. So, creating a big navigation that holds all of these links is a good idea right? WRONG! What about nesting them in menus that the user can hover over? Well, that depends on how many levels you need. If you think you need more than one additional level, I would argue with you all day about why it is a terrible idea. I understand the need to reduce clicks for the user, but you should not create additional work for your user.

Navigation Failures

Hover Navigation

With only one additional level, there is nothing wrong with hover navigation. The user has a big target to get to additional links. Adding another level of navigation places the user on this “path” to find links, which becomes extremely frustrating. If I had a dollar for every time my wrist twitched out of a menu at the third level, well I might be on the beach somewhere.

If you have a good amount of related links, you should consider creating a landing page for that category of links. You can provide much more useful features on an entire page than you can by creating multiple levels in a hover navigation. Yes, it does create an additional click for the user. However, it also gives you a chance to tailor the links for the user. If I am searching for related content, odds are a link is not going to match exactly what I want. I would like to click a category that has organized the next set of links and highlights the best ones. Go to your favorite news website and you will see that none of them try to put all of the content in hover menus.

Usability navigation failure

Moving Navigation

Moving navigation is comprised of those awkward accordion navigations and those navigations that move when you hover over them. The accordion effectively confuses the user because when they click a “link”, they want to go to another page. Instead, the accordion just shows more links. The moving elements are those that when you hover over the link, content shifts around it to give the link focus or show more links. Basically, it is the same negative behavior as the accordion navigation. Stick with the traditional behavior of navigation. People like to point and click, not point follow, follow more, and then click. Remember, users should not have to work to read your content.

Hidden Navigation

Possibly the most neglected and the worst impact on your website is hidden navigation. Web developers have this curse of knowledge where they know exactly where everything is and how to use it. Breaking news… the users did not build the website and do not know how to use it. First time users should be so used to your navigation that it would like they have visited your website one hundred times before. Hidden navigation is not simply placing your navigation at the bottom of the website (this is fine for legal and contact information). It also occurs when you have your links surrounded by ads and other random content that makes them appear invisible. Ask a friend or stranger to navigate your website to make sure that it is intuitive and visible.

In my experience, we learn from the mistakes of others more than we learn from the success of others. Sure, you can look at all of the amazing websites with great features, but those features can easily become overwhelming. Also, you might try to implement them, but fail to consider a few small details and end up with the most useless feature on your website. Look at the failures of other websites and develop a mindset and not a checklist of how design your navigation. One of my favorite websites is Web Pages That Suck. Yes, the title is a little cruel, but honestly, those developers deserve it. The link has a list of navigation failures that I think you will find useful by seeing ideas that do not work.

Navigation is as old as the internet. People have become used to a consistent navigation structure. Navigation on top or on the left is very standard. Do not make your users struggle to navigate your website, as a happy user is a more visiting user.

Link/cite this page

If you use any of the content on this page in your own work, please use the code below to cite this page as the source of the content.

  • Stewart, Suzy. "Navigation". After Hours Programming. Accessed on April 24, 2024. https://www.afterhoursprogramming.com/tutorial/usability/navigation/.

  • Stewart, Suzy. "Navigation". After Hours Programming, https://www.afterhoursprogramming.com/tutorial/usability/navigation/. Accessed 24 April, 2024.

  • Stewart, Suzy. Navigation. After Hours Programming. Retrieved from https://www.afterhoursprogramming.com/tutorial/usability/navigation/.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.