27 Website Navigation Design Tips

Navigation and Menus
The point of navigation is improved customer experience and usability. It’s to enable your website visitor to reach the information in your site as efficiently as possible. This means having navigation that’s intuitive, easy to find and use, and fast. To cater to individual preferences, often sites will include multiple ways of navigating, including site search engines, hyperlinking, breadcrumb navigation and standard menu navigation.

Navigation Do’s.
  1. Navigation should appear on the first fold of the page (within the first 500 pixels). In other words, your website user should not have to scroll down to access main menus. This means keeping your navigation bar shallow so that it doesn’t take up too much room on the front page.
  2. You will need to plan your hierarchy of navigation before you build your website. You should also think about some of the options below and where possible incorporate multiple ways for a user to navigate your website. Think of your navigation as a street map. It is the directions you provide to guide your users to where you want them to go. You need to point them in the right direction in the fastest possible way.
  3. Content should be accessible within 3 clicks, especially in retail. Beyond that, the US experience is that potential customers drop off rapidly.
  4. As a general rule, you can incorporate up to 3 levels of navigation (in other words, another tier beneath the drop-down (or flyout menus), in other words, a third tier). Beyond this, the navigation becomes clumsy and the web developer should look at other navigation options, such as vertical menus that are better equipped to carry greater numbers of menu options. The main advantage of drop-down menus is that they reduce clicks and save page real estate – they don’t take up so much room.
  5. For large amounts of content, create section landing pages so that you can display links to relevant section content. This website incorporates this principle in its training landing page, accessible from the main menu.
  6. Keep your main links together so it is intuitive for the website user. You should always keep them consistent, so decide on a format and layout and stick to it throughout the website. You can highlight important links by including graphic elements such as small buttons in the sidebar, for example.
  7. Avoid splash pages (those pages that you click to enter the website). They add extra work for the user and may be detrimental to search engine optimisation efforts.
  8. Keep navigation terms short and concise. Stick with popular terminology such as “About Us” or “Contact” – since there’s little point in being too clever.
  9. Most website users understand that blue underlined text is a hyperlink. If you want to make it easy, stick with the standard unless there is a design reason to move from it. Once visited, a hyperlink usually turns purple or maroon. If you want to do something different, hyperlinks still need to stand out. You can increase the font size, change its colour, bold it or use some other design attribute to make it stand out on a page. The best hyperlinks make use of keyword-rich anchor text.
  10. Text links are fastest to load than graphics and are best for search engine optimisation. The downside is that they can be a bit dull to look at. Graphic menus have visual appeal but, depending on their size, can affect page load speed.
  11. Text is better for search engines than images. Wherever possible, build menus using HTML text. If you do use graphics, make sure you include alt text which describes to the search engine what the image is about.
  12. You can use image maps for navigation, but they are not necessarily intuitive, aren’t particularly search engine friendly and can slow page load speed so use them cautiously.
  13. Try to guide your users through your site. At the footer of each tutorial on this website, you’ll find a link to the next tutorial. In the case of retail, Amazon offers you a link to similar or related products on its product pages. This gives the user the opportunity to select additional complementary product and means Amazon gets the benefit of cross-sell sales. It’s win-win all round.
  14. If you go down the road of using complex dynamic Javascript or DHTML navigation, make sure you also have a simple sitemap that is just plain old HTML text. Locate it in the global footer so your website users can easily find it.
  15. Retailers – look at what Amazon does to make it easy for potential buyers to purchase and emulate it in your own website. Got something popular or hot? Don’t stick it in the back-waters – bring it to the forefront to get people interested in your website. What’s hot, popular products, best sellers, special deals should all be easy to get to from the home page, especially if you’re selling.
  16. Make navigation easy to find and read. Don’t be too clever with design. Be direct and speak in simple, well-understood language. User-friendliness is fast, easy navigation, and fast, easy navigation is key to effective navigation.
  17. Keep names of sections short – especially if you want to use breadcrumb navigation.
  18. Always include an xml sitemap in your website. This is what the search engines use to navigate your website. This is different to a HTML sitemap that your visitors can use. The HTML sitemap is most commonly accessed via the global footer (just as it is on this website).
  19. If you work in team make sure you have a very precise and unambiguous understanding of how tags are given and how the hierarchy of tags is built.
  20. Keep them clean and consistent. Agree upon the choice of singular/plural and lowercase/uppercase conventions, avoid mistakes and general terms.


Navigation Don’ts.
  1. Don’t build your navigation solely on hyperlinks. Hard-wire your categories to a menu for more robust navigation systems.
  2. Don’t design navigation on the run. Think about it before you build. Group related navigation together in clusters to make it easy and intuitive for site users.
  3. Don’t be messy. Keep your navigation clean and consistent. Decide on plurals versus singular, upper-case, lower-case or sentence case and stick with it.
  4. Don’t rely on a single type of navigation option. If it fails, your visitors cannot easily access your content.
  5. Don’t link to everything from every section of your website. Keep your navigation clustered and relevant to that cluster.
  6. Don’t forget to use internal links to push visitors into deep pages – especially those sitting at third tier navigation or deeper. At the bottom of pages or posts include a link to what’s next so you can guide your user through your site. The best links for search engine optimisation purposes make good keyword-rich use of anchor text.
  7. Don’t be slow. If it’s not easy or fast to find what you want, you need to improve your navigation. Wherever possible, keep pages to within 3 clicks.

WANT MORE? Check out other digital marketing advice.

Internet Strategy: 27 Website Navigation Design Tips
Article Name
Internet Strategy: 27 Website Navigation Design Tips
The point of navigation is improved usability and to find things fast. Here are 27 tips when thinking about your navigation and how to enhance your customer experience.
Publisher Name
Undercover Strategist
Publisher Logo

Comments: no replies

Join in: leave your comment