Every now and then I like to take a look at popular sites and think how I might design things differently if given the opportunity. This time around I'm taking a look at the BBC News homepage, so this task will primarily be looking at information hierarchy as well as navigation, my views on the current execution and then finally my take on things.
Click on the image to be able to scale to 100%.
Current site, breakdown and thoughts
Fig 1. Header & main menu
The choice to make the news links stand out on a red background is understandable. I assume that the reasoning is that the user has navigated to the news section, and therefore these would be the links that are the most relevant. However I've always found the colour choice a little off. The eye is drawn to the red background which implies that the links found here (Home, UK, World, etc.) are the most important on the page, however I would argue that the various site sections are the first port of call for visitors from an information hierarchy point of view. It could then be a more comfortable scanning experience as the eye is drawn down the page, rather than needing to scan up then back down again.
Fig 2. Main news story
No specific bugbears for me here. It's pretty clear that this is the main news story on the page, however...
Fig 2a. Another news story
I've called this 'another news story' as I actually am not clear on why it's positioned where it is. So, some guesses;
- Being next to fig.2 it could be assumed that it's a related story to the main item, however I've seen many examples when this isn't the case
- It's the second most important story
- Due to it using an identical layout, it's a part of fig.3, but wedged in to fit another story on the page above the fold.
Suffice to say (to me at least) it's a bit of an odd one.
Fig 3. Important news items
The next row looks like the next most important news items on the page. Smaller images from the main story, but treated with the same information - the title, subtext, time stamp and category.
Fig 4. Sub items
And we finish off the main news items with a selection of sub news stories.
So in total, this gives us a theoretical maximum number of 14 stories, but it should be noted that these are curated and not necessarily the most read items - these are displayed further down the page in fig 9.
Fig 5. Must see
At first glance it's easy to assume that this is video content due to the title, however it's a mix of video and article content. You don't tend to 'see' an article, in the same way that you don't read a video. In my experience it's best to be as clear as possible, as much and as often as possible. Whether it's a title, call to action, or instruction.
Fig 6. Full story
This looks to be a mix of curated magazine and editorial content, commonly of a more whimsical nature. I'm not really sure who it's aimed at as the content held within could be covering a broad range of topics.
Fig 7. More from the UK
Assuming this is geolocated content, this section would show top stories from a region point of view.
Fig 8. Sport
The all-important sports section. I'm not against this being here, but I would ask why it needs to be when there's a perfectly serviceable Sport section link in the main header.
Fig 9. Most popular
I find this to be a great way of quickly picking up on the days' news, as it shows both what's important and anything else that is trending in-between - and it's shoved right at the bottom of the page.
My overriding view of this page is that there's an overload on the number of stories, plus ambiguity over what might be found in each section due to non-specific titles. This mostly leads to skimming past a lot of content just to find a module that looks different, which inevitably is the 'most popular' section.
Click on the image to be able to scale to 100%.
Regarding my earlier comments, I decided to change up the colour scheme of the header. The emphasis is now on the main sections of the site, which then filter down to the subsequent levels below. I've also opened everything up slightly to give a little breathing room, whilst also ensuring that the links are touch device friendly.
Main news story
I've changed the main news story so that it remains front and centre, but also removed the 'tag-along' item that is beside it in the current version. This gives clarity to the reader that the first item on the page is the main news with any related stories alongside it.
More news items
The following two sections demonstrate clear heirarchy for displaying important/noteworthy articles in order of importance.
Must watch / Most popular
Following on from the top 10 most important (curated) articles, video content is then displayed alongside very useful user-curated content.
At this point the content changes to try to help the user find what they are looking for as we assume everything above hasn't done so yet. Need something more specific to region? Or perhaps something from a particular category?
In short, I've attempted to cut down the content of the page to make it more focussed, assign clear heirarchy to the various sections of the page, and clearly signpost what content is in each section. From a design point of view, the goal was to keep it as close to the BBC branding as possible, but make use of a little more whitepace (within reason) to open up the page a little.