Navigation (19)

The website does not require excessive scrolling or clicking
Navigation elements are not hidden in a collapsed "Hamburger" menu on large screens
Navigation gives access to all levels from the surface and are ordered in a logical or task-oriented manner
The mouse pointer clearly changes its appearance when positioned on an actionable item
Navigation is always accessible and no page leads to "dead ends”
Current position of the user on the website is clearly visible
The "Back" button always navigates the user to the prevoius page
There is a consistent appearance to the links across the site
Hyperlinks appear interactable and easy to identify
The elements that cannot be clicked, do not appear clickable. (blue colors, underline, pointer cursor and etc.)
There are explanatory labels and text for clickable images
An elipsis is used to show that more steps follow
Areas accessible with a tap are with proper size
The entire button is clickable as well as the text inside
When there are a few items (less than 5), no dropdowns are used, instead they are listed in subsections
"Infinity scroll" enables the user to return to their position when use "infinity scroll"
The footer is utilized to contain main navigation elements
Breadcrumb navigation is used to support the user orientation
Input controls (radio buttons and check boxes) are used appropriately

💡Left-side (vertical) navigation

Vertical navigation is a good choice for website structures with a broad or growing information architecture, but it requires more space than horizontal navigation. When using vertical navigation, be sure to align it to the left, prioritize keywords at the beginning, and make it visible to users

  • Left-side nav increase findability and decrease interaction cost.
  • Vertical navigation offers room for growth
  • Vertical navigation supports more efficient scanning than horizontal navigation. Users look at the left half of the screen 80% of the time.
  • Vertical navigation translates naturally to mobile
  • Place vertical navigation on the left and use a noticeable design
  • Don’t duplicate the menu both vertically and horizontally.
  • Don’t hide the navigation behind icons.
  • In long menus, place less-important ones at the bottom.