Left-Side Vertical Navigation on Desktop: Scalable, Responsive, and Easy to Scan

Vertical navigation is a good fit for broad or growing IAs, but takes up more space than horizontal navigation. Ensure that it is left-aligned, keyword front-loaded, and visible.

Summary: Vertical navigation is a good fit for broad or growing IAs, but takes up more space than horizontal navigation. Ensure that it is left-aligned, keyword front-loaded, and visible.


Every time I talk about broad hierarchies in our UX Conference course on information architecture , two questions come up:

Many teams will try to shoehorn a broad navigation hierarchy into a horizontal navigation bar on desktop sites. To make the list of categories fit into the limited horizontal space, they will use excessively small font sizes, crowd items close to one another, or come up with unnaturally short category labels . Worst of all is changing the IA so that there are only as many main categories as will fit in the available space. When we limit a broad information space into a small number of categories, we will end up with top-tier items that are too generic and will make it difficult for users to find what they need. Moreover, users will have to work more (clicking around and scanning various lower-tier categories) to find the relevant category.

However, there is another type of main-navigation UI that, on desktop, can accommodate as many top-tier items as needed — vertical, left-side navigation .

Read Full Article


Print Share Comment Cite Upload Translate
APA
Page Laubheimer | Sciencx (2024-03-29T10:46:03+00:00) » Left-Side Vertical Navigation on Desktop: Scalable, Responsive, and Easy to Scan. Retrieved from https://www.scien.cx/2021/05/16/left-side-vertical-navigation-on-desktop-scalable-responsive-and-easy-to-scan/.
MLA
" » Left-Side Vertical Navigation on Desktop: Scalable, Responsive, and Easy to Scan." Page Laubheimer | Sciencx - Sunday May 16, 2021, https://www.scien.cx/2021/05/16/left-side-vertical-navigation-on-desktop-scalable-responsive-and-easy-to-scan/
HARVARD
Page Laubheimer | Sciencx Sunday May 16, 2021 » Left-Side Vertical Navigation on Desktop: Scalable, Responsive, and Easy to Scan., viewed 2024-03-29T10:46:03+00:00,<https://www.scien.cx/2021/05/16/left-side-vertical-navigation-on-desktop-scalable-responsive-and-easy-to-scan/>
VANCOUVER
Page Laubheimer | Sciencx - » Left-Side Vertical Navigation on Desktop: Scalable, Responsive, and Easy to Scan. [Internet]. [Accessed 2024-03-29T10:46:03+00:00]. Available from: https://www.scien.cx/2021/05/16/left-side-vertical-navigation-on-desktop-scalable-responsive-and-easy-to-scan/
CHICAGO
" » Left-Side Vertical Navigation on Desktop: Scalable, Responsive, and Easy to Scan." Page Laubheimer | Sciencx - Accessed 2024-03-29T10:46:03+00:00. https://www.scien.cx/2021/05/16/left-side-vertical-navigation-on-desktop-scalable-responsive-and-easy-to-scan/
IEEE
" » Left-Side Vertical Navigation on Desktop: Scalable, Responsive, and Easy to Scan." Page Laubheimer | Sciencx [Online]. Available: https://www.scien.cx/2021/05/16/left-side-vertical-navigation-on-desktop-scalable-responsive-and-easy-to-scan/. [Accessed: 2024-03-29T10:46:03+00:00]
rf:citation
» Left-Side Vertical Navigation on Desktop: Scalable, Responsive, and Easy to Scan | Page Laubheimer | Sciencx | https://www.scien.cx/2021/05/16/left-side-vertical-navigation-on-desktop-scalable-responsive-and-easy-to-scan/ | 2024-03-29T10:46:03+00:00
https://github.com/addpipe/simple-recorderjs-demo