1

I'm developing an Intranet which has around 25 modules each one of them has around 4 actions so i have around 100 items in my navigation bar.

My navbar has only two levels "Module>>Actions" like you can see in the image above

2 Levels Nav

So the problem is: "How can I make this huge navbar a better UX nav"

My client suggests: A double navigation bar making 4 categories at a top bar and at the "onClick" of each one the side bar will change with the modules with that category tag. (I dont support that cuz i think it's a nasty solution)

I need your help any ideas?

1

On a contrary, I think left side menu with this kind of grouping may be one of the best patterns you can choose.

In complex nav systems, the tree that needs to be built requires a very careful approach to its architecture. Very often placing a subitem below an item is indeed sensible, but only when directly analysed. In other words, a User who would approach it would understand why it is there (Example: "Oh, yes, it makes sense that screen auto-off setting is located under the screen settings.").

The harder part, though, is making it intuitive. The screen auto-off setting could also be located under power settings, or e.g. automation settings, or e.g. general settings.

This is why supporting an icon with a text becomes substantial. This menu allows you to do it with ease, by showing a label along with an icon while still keeping the whole menu scannable.

Moreover, this pattern is very effective when it comes to extending the menu. In worst scenario it gives you a possibility to scroll, which, while not being a very elegant solution, would allow you to deal wit enormously big trees, espeially with some branches expanded.

To provide a better experience when using this navigation type you may consider:

  • supporting menu with a search field filtering items on the fly. Remember to show the path to an option in case it is at level 3 of your nav, though, to provide better context for your Users (e.g. "Edit" may regard various things, so it is necessary to know what is the parent of this option).

  • adding a "Frequent actions" menu - here you could start with something static, then implement manual personalization and/or automatic adjustments based on User behaviour.

  • putting the more important subitems on top of the submenus.

When it comes to the tree architecture itself, well, this is a harder topic, which requires research among your Users. Let them help you reorder it.

0

When you mention:

My client suggests: A double navigation bar making 4 categories at a top bar and at the "onClick" of each one the side bar will change with the modules with that category tag. (I dont support that cuz i think it's a nasty solution)

I actually think it's a good solution, depends of how it's implemented. Here is an example of an online IDE:

enter image description here

I highlighted with a green border the tabs they use to group navigation. It can be an example to group your 25 modules in categories

0

Could you have the top level nav items in the nav draw and then tabs for each second level items like Google Plus?

enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.