Review - bbc.co.uk redesign

Updated 16 december 2002

The BBC is one of the oldest major websites and a personal favorite (I also worked on the site a couple of years ago). It has always been, in terms of combining usability with aesthetics, one of the best designed sites. They have recently launched a new design together with their BBCi brand (covering web and interactive TV).

www.bbc.co.uk is enormous. Their category listing gives you some idea of how big this site actually is. Please correct me if I am wrong, but as far as I know this is the biggest site on the web barring search engines and sites dedicated to repackaging other people's content. The BBC's success can be attributed to two main factors:

• It produces a vast amount of content in all mediums, independently of the website, and has an even larger archive. (Incidentally the website has content in no less than 43 languages).

• It doesn't have to make any cash. In fact it is forbidden from advertising or charging, meaning that they only have to worry about getting visitors; not how to turn those visitors into revenue.

The latter point is especially relevant in the post-stock-market-crash world where, all of a sudden, content sites are expected to make a profit and few, if any, have worked out how to do it. The current trend is to charge for all except a small amount of content as do salon.com, with sites such as the Financial Times shortly due to follow suit.

The redesign

The design affects primarily the navigation pages, i.e. the homepage and some top level pages. At the moment the only impact on the subsequent pages has been the addition of the (usually not that well integrated) BBCi grey top navigation.

new bbc homepage

the homepage, before the redesign

The most striking design innovation is the removal of the left navigation bar and the introduction of a grid of 3 evenly sized columns.

On sites above a certain size, losing the navigation bar is totally justified. Navigation bars are great on small sites but tend to run out of breath as soon as we get deeper down the hierarchy of a bigger site. When you are reading a piece about, say, football, it is infinitely more likely that you will want to find other pages on the topic of football than jump to the top level of a completely different topic. As such, navigation bars are often ignored

This is a lot of valuable screen space to be wasting on something that is mostly not relevant to the users task. It is a far better approach to navigate through index pages like those made popular by yahoo. A part from freeing space for local navigation on content pages, the top level pages themselves can dedicate their whole surface to providing many links in a grid (rather than in one thin vertical column), making them much more scannable.

The "Categories" area of the BBC Homepage contains 87 links, well classified and readable at a glance. This gives a far greater appreciation of the content available and an easier access to the lower levels of the site.

Font wise, the new pages are mostly set in verdana size 1. This font has become increasingly popular in recent web sites as it looks sharp, modern and is closer to magazine design while still being legible. Also, a smaller font lets you fit more in a screenfull. That's the plus side, anyway.

The down side is that this font size can be quite painful to read on high resolution screens, such as Dell's recent 1600 x 1200 laptop LCDs, not to mention the difficulties users with poor eyesight will have (or worse: a user with poor eyesight AND a high-res screen). Also, the amount of dots computer screens have available to render such a small font makes it very blocky.

To be fair though, the BBC designers remembered the main issue when they implemented: font resizeabllity. This enables viewers who are uncomfortable to pick a size more suitable for them. Many designers / developers prefer to fix the font size so their designs look the same no matter where they are viewed. However this can make the site useless for users who are unable to read that particular font size.

As resizeability is the default behavior of web browsers (and a major plus compared to the print medium), no extra work is required to benefit from that feature. However the aforementioned designers would rather go the extra mile to make sure that visually impaired people have as much of a hard time on the web as they do everywhere else. They deserve to have their eyes poked out (the designers, not the people).

Anyway, kudos to the BBC for not committing that sin.

Another novelty are the links: dark blue (quite close to black) and non underlined. This would seem like a major usability flaw at first but I find the BBC have approached this with a lot of thought:

• The copy text on these pages is grey, making the links stand out.
  
  
• The links have an underlined mouseover. On browsers that don't support text mouseovers (such as Netscape 4) the links are always underlined (showing once again the great care with which this website is implemented).
  
  
• Finally it is debatable whether underlining is necessary on a page that is nearly exclusively links. Underlining helps make links stand out from the rest, but this implies that there is a "rest" to stand out from.

One complaint is that this doesn't hold true for the occasions when you need to have a link within a block of text. On the BBC this is okay as they rely nearly exclusively on various navigation pages, boxes and bars. Very rarely do they have links within the text, but it seems a shame to make this a limitation by design.

Since this update has only affected the navigation pages, they clash one hell of lot with the content pages as they have kept the old layout.

content page combining old grid with new top bar

It will be interesting to see how they update them to fit with the new navigation system. In particular the three column system seems problematic: taking one column for the main text area would be too narrow but two columns would be too wide.

Overall, though, the BBC have lived up to their reputation by taking traditional portal design and making it look great, combining usability with a very well rounded design and a flawless implementation.

Update 16 december 2002

Since the original paper, the homepage has been slightly redesigned.

The most striking change is the colour scheme: all content has it's own coloured box and although the variations of tone are used very nicely to structure the page I found that having some parts of the page on a white background helped the design breathe. An interesting touch is that the colour scheme changes to fit with the main picture. So this screenshot is blue, but it could just as easily have been orange or green. Clever.

One really innovative feature is that the color of the boxes you click most get darker over time, thus adapting the page to fit you. I'm not sure of the practical value - if you've clicked it that many times you'll know where it is without the cue- but it is a very, very elegant touch.

latest redesign

The grid is no longer three same-sized columns but two wide columns sandwiching a narrower one. Once again I find the previous layout was more interesting but this change has enabled the main improvement: the news and sport boxes. They have extra width and height which makes them much more legible. The categories list, renamed "directory", is also more prominent and easier to scan.

The titles are bigger and the first choice font is Helvetica Neue - a tad optimistic for a broad audience, especially considering the name variations that exist for that typeface: I have the Linotype version installed but since it is named slightly differently it doesn't display for this page. I guess most people will view the titles with Arial narrow, which works fine too but it seems weird to optimise the design for a set-up so few visitors will have.

The general direction of the previous design has been kept and the page has been made clearer although in some cases at the expense of originality. Nonetheless it remains an excellent design and such a site does have to put usability before aesthetics, plus they have introduced some totally new ways of using colors.

I do have one complaint, though: the importance given to the web search tool. Why would I want to use the BBC's family safe version of Google when I can just as easily have the real thing, which is far more comprehensive as a search utility? The great thing about the BBC is it's content, so providing a web search is very nice but secondary at best and doesn't justify the prime piece of real estate it was given.

Update 23 may 2004

Can the designers at the BBC just sit down and chill? Obviously not. The changes on the branding side are well covered in this article by Matt Jones.

A part from that, the introduction of a larger font size makes the most important elements more legible and introduces a hierarchy that helps grasping the main elements of the page at a glance. The blocks have also been shuffled around and result in a better organised and more user-friendly page.

Very latest redesign

Unfortunately the excellent idea of having a colour scheme synched with the main picture is no more, and gone too is the feature where the various blocks get darker the more you click them. The blue scheme that has been adopted is quite lego-ish and not a very original web colour. The white strip at the top also seems a bit weird as it spills into the background on the left, breaking the unity of the content area.

In short, usability is up but I'm afraid that the visual originality and subtlety that existed in the previous iterations is slowly being eroded.