Menu restructing quandary

Question

http://www.scic.com is the site.

We have a menu structure similar to this on our site using jQuery Simplemenu.

-----------------|----------------|-----------------|-----------------|
|     MENU 1     |     MENU 2     |     MENU 3      |      MENU 4     |
-----------------|----------------|-----------------|-----------------|
                 |  SUBMENU 2-1 > |-----------------| 
                 |  SUBMENU 2-2   |  SUBMENU 2-1-1 >|-----------------|
                 |  SUBMENU 2-3   |  SUBMENU 2-1-2  | SUBMENU 2-1-1-1 |
                 |----------------|  SUBMENU 2-1-3  | SUBMENU 2-1-1-2 |
                                  |  SUBMENU 2-1-4  | SUBMENU 2-1-1-3 |
                                  |  SUBMENU 2-1-5  | SUBMENU 2-1-1-4 |
                                  |  SUBMENU 2-1-6  | SUBMENU 2-1-1-5 |
                                  |  SUBMENU 2-1-7  |-----------------|
                                  |  SUBMENU 2-1-8  |
                                  |  SUBMENU 2-1-9  |
                                  |  SUBMENU 2-1-10 |
                                  |  SUBMENU 2-1-11 |
                                  |  SUBMENU 2-1-12 |
                                  |  SUBMENU 2-1-13 |
                                  |-----------------|

When a user selects 2-1-1 the page loads with a left side menu that contains the items like below (content is in div on right side of page)

|------------------|
| OTHER MENU ITEMS |
| OTHER MENU ITEMS |
| OTHER MENU ITEMS |
| OTHER MENU ITEMS |
|------------------|
| SUBMENU 2-1-1-1  |
| SUBMENU 2-1-1-2  |
| SUBMENU 2-1-1-3  |
| SUBMENU 2-1-1-4  |
| SUBMENU 2-1-1-5  |
|------------------|

But when the user selects item 2-1-1-1, they get a page with a left side menu like this:

|------------------|
| OTHER MENU ITEMS |
| OTHER MENU ITEMS |
| OTHER MENU ITEMS |
| OTHER MENU ITEMS |
|------------------|
| SUBMENU 2-1-1-1  | Highlighted
| SUBMENU 2-1-1-2  |
| SUBMENU 2-1-1-3  |
| SUBMENU 2-1-1-4  |
| SUBMENU 2-1-1-5  |
|------------------|

Essentially a clone of the 2-1-1 left side menu, just with different content and the 2-1-1-1 item highlighted. To see it in action on our site, select:

COURSES->Classroom Courses->Certified Insurance Counselors (CIC)

then select

COURSES->Classroom Courses->Certified Insurance Counselors (CIC)->CIC Personal Lines

We want to somehow include the OTHER MENU ITEMS somewhere in the dropdown to alleviate us from the duplication of the left side menus on those pages; essentially getting rid of that menu totally.

I've seen the usage of Mega menus on several sites but none of them had the fifth level in a dropdown off the mega menu. Due to the length of our menu text, a secondary bar is just undoable. It will also have to support responsive design as the site is being redesigned for mobile as well.

Anyone have any other ideas to help me out in this quandry?

Answer 1

In my opinion, your menus are way too complicated already. Some problems I see:

• It is not intuitive to find things if one is not sure what one wants.

• It encourages users to jump directly to the lowest level, but the intermediate levels appear to be the ones that really "sell" the product and provide important contextual information. The lowest level has information that is very specific and hard to understand on its own.

  Yes, your customers will know a lot more about insurance than I do. But this doesn't mean they will understand the logical organization of how all the courses fit together. Jumping straight to the individual course may cause them to miss the bigger picture. And they will miss out on most of the promotional information about the programs.

  Beware of assuming too much about what your users will understand. It is easy to fall into this trap as developers, because we work on the site constantly and become very familiar with it. We forget what the experience of someone who sees the site for the first time will be.

