Horizontal navigation with vertical sub-navigation

Question

I have an application for institutions to buy and sell loans within an exchange which also combines a multiple set of features. So our user base are customers from financial institutions who have not been trained on the program.

We have a 3 tier horizontal navigation bar and a vertical sub-navigation bar is being suggested to assist the flow.

Thoughts? Is this considered bad UX? I have mixed feelings and I would like to hear some feedback.

Note: This is not a mobile application. It is not even considered in our environment.

Answer 1

Primary navigation as a horizontal navbar, plus subnavigation in a vertical sidebar, is a perfectly typical navigation structure (and almost certainly preferable to a three-tier set of nested menus, which can be frustrating to mouse through.)

There are some important considerations your current mockup doesn't quite address however:

Show current context. This applies to all types of navigation: it needs to be immediately clear what page the user is currently on, and where the current page fits within the overall navigation structure. Your current mockup does not do this at all: it's unclear which top-level section we are in; in the sidebar we appear to be in one of the two subcategories of "Commitments," since it's expanded, but since both its children are highlighted the user can't tell which one is current.

At a bare minimum you must always, one way or another, mark the user's current location in all nav or menu structure. Color contrast, highlights, "tabs", font styling, whatever design metaphor you like, but pick one and use it throughout.

Clarify the relationship between top and side nav. It needs to be clear that the sidebar is contained within the top navigation -- the user needs to be able to easily tell whether your layout represents your intended navigation structure, or the equally common "main navigation in the sidebar and secondary or tertiary navigation 'inline'."

Your mockup does a mostly okay job at this: the positioning of the top nav implies its parental relationship to the sidebar for example. (If the sidebar were full page height, instead of the top bar being full page width, that would imply the opposite relationship.) But it could be better; you're not drawing any visual relationship between the sidebar and whichever of the top-level links contains it. Again, there are many different visual metaphors to choose from -- give each main section its own color scheme, for example, and apply it to both the top level link and the sidebar; or even something as simple as just repeating the top-level link as a header inside the sidebar -- not great, but better than nothing.

Ensure this nav structure is the right one for your particular content structure

You have four levels in your navigation hierarchy, in fact: one in the top menu, two in the sidebar, and one inline in the content area (shown as a set of pseudo-tabs).

This clearly implies that the top-level sections are very different from one another; the two levels below that are closely related to one another, and the fourth level is included in only some subsections (i.e. certain portions of the content tree may omit the tabs and be only three levels deep.)

Is that an accurate description of your site's structure? If not, reconsider the layout to more closely represent your content.

Ensure the content structure makes sense in the first place

To be honest, just going by the shown section titles in your mockup, you may be in need of some serious rethinking of that structure: your links look fairly arbitrarily arranged. You've got what appear to be relatively esoteric or experts-only features like "bulk import" and "admin" jumbled in with the daily-usage stuff. Your top-level categories in particular are all over the map -- some seem to be task-based ("sell"), some are informational ("rules"), some are alternate navigation ("search" and "dashboard")...

This gives every indication of an app structure that grew organically, with sections stuffed in wherever there happened to be room at the moment rather than being planned as a coherent whole.

I know a total restructuring of your content may be biting off more than you want to chew at the moment, but if you're in the middle of a redesign anyway, it's a good opportunity to at least sand off the roughest edges (especially that top-level, which is a real mess at the moment).

Answer 2

Making the top-level navigation bar more intuitive would be helpful.

Increasing the font-size, change of color when an item is selected, drop-down menu's to minimize more horizontal menus etc.

The vertical menu(on the right) could be made collapsible depending on usage frequency for the task in hand. Describing the use case for this layout will prove helpful in determining a good design. For example the menu on the uber website will de-clutter your page from all the information overload.

Answer 3

In the vertical menu, I see the submenus are displayed when the category is expanded. You want to replace the submenus with a new vertical column?

In this case, I think you must analyze where you have more space, near the first vertical menu or between the categories.

Personally, I find hard to navigate with a vertical menu + vertical submenu.

You can help the menu with breadcrumbs.

Please see below some recommendation from Nielsen Norman Group: Menu Design: Checklist of 15 UX Guidelines to Help Users

Answer 4

This doesn't look right. Intuitively, I'd think I'm on some page listed on the top bar, but which one? Thus, the sidebar that (as you mention) should assist the flow has more question marks than real solutions, because it has no context or parent. And then, to make it even more confusing, you have tabs and drop-down selections inside the tab panel.

In short: it's very hard to even understand what is the flow of the page. I would suggest you grab some sheets of paper and a pencil and diagram at least the basic Information Architecture for this site, otherwise you'll make the extremely common mistake of adding errors to errors.