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.


This content originally appeared on NN/g latest articles and announcements and was authored by Page Laubheimer

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


This content originally appeared on NN/g latest articles and announcements and was authored by Page Laubheimer


Print Share Comment Cite Upload Translate Updates
APA

Page Laubheimer | Sciencx (2021-05-16T16:00:00+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 ,<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 ]. 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 . 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: ]
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/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.