Newspaper Website Interface Review

I’ve been working on a WordPress theme for a while that’s geared towards high-content sites – sites that produce a lot of content on a regular basis.  Whilst I had a general idea of what I wanted to aim for, I thought some research was in order.  I wanted to see how high-content, high-traffic sites addressed the information architecture (you can read a brief introduction to Information Architecture here) and general interface/usability issues inherent with sites of this nature.

After giving it a bit of thought, it seemed obvious that the websites of newspapers would be a good place to start.  I chose newspaper sites for two reasons.  Firstly, they have a massive amount of content that’s being added to daily.  Secondly, they’ve had to make the move from one media to another, which makes it unlikely that they feel bound by the conventions of the old web.

What They Get Right

After looking through numerous newspaper websites, I’ve highlighted some aspects that I think work particularly well.  It’s certainly an interesting exercise just examining different sites that effectively serve the same purpose, just to get a handle on what they do differently.  Sometimes the differences between sites are more telling that the similarities.

Drawing Attention

Almost all of the sites I looked at for this article had areas on the front page that highlighted specific pieces of content.  This content is out of the normal flow of the content stream (i.e. arranged by date created) and is meant to draw the reader’s attention to a piece of content that the site editor deems interesting or important.

The Times Online has a featured area within the header

Each site takes a different approach to this.  The Times, for example, has a quote from an article along with a picture of the author in the banner alongside the logo.  Not only is this prime real estate, but the use of the author’s image will immediately draw a reader’s attention to that area (people are instinctively drawn towards faces, particularly eyes, when confronted with a lot of visual information).

The Sun's featured area uses bold text and images to draw attention (click to enlarge)

The Times’ approach is fairly unique.  A more popular technique, and one that is also used by the Times, is to utilise large photographs to draw reader’s attention.  The Sun takes a somewhat bolder approach more in keeping with their style and theme.

They’ve used strong, bold text set against images.  This style, right down to the typeface being used, mirrors the actual paper very closely.  The image to the left shows one of several featured areas that appear on the front page.  There are similar areas within each section, highlighting content from that category.

Some of the more conservative websites, for example the New York Times, use images alongside text to draw the user’s attention.

Branding

Taking the image from The Sun’s featured area above as an example, you can spot multiple ways the design brands itself as belonging to The Sun.  As I mentioned, the text and image combination is very similar to that of the paper, and is immediately recognisable as belonging to the most popular paper in the UK (I know).  They’ve also used their own logo when referring to a story they apparently broke.  All this branding in such a small space.

Whilst the on-site branding varies in quality and quantity between the sites, a common thread is the branding of associated services.  Most papers have associated job sites, especially the higher-end papers (The Times, The Guardian, The New York Times etc.) and continue consistent branding across to these sites.  This is important from a usability point of view as it allows any good will the user has towards the paper to carry over to the jobs listings.  In some cases, this is despite the fact that the job listings are actually managed by third parties (e.g. the New York Times uses Monster to manage their job listings, but pushes the NYT branding over the Monster branding – a strong brand in its own right).

Most of the sites also use consistent fonts, colours and wording to really hammer home a consistent brand identity.

Colour Cues

Given the amount of information generated by newspapers every day, organising that information is critical to the success of the site.  As part of this organisation, it’s important to ensure users feel comfortable and have some form of context.  If your user feels lost in the site, then it’s likely they’ll leave and go somewhere else rather than hunting around.  News provision is a very competitive space.

One technique that’s used by websites such as The Guardian’s and The Daily Mail’s is colour cues for various categories.  The approach of the two sites is broadly the same, using a colour to provide consistent formatting throughout that section as well as providing easily remembered and familiar entry points to the section.

Both The Guardian and The Daily Mail use the colour green to signify the Sport section

The image above shows the Sport section from The Guardian and The Daily Mail respectively.  Note that both papers have gone for the colour green to represent this section (no doubt to evoke feelings of the outside, grass, fields etc.).  Both sites use small colour cues to identify the section, some cues are subtle (note the .co.uk has changed to green on The Guardian’s page) whilst others are more overt.

