I spent quite a bit of time deciding whether or not to use a vertical or horizontal nav while redesigning this site. Management console was a combination of legacy code and new development.
My first steps when creating a navigation system was figuring out what the logical and natural order to the menu items would be. I kept these principals in mind
Restructuring the pages into more logical groupings
Standardizing design patterns and components so users can intuitively figure out what a page would do or behave based only on visual cues
Using consistent language in order to make users expend less energy on decision making to discern what a component would do.
Decreasing visual clutter on the page by strategically hiding or minimizing less necessary information.
Commonly seen with B2B and SAAS software therefore users can already anticipate what kind of product they will be using even upon first glance
Very easy to grow the navigation options in the future if more items become required
Clicking the bar into an open state makes it stationary which cna alleviate the user frustration associate with the hovers on a horizontal nav bar
Users can see many options at once without having to dig through hierarchies/directories
Intrusive, can take up valuable screen real estate
Challenging to show relationship beyond parent child. Parent -> grandchild relationships become cluttered and visually overwhelming quickly
Can be awkward at tablet size, easy dix on desktop and mobile but tablet can be challenging to decide easily
Quick access functions like my account, logout etc are either buried inside the bar or relegated to a horizontal nav bar creating 2 nav bars which can become cluttered quickly
Collapsed state of bar requires dedicated iconography for each element which can be challenging to find if there is not someone of staff who can easily create custom icons.
Very easily to show hierarchy, tank tops have the parent of sleeveless tops -> shirts
Can show a large number of menu items
Even in the collapsed state users can see top level menu items
Takes fairly little real estate on the screen
Often a pattern seen in e commerce and may confuse the user
Only a finite number of options can exist in the top level navigation therefore if there are long titles it grows challenging quickly. In addition the horizontal layout struggles with growth for any new items
Can be visually overwhelming with many menu items
The hover drop downs can often create a finicky experience for users
Really only works at 1000px and above often times. You must quickly revert to a full screen mobile layout once you lose the amount of real estate required to show all top level options
Ultimately I went with a vertical layout. The most pressing reason was our menu items had fairly little hierarchy but more grouping of similar information. There was a large breadth and very little depth which is not a use case the horizontal nav is well suited for. In addition the organization was in a growth oriented phase and I was told there would be expansion into more features in the future so I decided a vertical system would be the best for future proofing.
We were never able to get a final okay from stakeholders but these were the potential colour schemes that were proposed.
