Photo by CanadianSc at stock.xchng.

Today was one of those days where you know that you need to get something done, you know that it’s important, you know that it really needs to be done as soon as possible but … well, it’s like going on a journey where you’re not entirely certain of the destination or how you’ll get there, but you’ll know you’re there when you arrive.

That image of navigation was quite a useful one to have in mind because the task in hand was to redesign the left-hand navigation on our new redesign of the University website.


At the moment we employ a navigation design that relies on left-hand markers to indicate at which level you are in the site hierarchy. It looks like this:

Example of left-hand navigation

The main criticism that we’ve had about this design is that there’s not enough contrast between the text and the background, which is a fair comment.

We also feel that there is not enough indentation between the different levels of hierarchy to make it absolutely clear which level belongs with which, especially when you get down to the 4th or 5th tier.

And the whole sorry mess takes up too much room.

Work in progress

So today I’ve been working on a new design, based on the navigation designed by my colleague Steve for the University’s sport website.

This is as far as I’ve got — it’s a work in progress, hence the non-sense text and random labels.

Work-in-progress example of navigation

The miracle is that by the end of the day I had something that works down to four levels, and works in Firefox 2, IE6 and IE7.

Tomorrow will be a day of tweaking, and testing it down to six levels … not that we really want six levels of site hierarchy. I sense a rearchitecting of bits of the website coming on!

That and bed!