A slight variation in the use of colour comes in the navigation bar.  The Guardian’s site constantly shows the colour and on mouse-over changes the background of the link to the section’s identifying colour and sets the text to white.  The Daily Mail’s site only displays the section’s colour when the user mouse-overs the link.  For the sake of consistency, and branding, I prefer The Guardian’s approach here, although I suspect the selection of such subtle colours was a tough job.  If The Daily Mail were to take the same approach, utilising their current palette, it would likely look messy and lack cohesion.

What They Get Wrong

I’ve picked up on some design aspects that I think some of the sites have failed at.  It may not be true of all the sites I looked at, but it is true for one specific site.

White Space

The front page of The Sun's site has no white space at all

I’ve inserted a picture of The Sun’s homepage above to demonstrate the complete lack of white space in the design.  They’ve picked a fixed width and then just crammed as much content into it as possible.  It’s as if they didn’t want to waste paper.  The effect is claustrophobic, chaotic and difficult to read.

Fortunately most other sites make far better use of white space and are the better for it.  The Times Online is particularly good in this regard.

Readability

Readability can be a tough thing to get right.  It combines so many factors, all of which need to be finely balanced for optimum performance.  Readability is a combination of the right type face, at the right size, with the right amount of space between lines, the right amount of space between paragraphs, the right amount of contrast between text and background, the right colours and the right width of paragraph.

Readability is also relatively hard to judge.  The average user won’t consciously notice whether a site is easy to read or not, they must just become tired while reading or leave the page because of uncomfortableness.

A comparison of readability on four newspaper sites

The image above takes some text of roughly the same size from four sites and compares them.  This text is actual size, using the actual colours.  The image is a PNG, composited of four PNG screenshots, so there should be minimal quality variation between what you see above, and the actual site.  Read each set of text through as quickly as you can.  Do you notice any differences?

Let me tell you my opinion.  The text on The Daily Mail and The Times is too small.  I find it uncomfortable reading the text, and looking at the respective sites, reading a whole article feels like a bit of a chore.  The Daily Mail compounds this by making their columns particularly wide, which is even more tiring on the eyes.  The relative spacing between paragraphs is too small on The Daily Mail and just about big enough on The Times.  It also looks like there’s a slightly larger differential between font size and line height on The Times over The Daily Mail, which helps The Times somewhat.

The Sun uses a refreshingly large font size but oddly for the web uses a serif font for the main body text.  The general consensus is that serif fonts work best in print while sans-serif fonts work best on screens.  Apart from the font, The Sun doesn’t give the text enough room to breath.  The line height it too short and there isn’t enough spacing between lines nor between paragraphs.  What you can’t see here, and what sets The Sun apart from the other sites here, is that the width of the paragraph increases drastically further down the page.  From approximately 400 pixels across to approximately 690 pixels across.  A 75% increase mid way through an article.  At this font size, or any other, 690 pixels is too wide for heavy reading.

I think The Guardian is the best of the bunch here.  There’s nice line height, nice paragraph spacing and it’s a fair width that remains constant down the page (unlike The Sun).  I think it could benefit from a slight increase in size, but I’m sure it’s an aesthetic decision rather than a readability decision to size it the way it is.

For the record, The Daily Mail is the worse here by some way, although they do get bonus points for copious use of images in-line with the text.

Natural Linking

One of the great benefits of the web over, say, newspapers, is that a content creator can link to other content in order to provide context, background information or a different viewpoint.  This linking is most effective and natural when it occurs in the body of the text.

Unfortunately, this is an underused technique on newspaper sites.  In fact, only The Guardian appears to use the links to any notable degree and even there it appears to be automatically generated based on certain category and content pages (for example it links to Manchester United, Premier League and Wayne Rooney but not mentions of previous results or news events).

Search…

I’ve found the search functionality to be uniformly awful across all these sites.  So much so that I’ve dedicated the entire next section to the topic.

Dissecting Search Results

