I’ve had a stab at redesiging The Guardian‘s home page before. I thought I’d take a different tack this time by concentrating on one part of the page: the header.

What’s wrong with the header?

If we accept that simplifying design equates to reducing the choices available to the user to a few core, meaningful options, then the header fails because:

• There are 3 navigation elements: two horizontal link lists and a drop down list
• There are 25 links within the 2 link lists and a further 70 (yes, 70!) in the drop down list
• There are 9 different link colours used in the link lists
• The header contains information about the weather, a prize The Guardian has won, the date, the time of the last page update, a graphical link to the RSS feed, text resizing widgets and registration and login links
• The search box offers 2 search options: The Guardian and the web, resulting in another drop down list

Summary: too many options, probably because the designers felt everything must be accessible within one click from the home page.

Improving the header

• Use 1 link list
• Reduce the number of links to a handful of top-level categories. Use the structure of the print version  as a guide, as it’s simple and most newspaper readers will be familiar with it.  Readers can navigate to their target by clicking on one of section links, just as they would turn to a particular section of the paper in order to find a story
• Use one colour to indicate links
• Use the header for one purpose only: navigation
• Use the search box to search the Guardian. Try this obscure site for searching ‘the web’

My version

My version of The Guardian website’s header

No frills, just a simplification of the header’s purpose. I’ve used titles to further guide readers through the navigation — a simple technique, but one that is really helpful and easy to implement.

I’ve also dropped the .co.uk from the masthead as it only serves to devalue the online brand (i.e. it suggests that readers haven’t encountered the ‘real’, proper Guardian).

Before and after