Website menu navigation bar design guidelines and design tips

There is a huge amount of content being released on the web every day, and the question is how to categorize them, and content and categorization will eventually lead to navigation problems. Sometimes, when navigation has too many options, it can be a daunting problem.

Therefore, the treatment of navigation bar syndrome (cure the Navigation-itis syndrome) is very important, making navigation bar user-friendly and easy to operate.

This article provides some tips for designing a navigation bar. help you solve navigation problems and a clear user experience, and use real examples to teach you how to cure the disease.

But first, these are the techniques.

Tips for designing navigation bars

Before we wrote this article, Jon (Spyrestudios founder) and I exchanged ideas about how the navigation bar should be placed, how it works, and how it behaves.

1. Stick to a navigation menu

Usually a navigation menu is enough. Instead of adding unnecessary navigation bars, use the drop down menu.

2. Clear, simple and obvious menu options

Use clear, straightforward text to be as simple and articulate as possible. This way users are not confused and know what they are clicking on.

3. Keep the navigation looks like a menu

A navigation menu should look like a navigation menu. There is no need to reinvent the wheel. If it's not bad, don't fix it. Basically, your ideas should come from content, not how to present content. People are more concerned about the content itself than how to get to the content. So let people get it through a process that doesn't make a fuss and can be identified immediately.

4. Do not use a drop-down menu of more than two levels

Do not use more than two Drop-down menus unless it is particularly necessary. If you need to use a drop-down menu of more than three layers, you may need to return to the drawing board again. Reduce menu items--Bold layoffs. Do you really need those two categories or pages, maybe a better one? It's all about how to make a better classification of your content.

5. No more than 10-12 options in the dropdown menu

Do not place more than 10-12 options in the Drop-down menu. If this is not what you want, please return to the drawing board, as in article 4th.

6. Minimize Drop-down Menu

Keep the dropdown option in the minimum state. If possible, avoid the use of large drop-down menus. More choices tend to mean less action. Don't let the user know how to choose from the menu, resulting in the user leaving the site.

7. Do not just put an icon on the menu

Icons are important, but if there are only icons on the menu, not everyone understands the meaning of the icon. A 30-year-old person will know that the flash icon represents "save." And the child may not understand the meaning.

8. Do not design vertical navigation bar

While it's not so hard to design a vertical navigation bar, it's easier and more common to use a horizontal navigation bar on a Web page. Vertical navigation bars can be inconvenient, discourage a subset of users, and waste valuable screen space. The horizontal navigation bar will add to the page, and the vertical navigation bar can cause trouble to your users. In addition, the vertical navigation bar will need more space to become eye-catching. This also varies by project.

9. Make your design easy for touch screen users to use

Touch screen technology has been widely used, so you have to make your navigation bar to facilitate the use of touch screen electronic products (such as ipad) users. Especially for drop down menus, make them easier to click, rather than just use the cursor to stop.

Cure "Navigation bar fetish": an example

Take a look at the National Geographic website, how many navigation bars do you have on this page?

There are three, yes! is it a bit much for visitors? How do you avoid using three navigation bars on a single page? In fact, it is possible to combine three navigation strips into a single navigation bar!

1. Set the Pull-down menu

Most importantly, the secondary menu for this level three menu (the second and third level menus) can be placed in a drop-down menu. This can save space, but also make the user's choice more clear. For example, if you are interested in photography, you will be able to hover the mouse to see all the content about photography.

2 Put the search box into the existing navigation bar

It is unreasonable to pull the search box out of the way alone. If you put the search box in the navigation bar, you can save more space. This is done to render the user a single and useful navigation bar.

3 reduce the choice to the user

Cutting off some of the content from the menu will make your navigation bar both convenient and useful. If you click on the logo can go to the home page when you need to do a separate homepage of the link it? When you do the Sub menu, you should also consider this point.

Solve navigation problems and provide a clear user experience

If users do not have access to, there is no good content is only worthless. Well, they will eventually find and access it. But many users will become frustrated or give up and leave the site, if they cannot easily find or be overwhelmed by unnecessary choices. So why not better to provide convenience.

Making users easy to use and share content is the best way to treat navigation bar syndrome. Solving the site's navigation problem can provide users with a clearer user experience, so that more users to read and share the content of the site to make you happy