Web application & scalable left side navigation

Question

Background

I am redesigning the navigation for a B2B web application, we are currently using a dropdown menu to help users navigate to different products. I would like to move towards left side navigation to accommodate the launch of new products & services.

Context

We have around 7 products, businesses can can signup for all 7 products or just one. Products are very different and they help businesses deal with specific challenges. while scaling-up wouldn't be an issue as vertical space provided by left side navigation will accommodate that, scaling down is an issue, particularly when clients sign-up for a one or two products.

---

So I have a few questions:

A- what would be the best approach from navigation point view when scaling-down as in the scenario I mentioned?

B- Is there any specific literature or research on how web applications scale down in terms of navigation & UI?

C- Do I need to maintain different navigation structures?

Happy to provide more clarification if needed.

Edit: some wires to clarify

Answer 1

Left sidebar occupies prominent space on the screen so the value / utility it provides should be high. The question then is what's the distribution of number of different products a single user has (or more simply how many products a user has on average). And the second question would be how much your users switch between different products?

One extreme is that your users typically go for one / two products and don't switch between them too frequently. In this case consuming such an important part of the screen to facilitate product switching is not justified. On the other extreme your users might go for many products and switch between them frequently. In this case it might appear that using a left sidebar is justified. But in fact this case would make me worried that the distinction between the products is artificial and not too practical. If users need to switch between different products frequently it might be a sign that a single product is not omptimized for a particular user task / need. Perhaps some products, or some of their parts, should become features.

Main navigation within a product should reflect user needs / tasks / goals and so on. For this and the above reasons I'd recommend against of using a sidebar for product switching the way you presented it in your mockups. I'd make it a drop-down or a collapsable sidebar that gets out of your way when you're working within a single product.

Answer 2

You can have dynamic menu systems based on some threshold, e.g. one nav menu type below the threshold, a different nav menu type above the threshold.

This will obviously involve more development effort, but as I always say "To make something really easy to use, you might have to do a lot of work behind the scenes".

Note I am not suggesting a drop-down menu would be ideal for low numbers of menu items - just illustrating that you can have different Navigation constructs based on a threshold.

Perhaps Tabs might be better for low numbers?

BTW This approach only works best if your clients will never need both types.

Answer 3

I have got over this issue by using a 3 stage left nav & used the hamburger to toggle states, user preference is a key factor as you don't want to hide something from a user who has no experience with that type of nav check out the Google analytics nav for a good example of a simple layered left nav.

I prefer the left nav approach personally although recently I have gone back to a top nav approach using tabs & swipe gestures that works really well for a multi layered enterprise application.

I also agree with the above comment about having a threshold based solution using media queries to trigger.