5

I'm offering a design solution for an enterprise level applications navigation system. Currently the user can navigate by drilling through a series of parent and child menus. There are up to 5 levels of navigation possible, each level displayed in a different view and up to 16 children in each view.

The desire is to move this system to a single page application. Normally I would look to see if the number of menu options could be reduced, but there's no time. I have a few solutions to consolidate the navigation and was hoping someone could offer a few more or insights.

Multilevel tree navigation A tree navigation could be displayed on the the page. This would be persistent and would need clear insets to distinguish between levels. My concern here would be given the number of option possible it might get difficult for the user to quickly see where they are in the application. Also having all the navigation visible complicates the ui.

Mega menu This could get real ugly with flyouts of 4 and 5 levels. The dexterity required to Handel flyouts off flyouts is undesirable. A variation could be handling up to 2 levels of flyouts navigation and deeper levels would be shown in a see more link which would take the user to a different view with the child links. However this breaks the SPA model.

Improve this question
1
  • 1
    Maybe a search function would be better than a menu, if the users tend to know what they are looking for. This is indeed the case in my experience, so might be viable. Mega menu might work if you could consilidate into fewer levels? Likely break down on mobile though.
    – Steve Jones
    Aug 23, 2015 at 14:19

3 Answers 3

Reset to default
4

Both the options are good but Tree navigation is recommended. My suggestion would be add the search box above the tree navigation to access the menu item quickly. User can type 3 letter in the search box to get the respective page link.

Improve this answer
1

From the 2. the tree navigation option seems the better choice. I'd add accordion behaviour(expand/collapse) to the navigation so unused elements of the menu will be hidden. Also, having breadcrumbs will give the user a sense of where they are on the application. You could also have selectable elements in the breadcumbs to allow the user to jump between parallel pages

Improve this answer
1

Representing the entire site schema in one page is a bit like search, as mentioned above, or an old-style site map page.

Is this meant to be a guide to the site, or working sitewide navigation? If it's the latter, you could display the top levels (0-4) in the mega-nav and the lower levels in section nav.

If the sections are really deep, you might want a vertical, accordion nav element in the left column of each section page to drill deeper.

Also, do you need to navigate to the lowest levels? If you have a huge pile of similar objects -- products, lesson plans, images, houses for sale, whatever -- that lends itself to a filtered list type layout. You could use the mega nav to deliver users to the pertinent list, where they could sort and filter to find the objects they need.

Improve this answer
3
  • This is meant to be for site wide navigation, more specifically this is a legacy CHUI interface being modernized to a Single page application. Navigating to the lowest levels would be required. The system is not necessarily meant for content consumption like real estate listings or products. It's a heavily transactional business application where users constantly create or update business objects. The lowest levels are not necessarily browses but forms. I know... It's ugly, but it is what it is right now.
    – Mark
    Aug 25, 2015 at 3:22
  • I had to Google the term "CHUI" and this popped up on Stackoverflow:
    – RobC
    Aug 25, 2015 at 18:08
  • I had to Google the term "CHUI" and this popped up on Stackoverflow: stackoverflow.com/questions/253664/…. If the sections of the application are well-known to users, maybe you could stick them in expanding drawers. Expose, or open, the first drawer in the page as the default and show the rest as closed. Clicking on a closed drawer label opens that section -- sort of like accordion nav, but without the navigation strip.
    – RobC
    Aug 25, 2015 at 18:15

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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