Simplifying The Guardian’s header

The Guardian is an excellent newspaper, but the design of the online version could be improved in several ways, starting with the header.

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?

Current Guardian header: confused, busy, difficult

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's header: simpler and easier

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

Current Guardian header: confused, busy, difficult My version of The Guardian's header: simpler and easier

  • Digg
  • del.icio.us
  • Google
  • StumbleUpon
  • Technorati
  • Ma.gnolia

Commentary

Being simple doesn’t mean minimal. Your simplification, however very debatable. Guardian is a news website, not a personal weblog. I think their site is the most minimal news sites compare to others. But, nice try though.

Hi Eftu,

I think my version offers a better way of navigating through the site than the current version. Regardless of what type of site you're navigating, having a choice of nearly 100 links in the header is not a good thing.

I don't see why newspapers need to offer a “search this paper” and a “search the whole internet” choice: I doubt anyone uses the “search the web” option; they'll go to google instead.

Text resizing widgets are naff, full stop. You might as well put a sign above the site saying “Warning — tiny text here!”

I guess my version looks a bit basic…

I think all newspapers are beginning to look the same online — I don't think The Guardian is particularly minimal compared to the others. They all seem to be scared of not linking directly to content on their front pages, which creates a very busy look.

Ta,

Leon

Looks good to me. If the Guardian site took up your suggestion I’d go there more often.

Thanks John - interesting use of one of my themes; you’ve improved the look a lot since I last looked.

Garamond italic too. Very nice!

Hey there Leon - interesting post. I totally agree with your ‘Search the Web’ option. And so does Jakob Nielsen in his book ‘Prioritizing Web Usability’.

Posts such as these promote debate - my rather humble opinion is that your header is over-simplified. You do not explain where you’d put Accessibility options, sign-in/registration links. I disagree about the text resizing shouting ‘Warning - Tiny text here’. I don’t think the text is too small, but I’m sure many people do. Isn’t it a good idea to make it as easy as possible for those people to change the font size?

Also, you mention that you’d remove the award text. Would you not be proud if your website had won an award? Would you not be forgiven for displaying it in a fairly unobtrusive way in the header area?

I think Times Online has a better judged header.

Hi Shane,

Thanks for replying. I’ll go through what you’ve said:

- I’d put login/resister options wherever they’re required; for example, if you needed to login to respond to a blog post, I’d direct you to a login screen. How many users need to login to The Guardian? I would imagine it’s not enough to warrant putting a link at the top of every page.

- Text shouldn’t need resizing, so ‘resize text’ widgets are a sign of bad design: designers should respect the reader’s choice of font size.

- I don’t think it matters what The Guardian thinks of the prizes it has won — what’s more important is whether that information is important to the user. I suspect it isn’t, unless the prize is newsworthy (again, I doubt many people click on this link: I clicked on it for the first time because I was writing about it). A better idea would be to put this information in the footer, with a link to the nature of the prize. (At least The Guardian does link to the awarding body.)

As for The Times, I’d agree that it’s marginally less cluttered. I really like the teaser placed top right. Again, I think there are issues with the number of choices available to the user, and the search box isn’t prominent enough.

Newspapers seem to share design problems, which spring from a fear that readers won’t bother clicking through to content, that they need to have direct links to everything on the front page. Have you noticed how long these pages all are? Does anyone bother reading through to the footer?

As a result of this some bad conventions have arisen, which are hidden by the fact that critics like the tight grids that papers like The Guardian and The Times use online — but that’s another article!

Apologies for waffling,

— Leon

Fair point regarding the login - I still see it as being quite unobtrusive, like the award text.

I don’t agree that text shouldn’t need resizing - there are lots of people who have sight issues who may need to enlarge the size of text. Starting out with very small text as a default is not a good idea - you need to cater for as large an audience as possible, but you can’t say that one size fits all, as it were.

I often resize text in pages (using browser text resizing) to see if the design ‘breaks’. I find that if text is resized, it will often overlap, rendering the design useless.

Now I’m waffling ;)

Waffle away!

I’m saying that font sizes should be set to a relative unit (font-size: 100% in order to accommodate IE). By doing that, the page will respect whatever the user has set as their default font size. If a user has a sight issue, then their setting is respected. If the default setting hasn’t been changed by the user, you’ll get a base font size of 16 pixels: big and readable.

If you set the default font size to 100% then you won’t need a text resizing widget.

The Guardian, and other papers, throw so much content on to their home page that they have to use small font sizes for lots of text. As a compromise The Guardian places the resizing widget in the header — but that’s admitting that you’re likely to find cramped text on the page. You’ll also note that enlarging text by 2 clicks and beyond borks the layout.

(Try resizing this site ;) )

Edit: The Guardian page resizes pretty well. There are only a few minor problems.

Leave your comment

mail: leon.paternoster@gmail.com