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 )
3.Prominent
4.Use of space
5.Cognitive Load
6.Scalability
7.Structure support
8.Responsive
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.
Fixation
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
Prominent
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.
Scalability
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
- 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
