User Interface Navigation / Menu Selection Factors

Just spend few minutes of your time to learn navigation types and its merits and demerits.

Navigation types  and which one wins over other with regards to usability

There are different factors involves to consider when choosing navigation types

1.Visual Scanning  (WHERE they start to see and end)
2.Visual Fixation  (where eye spots in user interface, or Where eye stops the scanning )
4.Use of space
5.Cognitive Load
7.Structure support

let’s go through above factors briefly below

Visual scanning

Eye tracking research found that most of people scan webpages in an F pattern, like how illustrated here, so Left and Top navigation satisfies this factor. Slightly left navigation wins over the top one. Because people start scanning from left to right, so they first see left navigation.


Left navigation requires lesser fixation than top one,  eye has to move here and there for top navigation Side navigation is faster for users to scan since it requires lesser fixation


In this case both left and top have equal space but it differs how visual design works and satisfies affordance.

Use of space

Top navigation saves space , we can save some more space when we have sticky header on scroll.

Left navigation often will take 3 times more space than the top one.

Collapsing side navigation to save space will not work always, as you cannot consistently fit long labels, and having icon-only navigation will strain user memory too much.

Cognitive Load

User needs memory to find right menu item.

Information architecture and menu structure influences ease of find ability.  When you have three level menus, new terminology, Acronym,  People struggle to find and understand the menu item.


Side navigation is easier to scale

This can change depending on the device and font sizes, but generally, you would be able to show at least double the number of navigation links in the side navigation above the fold.

Side navigation works better when your information architecture has many top-level items that cannot be logically grouped into several buckets.

This also means it much easier to add more items as your product grows.

Top navigation can accommodate fewer items than side navigation.

Side navigation supports customizable navigation structures

The scalability of the side navigation makes it the only choice when users can configure their own navigation. Variable structure menus are quite common these days, you can check out some examples at folders in Outlook, or hierarchical menus in google Drive.

Side navigation better supports variable menu structures

Responsive Design:

  • Both top and side navigation have challenges in responsive design
  • Top navigation can have few item in small device application,
  • Left navigation hamburger menu which have challenge in find ability
  • Both top and side navigation have challenges in responsive
  • Best navigation can be designed based on your need and context