Large navigation menu

Get Started
1

I manage the technical side of large NI Gov website which is basically a local version of directgov. One of the biggest problems of the site is navigation where the right nav is so deep is becomes unusable.

This is something I’m looking at as part of a redesign and am very keen to hear suggestions for improvements. It’s hard to find another single site (most take the microsite approach) that have this challenge. Taking a worst case scenario, would what you do with the right nav on a page/level such as this http://bit.ly/5K9ZZq?

2

At the momment it sayeth; “HTTP Error 503: […]” so I cannot see it yet.

3

As a web developer, I would be unhappy trying to deal with that setup with styles alone. Instead, it likely needs actual reorganisation.

For example, it looks like “tax credits” are coupled with “child benefits” which seems to mean all other types of tax credits seem permanently attached (even though that is where I would have to go if I was single, no children, and working poor).

IRS.gov, since it’s also an Engrish site, has different organisation.
There is still a top-level menu (on the main page, it seems to just have chunks of types of taxpayers, be those humans or organisations), a sub-level (drop-line) menu, as well as a side menu and on-page groupings as you have.

On IRS, if I click “Individuals”, types of individuals appear in the drop-line menu. One of them is “parents”.

So, someone who may be looking for child credits can logically be assumed to first select themselves as an individual (not a business etc), and then a “parent”. Child stuff belongs under parents and guardians so this makes sense. A large part of the resulting page is indeed about tax credits and child credits (and those are at the top as it’s quite a long page), and the rest seem to be a jumble of links someone who is a parent might also be interested in. If those lower links vanished tomorrow, it wouldn’t be a huge deal.

Other types of credits are NOT listed on that page, except as the plain link “tax credits” which is on the page and not on any side menus. Clicking “tax credits” takes one to a page dedicated to just credits of all sorts. Therefore, the working poor do not have to wade through things to do with babies. It seems to be good organisation.

Plus points for the breadcrumb on your site, as it definitely helps. One thing your site could maybe do is have the right menu actually be page-dependent. This may introduce the danger of someone expecting the exact same menu on every page, but I think when things are getting this deeply nested, it may be better to rely on the user knowing how to use their Back button and/or the breadcrumbs.

This way, on a main page, the right menu can really be mostly topic headers, which when clicked go to your current style of pages (main headers with sub links underneath). But once someone has gone into the “child credits” area, for instance, other than maybe a single link on the main parents’ page going over to (the higher-up) “overal tax credits” level, the page and the right menu should maybe be exclusively about parents, guardians, and children/education taxes, period.

That’s something you could possibly do with HTML alone, but still, I’d strongly consider a reorganisation of how things are organised, if possible.

4

Thanks for the feedback. This site has over 3000 pages in a range of themes, it’s content managed so menus are generated on the fly. With no central workflow it’s almost impossible to keep a eye out for contributors “breaking” things so this needs to be beared in mind with any proposed changes.

I’ve been thinking that perhaps from each main theme page once a child has been selected there’s no need to display siblings thereafter. However, this will reduce the number of links a little but not significantly. I think the main challenge is where there are 2/3 nested lists laying them out so it’s easy to distinguish relationships.

I guess what I’m saying is for now I need a one menu fits all solution. I recognise parts of the site may work better with their own nav but that would take time and for now I’m looking for a quicker win.

5

Well, with that in mind, you may want to take your current menu and add some JS to it. You already have a bit, at the bottom, where after checking in a browser that runs Javascript I saw the bottom menu items vanish. You could increase that, a bit like Amazon does where, so long as you have JS, the menu is really compact, and clicking on any topic causes the sub items to expand out. (I really only noticed after checking in Opera).

It doesn’t solve the problems of organisation you have now, but what it can do is make your menu look smaller and possibly help people more easily see what’s lumped with who (because only related topics would expand out when a “header” is clicked).

6

Daz, if it were me redesigning that navigation menu I would consider having a “rollover” popup menu with CSS (the menu you rollover saying something like “Navigation - roll over to view”). Upon rolling over the button it would have a container element which lays out all of the items in categories (like a site-map). You could therefore wipe out the excessive side menu and have everything organized into a box which appears on roll-over (if that makes sense). :slight_smile:

Edit: I’ve enclosed a wireframe below to show what my point was:

If you stack the navigation into categories, it’ll be widely visible. :slight_smile:

7

Hm, yeah, that’s actually better than an expansion menu, so long as page length is accounted for.

Meaning, if it’s likely people will have old screens or something, you either want to add a crapload of padding under the menu, or have the popup menu pop “up” (closer to the top of the page) from where the main menu item is.

You’ll know it if you get a vert scrollbar that vanishes when you lose the popup. I’ve run into those… make sure the page body is always longer than the lowest submenu.

Alex’ solution also takes advantage of grouping you get with Mega dropdowns.

8

Yea, I couldn’t find a suitable example early when I was thinking (I’ve found one here >>> http://www.debenhams.com/), but the difference I was suggesting from Jakob’s discussion was that the categories were stacked so it would be wider than taller (hopefully helping). Perhaps if there are too many items for each category you could take the “Win7 / Vista Start Menu” approach, which would be to fix the height on the menu and have scroll bars in the exploding box. :slight_smile:

9

Guys really liking the mega drop-down concept. Can’t quite get my head round though how it would work when on a level which goes down another 3/4 levels. I mean take Debenhams even they have a persist left nav for lower level pages, the mega drop-down is only for quick access to the main areas.

10

Could you explain further the multi-level issue?

The mega-dropdown would have categories (as per my image) to stack the various section issues you have, what other levels do you need?

11

Well have a look at http://bit.ly/5K9ZZq again and you will see (as a worst case scenario) its 5 clicks from the homepage. So if there was a mega dropdown, best you could do is present level 3 links requiring the need for a cut down version of the current rightnav. Would you agree? It might be easier or more logical to have something like themes or issues in the topnav which when hovered over shows the dropdown.

12

To be honest I would be looking at reducing the number of levels or perhaps combining some of the lower levels into longer articles. Having so many “main” blocks within the navigation will degrade the usability of the design from the offset. If you can’t do anything about the links my guess would be to have more than one mega drop down (first level), each block spanning sideways (Second level) would contain an unordered list with the headings (third level) and the fourth and fifth levels beind provided as menu items (fifth being offset slightly). Hope that makes sense, lol :slight_smile:

13

Thanks Alex, that makes sense. I guess the decision has to be top nav item with dropdown and perhaps when on a theme, add an extra level. Or in page nav which expands to 4/5 levels. Hmm!

14

Agreed with Alex, one of the main Good Things about a Mega is it can reduce the depth of the menu… the deeper the menu, generally the harder it is to use.

Because the Mega brings a div onscreen, that div can hold all sorts of goodies: main level headers, with their own ul’s underneath, and also sub-level headers as well, with THEIR own ul’s. So instead of having the “lower levels” hidden, they’re onscreen but just organised. Using CSS to style sizes and maybe a good use of borders, underlines, indentation and colours can help show who belongs to whom, visually. (of course your header levels should also make sense).

You’ll probably want to invest in a small Javascript that can make keyboarding through such a menu as easy as mousing through it… and with pure CSS, see about being able to make at least each clickable item appear on-screen and readable (the best you can do with pure css really) on :focus. (which won’t work in IE7 but oh well).