SEO

How to Design and Organize Global Navigation Menus

Last week I started discussing huge navigation menus by asking what is a better way to order the navigation categories: alphabetically or by popularity. Today I am going to further discuss the topic of optimizing the huge navigation menus by sharing my finds as per the ways to organize, design and choose words to name the list items.

Despite the fact that people tend to focus on content first and then turn to other design elements, website navigation menus is extremely important for website usability:

  • It navigates users to further pages;
  • It helps users to quickly associate the site with a particular topic;
  • It helps users to understand where they are in a website’s information architecture; etc.

Design of the navigation menus

  • Page layout: navigation menus should be placed in the left sidebar: according to UseIt.com eyetracking study, users’ main reading (or scanning) pattern looks like an F with a horizontal movement being the first scanning component. Left-justifies navigation menus increases “scannability” of the page, and enhances user’s experience as visitors are able to find the navigation menus really quickly and easily.

f reading pattern eyetracking How to Design and Organize Global Navigation Menus

  • Colors: Use color to represent hierarchy in the navigation menus:

color navigation How to Design and Organize Global Navigation Menus

Language choice for the navigation items

  • Start each menu item with the one or two most important (in terms of the amount of information it carries) words. That said, avoid using generic terms like “information”, “list”, “advice” to start the navigation menus item.
  • Avoid using the same words to start list items, because doing so makes them harder to scan.
  • Use generally recognizable words to ensure the navigation menus will help everyone understand the site topic. “Speak the user’s language” has been a primary usability guideline for more than 20 years. Avoid made-up words in navigation menus, because users scan them for words they know.
f8d69258525dec38624a29eb3d570d8c 64 How to Design and Organize Global Navigation Menus
Ann Smarty is the blogger and community manager at Internet Marketing Ninjas. Ann's expertise in blogging and tools serve as a base for her writing, tutorials and her guest blogging project, MyBlogGuest.com.
f8d69258525dec38624a29eb3d570d8c 64 How to Design and Organize Global Navigation Menus

You Might Also Like

Comments are closed.

8 thoughts on “How to Design and Organize Global Navigation Menus

  1. Thanks for the great post! This article is very apt and relevant. The eye tracking charts are helpful and interestingly enough it was done on a different style site than at other places so it adds even more validity to the perspective.

    We’ll have to test the utilization of different colors on the hierarchical menu structure as well as not starting with the same words on a list. Thanks for more on the To Do and To Test List. :)

  2. Hi,

    Great point here. I have to say that I prefer to have menus on the left but I place them on the right just to offer a much more direct way for search engines to reach my content.

    I’ll have to take this into consideration.

    @TomaBonciu

  3. This is a great little article I recently added a second level drop down navigation to my site and have already found that it is helping users find content faster and more effectively

    Regardless of SEO there’s is a lot to be said for usability on site and encouraging users to ‘consume’ more content

    thanks ann

  4. This is only a part of where navigation menus should be, even Nielsen speaks of the inverted L-shape. And there are some interesting studies from the “argonauten” and others, indicating there are quite some other positions working fine.

    We had even some navigation UNDER the pages, build with one of the top usability experts, and they were working extremely well.

    When it comes to a global navigation on an enterprise web site, this is usually a horizontal nav bar under the column with the logo.

  5. Very nice post. I wonder does this “F” rule apply to other non-latin languages as well. My concern is with Arabic language which is read from right to left. Do you think that the position of the navigation bar should be on the right instead of left, or do you think that the users still used to have the first sight from left … it would be really interesting to know.

  6. It would be very interesting to compare this partern to let’s say a centered navigation like overstock.com. After all from what we see in this, the left side navigation don’t get much attention compared to the main column. I’ve encounter the same during user test