Arise the mega-menu...

We're always looking at ways of making our site easier to navigate and from looking at our statistics it's clear we get a lot of traffic from our red bar navigation. Therefore, we thought it was time for a reappraisal of this to help our users navigate quickly and effectively.

After lots of trials we settled on completely rebuilding our drop downs. These drop downs enable users to take a shortcut to the page or sub-page they are looking for, while also giving us a chance to link to key documents and events which we feel need highlighting.
 
From a design perspective, we felt a drop-down menu allows a ‘busy’ layout to be tidied up (and our site is over 11,000 pages!), with all of the sub-categories hidden away awaiting a mouse-over. Firstly, we needed to think about the action that users need to take to activate drop-down menus and decided that they would only show when clicked. The advantage of this is that the menu remains in place whether the cursor remains in the area or not. This therefore removes one potential source of frustration.
The 'mega-menu' on our new
International landing page

The next stage was to focus on the content and this was the most time consuming part of the process (which it should be!) We ran an audit of our most searched for/visited pages and cross referenced this with our key messages to ensure that we are guiding our users both where they want to go and to what we want them to see. This gave us our large range of links in related groups. We then authored a number of headings to group them together and put them into relevant column layouts.

The important thing here was to not offer too many options, save extra clicks where we could, and make sure we did plenty of testing (both with users and with different browsers). From this we also decided that our 'mega menu' would span the entire width of the page allowing it to be much more tidy and easy to read.

Our final big consideration was how this would work on a mobile device. As our site is responsive (and after lots of testing) we decided to avoid clutter and to focus on keeping it simple. We felt it would be easier if these long menus did not display at all on the smaller devices (i.e. smartphones) as too much content on smaller screen sizes regulated our main content.

So there we have it! The 'mega-menu' is now live and we'll be continuing to monitor the stats very closely to see if they've had the desired effect before developing them yet further...
Next PostNewer Post Previous PostOlder Post Home

0 comments:

Post a Comment