Loading

Rules to Improve Your Site Navigation Menu Usability

Navigation Menu Usability

Just like you need directions or a map when you’re new to the city, your site visitors also need to have a clear idea where they are and where to go within your website. Navigation menu is like a road map for your website visitors. If it’s clear and simple, users are more likely to stay and explore the content you want them to engage with. Most of the principles of a user-friendly main menu are pretty obvious, yet too many websites fail to follow them choosing appearance over usability. Make sure you’re not one of them.
Quality assurance engineers at Decide Web Development have put together some main rules and recommendations that will help you improve your site navigation menu usability.

1. Keep it clear and simple

Do yourself a favor and don’t puzzle it, don’t break your back to make it super special and simply don’t think about it too much. When you focus on making your main menu super creative, chances are you’re making it too complicated.

  • Limit the quantity of your menu items. Too many items will disperse visitor’s attention and make your website look overcrowded and desperate. Limit the number of main menu links to 5 or 6 at the very maximum if they are short enough. If you have more information you want to include in the main menu, you may consider a vertical menu instead or organize subcategories via drop down submenu.
  • Don’t go too deep. Ideally, we’d suggest to avoid drop down menus at all. When running an online store or have lots of services to offer, the rule is that no page should be farther than 3 clicks (including mouseovers) away from your homepage. This means having more than 3 levels of navigation menu is a big NO. Even if your menu is a product catalog, don’t go deeper than three levels. Amazon’s “Departments” menu is a good example of a big but still user-friendly navigation menu, let’s count to 3 together.

3 levels of navigation menu

  • Use obvious and simple terms. Don’t use words that require users to click on the link to figure out where it would take them to. Names like “Ta da!” or “Fun Stuff” may attract attention but they’re not clear and could mean anything. Terms like “Showroom” are confusing too, it could refer to company’s portfolio or its work process – who knows… Make sure to also avoid generic words like “Products” or “Services” that once again say nothing unless you click them.

2. Put it in an expected place

Whatever your main menu looks like, the best place for it is still across the top or down the left side of the page. In terms of site navigation, you should give your visitors what they expect. Sometimes, designers forget about navigation menu usability on their way to creating a masterpiece. Although, there are no limits to creativity, let’s not forget your site menu is not the right place to show how original and unique you are.
As much as we love Cathy Beck’s creative website, it still takes a while to locate the menu. Put your main navigation in standard places, where it is visible and easy to find. This can get you higher conversions and less bounce rate, which is what we all want.

navigation menu usability

3. Have it stick to one place

This is very important in terms of navigation menu usability and is actually very easy to do. The trick is to have it at a fixed position, so that it’s still visible when user scrolls down the page. A good example is the top menu on our website: https://decidewebdev.com. When you try it once, you wonder how you lived without it all this time. It’s just very convenient to always have the site navigation reachable no matter what part of the website you’re at. It is especially convenient for long pages like ours, but even for websites with short page layout, your menu should be sticky, because users may still have to scroll down on smaller screens.

 

Decide Web Development Sticky Navigation Menu

4. Make it intuitive and interactive

  • Indicate user’s location. This one is very important. Users should always be aware of where they are within your website. Make the link of an active page/section user’s at distinctly different from the rest navigation menu items.
    This can be achieved by somehow highlighting the link, i.e. changing the link’s color, background or underlining it – whatever looks best considering your website design. Here’s how we, at Decide Web Development, did it:
  • Add hover effect. Menu item should have some sort of a highlighting effect on a mouseover. It’s important that the effect is the same as the one used to indicate an active page user is at, as mentioned above.
  • Indicate dropdown menu by an arrow. If you don’t include an arrow for navigation items that have hidden sub-items, many users will obviously have no idea it’s there. Of course, as mentioned above, it’s better when there are no dropdowns to begin with, but if there are, there should be a clear clue that the menu item is going to reveal more options. Not only that the dropdown menu should be indicated by an arrow, it should drop down on a mouseover, not a click. All this is expected by users, thus, increases your navigation menu usability.

Leave a Reply

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

Request a Quote

This helps us plan our services to match your budget

Project Requirements, Sketches, etc.

.docx, .jpg, .png, .pdf, .zip (max file size 2M)

Thank you, your submission has been received.

We will respond to you shortly.