• The text is very small (necessitated by fitting all those menus on the screen).
• If you accidentally move your mouse outside the menu while navigating, you have to start over from the beginning.
• Javascript is required for basic page navigation. If you eliminated the left navigation, as you suggest, the site would be even more dependent on Javascript and practically unusable to those who don't have it.

I think navigating to subcategories via the pages themselves would be preferable. However, the pages as currently designed do not highlight the subcategories, so it isn't easy to navigate to a course via the pages either.

Here is what I would suggest:

• Eliminate the lowest level of menus. This will allow you to make the menu text bigger.
• Put tree-style navigation on the left side menu. This way, the user can always see clearly where they are. Make the subcategories of the current category clear; especially, make sure there is a clear distinction between subcategories and information pages for the current category.
• Use consistent names. The top menu is called "courses", but on a category page all I see is "Programs". This is confusing and makes the courses harder to find. I now understand that you are making a distinction between courses and programs, but this distinction might not be clear to the site users. It would help if they could see that a "program" is a "course" in some way. Putting them in a tree-style navigation would indicate that contextually.

Further Conclusions: you do seem to have three different ways of navigating to courses: the menu, the left-hand navigation, and the right-hand course list. You could simplify this. However, removing the left side navigation while leaving the rest of the site design similar (and expanding the menus) would result in a site that is confusing and hard to use, in my opinion. The top menus are not optimal, for the reasons discussed above, while the right hand side course navigation is just a huge list that doesn't provide any contextual help.

A well-structured, tree-style left side navigation would be my preferred method of logically organizing the site. It would provide the same functionality that the menus do, but:

• It would be clearer and easier to use.
• It would provide context that is always present on the screen.
• It would guide users step-by-step through the site in a way that matches the content of the site itself.

Answer 2

I've been looking through the Course sections (https://www.scic.com/courses) for the past 45 minutes, and unfortunately getting rid of the left navigation by putting the "Other" menu items in the drop down is not going to solve your problem.

The "Courses" section has a very singular information architecture, into which its content is rigidly formatted at the expense of clarity. In addition to the IA problem, there's also content strategy problem. And I'm afraid there is no cheap fix for that.

First thing I would do is make the "Courses" top nav clickable, and create a landing page for it. Once the user is there, provide a way to get to all the courses via one-click, since there are only 80-90 courses. That's not a big number to list on one page, and it beats fiddling with the the tree navigation.

Second, I would merge pages whenever possible. For example, do you really need 10 separate pages for the "Other" pages? (CIC Benefits, FAQ, Faculty, Why Pay Dues... CIC MyPage) They can all be combined into couple of pages, as long as you have those 10 items as table-of-content links. Then you can remove them from the left nav completely, so that the actual program listings are no longer so far down the left nav.

Third, I would rethink the "Course Offerings" section on the right side. Currently, it takes up a lot of space, but it's not visually integrated to the course content, even though it is context-sensitive. There are probably many good ways to make them stand out more, at the same time taking up less space.

Good luck!

Answer 3

I would have to concur with Jung Lee. The problems here seem much larger than the choice between top and left hand navigation menus. Some general content strategy principles to consider with your menu structure (taken from Erin Kissane's The Elements of Content Strategy):

1. Publish content that is right for the user and for the business. "Content is appropriate for users when it helps them accomplish their goals."
2. Adopt the cognitive frameworks of your users. Don't insist that user's adopt your internal organizational chart. Understand their mental model and try tailor content that they can figure out and understand what is going on.
3. Omit needless content. Organizations love to publish lots of content. "Too much content makes everything more difficult to find." Also, "spreading finite resources ever more thinly results in a decline in quality. It also often indicates a deeper problem—publishing everything often means 'publishing everything we can,' rather than 'publishing everything we've learned that our users really need.'"

Erin has a lot more useful tips in her short book. I would definitely recommend picking it up. Also if you're looking for more information on the topic, Louis Rosenfeld and Peter Morville's Information Architecture for World Wide Web from O'Reilly Books is a great resource for understanding how to appropriately organize large, complex websites.