It would be easy to dedicate an entire article to the way these sites handle searches.  Each one is subtly (or in some cases, vastly) different.  Each has positives and quirks.  To apply a fair test I came up with a test.  I will search each of these sites for the word “Manchester”.  I chose this search term for a couple of reasons.

Manchester is a city in the North of England.  It has two major football clubs (City and United) who both played English Premier League games on the day of the search.  “Manchester” also appears in company names and person names.  This gives us quite a range of data that might possibly be returned for the search term, allowing a fair, balanced opinion of the results to be reached.  In particular, the term “Manchester” presents a certain challenge to search engines that attempt some form of semantic analysis of the term.  By this I’m referring to the sort of technique Google applies to certain searches, where it provides data to the searcher which is relevant but not necessarily part of the results set (e.g. search Google for “Weather in Manchester” and above any results Google will tell you what the weather is like in the city of Manchester.  It does this because it has semantically analysed the search term and determined that you want to know what the weather is like in the location “Manchester”).  Will the search functions attempt a semantic analysis of the term or will they perform a “dumb” text match?

So let’s go through each site one-by-one.

The Guardian

The Guardian provides numerous options for sorting and filtering search results.

The Guardian search did appear to perform some semantic analysis and displayed links to the two football clubs as the first two results.  The third result was for the Manchester International Festival.  It’s a promising start, and given the fairly generic search it makes sense to provide generic information first.

It seems that following these first three results are general text-match results from the various different categories.  Handily, there’s the option to filter results by category, date and change their order.  This is particularly useful as the remainder of the results don’t seem particularly well considered.

40% of the results are for the two football clubs, and only 1 is a local result

There are 10 results, not including the first three (which I feel are separate, and treated differently).  Out of these 40% (4 results) are relating to the two football clubs whilst only 10% (1 result) are what I would consider a local result (it was relating to an exhibition being held in Manchester).  The remainder are general news results that just happen to mention the word “Manchester”.

Somewhat baffling is the absence of colour cues on the search page.  Despite the remainder of the site using colours to identify different types of content (a practice I praised earlier), these colours are absent from these results.

If I were searching for the Football Clubs: I would be pleased.  The results themselves aren’t particularly good, today’s results are bizarrely absent for example, but the links provided right at the top of the results are very handy and would no doubt lead me to the information I wanted.  However, if I wanted to see the results at a glance it would require additional clicks which some might deem unnecessary.

If i were searching for local news: I would be disappointed.  Only one result on the first page contains any news that’s actually local to the area.  performing a regular search on this site for news in a particular area does not appear to be an efficient way to keep up with the news.

The Daily Mail

Similarly to The Guardian, The Daily Mail’s results offer numerous ways to filter, sort and refine the results.  I would hazard a guess that if a usability analysis were performed on these search results the “Sort By:  Most Recent” option would be used fairly often.  The results are ordered by “Relevance” by default, but the relevance seems to be calculated based on some sort of algorithm that doesn’t consider timeliness as a factor.  Rather, it must use something like the number of times a term is mentioned, or something similar, as a key attribute for sorting.  Hence, on the first page there are numerous articles about the Manchester Derbys (Manchester United against Manchester City) that occured earlier this year – presumably because the word “Manchester” gets numerous mentions.

This fails to consider that the date of the article is a key attribute when considering relevance when the domain you are searching is related to news.  Some of the news that gets returned is so old, I would hesitate to call it relevant at all to a search on a news site.

The results page features thumbnails, brief descriptions and colour coding.

I criticised The Guardian’s results for not carrying through the colour cues found elsewhere on the site.  This is where The Daily Mail gets it right.  Each result is accompanied by a thumbnail image (if available) along with a colour-coded label telling the user which category the result belongs to as well as a small indicator which displays the type of content (e.g. article, video).

The vast majority of results (85%) relate to the two football clubs

The first result in my search is a review of Manchester as a travel destination, which is interesting in itself.  For a news website to serve an article such as this as the first result, as opposed to any actual news, says much about the algorithm the site uses to prioritise stories.  It clearly doesn’t favour news items.

