Mega Menus for GO

For anybody reading this blog from outside Edge Hill, we have a staff and student portal called GO. GO is intended to eventually replace the current intranet.

Due the the vast nature of the internal information, we decided that the current top navigation bar just didn’t provide enough direct access to the services that staff and students need on a daily basis:

Old GO navigation bar

For a while we’ve been working on a mega menu solution. Mega menus are springing up everywhere and even Jacob Neilsen feels that they are a much better solution than previous drop down implementations.

There are three features in our mega menus worth mentioning.

1. The mega menu content.

There are two flavours of the mega menu, one for staff and one for students. External parties with access to go will not see a mega menu.

The main mega menu drops down when the GO logo or the A-Z link is rolled over. The left hand colomn has some current news stories, and these will eventually appear automatically (they’re currently added manually so if they go out of date, bear with us). The other links have been deemed to have the most value and the A-Z link is repeated in the bottom right hand corner. Go on click a few and see where you end up.

2. A-Z

We have also added an A-Z page and this should cover all wiki pages sites for whom the user has access together with a few other areas of Edge Hill’s online services. The A-Z is quite extensive so to enable easier access the A-Z has it’s own navigation. When one of the letters is clicked the items beginning with that letter are displayed and all others are greyed out making it easy to hone in the links you need.

3. Top Navigator choices (+/-)

You may have noticed a +/- button on the top navigator.  Initially all users are offered Mail, Library, Blackboard and Files on the top navigator.  As long as the user is in GO, thay can use the +/- button to open a choice box and select the 5 items they prefer.

There is scope to add further items in the future, but choices will be limited to 5 in order to keep the top navigator consistent.

The mega menus should also function in the docs. library and wiki domains.

Rise of the Mega Menu

Mega Menus might sound like McDonalds’ latest attempt to Super Size your life but not in the web design community.  Here we’re talking about a relatively new development to help navigation around websites.

For quite a long time drop down menus have been a popular navigation feature on the web – our corporate website has used them for many years and they go some way to solve the problem of linking to lots of information while using a small amount of screen space.  Drop down navigation isn’t without its problems – nine years ago, usability guru Jakob Nielson advised to use them sparingly – and mega menus are an attempt to do drop downs better.

Our interest in expanding navigation isn’t for the corporate website but GO. As part of the staff intranet to GO migration we are facing the problem of vastly increasing the amount of information available and guiding people to their required system.  The top global GO navigation that shows in most internally facing services and currently contains half a dozen links won’t scale when every department and system is available through GO.

This isn’t an overnight surprise and we’ve seen this coming for over a year but now is the right time to make changes.

I don’t believe “mega menu” is a standard term and many sites implement the idea in different ways but the general idea is to have an expanding menu area linking to many parts of a site.  The first example is an extension of standard drop-down navigation.

image

Typically there will be several menu items each with their own drop down containing a variety of information.  The larger area means there is greater flexibility in how links are shown.

The second type of mega menu can be seen on the BBC websites.  In early 2008 they added an “Explore the BBC” button to the masthead of their pages. Unlike mega drop down menus, this is a button you must click on and opens up to a selection of links:

image

The explore button in provides a mix of fixed popular subsites – iPlayer, News, TV etc – and time-limited promotional links – currently Strictly, Democracy Live and Merlin.  There’s also a link to their full A-Z list (the topic of a future blog post!).

Jakob Nielson has something to say about mega drop down menus as well and it’s useful advice which we have hopefully applied to our own implementation.

Our planned approach is somewhere between the two design patterns.  We’re experimenting with ways to add “More” to the GO navigation.  We’re currently testing solutions and hope to launch something in the next few weeks.

>