tips for a good website navigation interface

tips for a good
website navigation interface

important


  • on every page the navigation interface should tell you: where you are, what your site contains and implicitly how to use the site

think responsive


  • make navigation items touch targets (big enough to be easily selected with a finger)
  • make evident what is clickable and graphically differentiate it from what is not
  • eliminate any effect due to hovering
  • avoid tooltips

take care of all the components


  • main navigation: provides access to the most important sections of a website and is consistent across all pages
  • in-page navigation: provides access to the various sections of a particular web page and is present on that page only
  • utilities: subsidiary tools that assist the user and are generally consistent across all pages

main navigation


  • put your main navigation horizontally on top of the page
  • use the same words and order for the navigation items on all pages
  • have a maximum of 7 navigation items
  • if you have more than 7 items, group some of them under a common navigation item and link it to a landing page for this content group
  • the most important sections should be directly accessible from the main navigation. to define the order of importance, rely on hard data: use analytics, track internal site searches, check with customer support for frequent requests
  • on pages other than the homepage (or when the user scrolls below the fold) keep the main navigation fixed on top of the screen but slightly reduce its size to limit its impact on the screen display

in-page navigation


  • put your in-page navigation horizontally below the main navigation
  • when the user scrolls below the fold on that page, keep the in-page navigation fixed on top of the screen (just below the main navigation) and slightly reduce its size to limit its impact on the screen display

utilities


  • place your utilities above the main navigation but make them slightly less prominent
  • always use the same word or icon for the same utility
  • use customary words and icons only (e.g. the shopping cart)
  • always include a search box for internal searches. the search box should be at least 35 characters wide
  • if responsive design requires it, combine the utilities under a single "hamburger" button
  • on any page, try to limit the number of utilities to a maximum of 5

some more tips


  • on all pages, users should immediately understand they are on the same website. along with the main navigation (consistent in order, words and graphic) and the essential utilities, always display your company's logo, which also works as a link to the homepage
  • use text for the navigation items (not images or icons). make the text descriptive, clear and as short as possible. use important keywords and your users' words
  • ensure there is a perfect match between web page titles and the corresponding words in the navigation
  • when the user reaches a particular page or section, ensure that the corresponding navigation item is highlighted
  • try to avoid drop-down menus. if you decide to implement one, make sure it's clear what it is and where to click to expand or close it
  • avoid any footer navigation. users should be able to understand what your site offers while "above the fold"

pdf file - tips for a good website navigation interface

selected services:
usability testing