It does, however, appear to favour sports stories.  A whopping 85% of the first page’s results are related to the two football clubs.  Unfortunately, even if I were looking for news on either club I would be out of luck, as the most recent article is from the 29th of January, an age ago in sporting terms.

If I were searching for the Football Clubs: Whilst undoubtedly there is a heft of results to appease me, they simply aren’t up to date.  There’s no sign of today’s results and the search function hasn’t given me a link to a page covering specifically either club, even though I know such a page exists and can be reached from elsewhere.

If I were searching for local news: This also suffers from the timeliness issue.  There is local news here, but it’s very old.  For example, one of the results refers to the possible building of a “super casino” in Manchester, a plan that’s since been cancelled.  This result would be forgivable, were it not so high in the results (5th!).

Switching the order to show the most recent results, rather than the completely misjudged “most relevant”, favours sports results so heavily (18 out of 20 results are for sport) that any local news is completely drowned out.

The Times

No search results are visible above the fold on my browser

The Times’ search results page loses points with me immediately for not actually showing any results above the fold (i.e. without scrolling the page down, I can’t seen any results).  I may be on a relatively small screen, but it’s the only site which takes this approach.  The image to the right demonstrates what I see upon the page loading.

Having said that, the bottom item on the page, under “Times Recommends” is related to my search term.  It points to an external site (which is branded to appear as if it’s on the Times’ main site) and provides a summary of a company.  This is the search function identifying the company name as partially matching my search term and giving me a result.  The line immediately below the fold points to a page for “Manchester United”.  There is an odd quirk in the results.  The search function has identified, and given a link to the Manchester United page but not the Manchester City page, yet the first three results all relate to Manchester City.

The Times provides a list of keywords to assist the user in narrowing down the search results. Some are helpful, some are not.

Options are provided for filtering the results and for re-ordering them.  Curiously there’s also an option to search in the “archive”, but no explanation is given as to what this actually means, rendering it useless in any practical sense (at what point does an article enter the archive?  Is it still archived if it’s popular? Can I search archived and non-archived articles together?).

All the results were related to sport.

Following the trend set by The Daily Mail, the results are heavily weighted in favour of sporting  news and also fairly out of date.  Once again this comes down to the default sort order of relevance, and the failure of the designers to understand what’s actually relevant to people searching the site.  It’s highly unlikely to the point of being ridiculous that the result I think, as a user, as most relevant to my search for “Manchester” is the result of a football match played a fortnight ago.

And when I say “heavily weighted”, I really mean heavily weighted.  Every single one of the results were relating to sport, and every single one was out of date.

If I were searching for the Football Clubs: Yes, there were a lot of results for the clubs, Manchester City especially, they were all out of date.  Again, none of today’s results were shown.  There were also no links to generic club pages, even though they exist.

If I were searching for local news: Hugely disappointing.  There is news relating to the Manchester area on the site, I’ve seen it, but the search function doesn’t seem capable of finding it and presenting it to the user in an effective manner.

The Sun

The Sun’s search mechanism differs from the other sites as it is branded as being performed, or at least enhanced, by a third party.  In this case Google.  I’m not clear what this means, as the results don’t share any visual similarities with Google’s normal results.  The results also differ to those seen by doing a “site:thesun.co.uk manchester” search on google.co.uk.

Unlike The Times and The Daily Mail results, The Sun’s are ordered by date by default.  Does this provide any real benefit?  Possibly.  Unfortunately it’s hard to measure any possible benefit as the latest articles appear to be missing from the results.  For example, there are results covering the build-up to today’s football matches but not any match reports or even the results.

The results page's height is dictated by the uselessly long list of categories. (click to enlarge)

There are some usability issues with the search results as well.  Like The Times, The Sun provides some categories to assist the user with refining their search.  However this list is very very long.  This causes two problems.  The first being that the sheer number of options reduces the usefulness of this feature fairly dramatically.  I count 99 categories, some of which seem wholly unrelated to the search term.  Additionally, some that are highly related to the search term, e.g. Manchester United, have very few results (“Manchester United” appears to have only 3 results.  In contrast “Scottish News” has 93).  This points to a fairly fundamental failure with either the categorisation system, the search system or the content cataloguing guidelines.  In short, extremely poor Information Architecture.

The other problem created by this list is that there’s a very large gap between the bottom of the search results and the links for moving on to the next page.  I’ve labelled this the “Void of Uncertainty” on the image to the right.  On my, allbeit smallish, monitor, I can’t see the links pointing to the next page at all when I’ve viewing the last search result.  The white space is the height of my browser’s viewport.  I would imagine many users get lost at the bottom of the first page of results, believing wrongly that there are no more (I’d love to see usage statistics for this results page, I bet they’d be very telling).

Nine out of ten of the results are to do with sport

By this point, it won’t be any surprise to learn that the results are sport-heavy.  Nine out of the ten results are to do with sport.  The odd one out is actually a bit of celebrity gossip, which I’ve classified as “local” because it occurred in the area, but it’s a bit of a stretch if I’m honest.

If I were searching for the Football Clubs: In terms of actual results, probably the best of the bunch so far.  There’s still no sign of today’s results on the first page, but at least the articles are more up-to-date than the others.  It would greatly benefit from having links to the pages for the relevant clubs placed more prominently though.

If I were searching for local news: Nothing of use, really.

Search Takeaway

If I’m honest, I found the results of this little experiment a little depressing.  It seems as if a minimal amount of thought has gone into designing the search functions on these sites.  They’ve looked at other search functions and produced a tick-box feature list that they’ve then implemented.

Unfortunately it appears they’ve failed to correctly identify and understand the context of the information on their own sites.  They certainly don’t appear to understand what makes an article “relevant”, and that belies a certain lack of research and thought.  As I mentioned earlier, if they think the most relevant result for a user searching the term “Manchester” today is the result from a football match that finished a few weeks ago, they are severely misguided.

The search functions also seem unable to recognise the best landing pages to send users to.  As I alluded to in the introduction to this section, the term “Manchester” presented the opportunity to the sites to understand the search and direct me to specialised landing pages for topics like Manchester United and Manchester the location.  This rarely happened.

The search term did present a challenge though.  If the sites weighted their results purely based on chronology, they would only be showing sports results on a day like today.  Therefore, a touch of craft and guile is required when ordering them for the user.  What I found really odd is that almost all the sites did have a heavy sport weighting, but the results just weren’t up to date.  The curse of irrelevance striking again.

There are a few consistent options that seem to reappear between sites.  For example, most paper sites cover a number of publications.  Each site offers the ability to narrow down the results by publication.  This feature would only be of use in two circumstances.  Where a user had read something in a particular paper and then sought it online or where the publications offered different types of articles, in which case the filter acts as a further category filter.  I don’t think either situation is particularly likely.  The most egregious examples of these useless separations were where the search function distinguished between the website and the paper (The Guardian or guardian.co.uk, The Times or The Times Online? What’s the difference to me,  a normal user?).

The best performer in terms of search results was The Guardian.  The results were ordered by date rather than some ineffective relevance by default, which left them sport-heavy, but it identified some appropriate landing pages for me.  It also suggested some refinements in a more natural way than the other sites (although in the case of my search term, they weren’t particularly appropriate).

Conclusion

I set out to seek inspiration and best practice for a WordPress theme I’m working on, and I found just that.  Some of these sites have some really nice touches, whilst others have taught me valuable lessons on how not to do things.

It’s unfortunate that in many ways we seem to be in the same position we were ten years ago with certain aspects of these sites (e.g. search), and I’d have to question how much research had gone in to each design before hand.

For my money the best sites are The Times and The Guardian.  I like their aesthetics, their readability and their information architecture, and I’ll attempt to build my theme in a similar vein.  I’m also tempted to dig a little further into these sites to extract more information on certain aspects, like article design and homepage design, rather than the high level review I’ve performed here.  I think it might also be an interesting and worthwhile exercise to compare the paper’s online presence to their publication.

What’s your favourite newspaper, and what makes it so good?  Do you use any of the sites mentioned in this article?  if so, what do you think?  Let us know in the comments.