User Experience and the Design of News at BBC World Service

Designing a setting for the torrent of content that passes daily through a news website is a challenge unlike any other.

Related posts:

At the BBC World Service we’ve got a user experience and design team which designs and develops news sites for the web and mobile devices in 27 languages, catering for audiences across world. In this article I will share some of our experiences with you.

A sample of The BBC World Service news sites. Clockwise: BBC Russian, BBC Arabic, BBC Chinese and BBC Brasil

The premise of digital news design

The digital news publishing cycle is too rapid for a bespoke design. Print designers create designs shaped by the news of that day. Online designers create an overall experience that is not specific to a particular item of news. The reason for this is the high frequency of change in the content. This means we design the site once, and the journalists populate the design with their content.

An example of bespoke layouts for daily news in print. Front page editions of the Israeli news paper ‘Yediot Achronot’ on the 26th, 27th and 28th of June 2011

Ultimately what the UX team produces is a palette of modules, and their associated behaviours. You could argue that this is no different to the design of most websites. That’s true, but what makes the difference is the sheer volume and variety of content types that can be displayed at any given time over the course of the day. Articles may appear as text only, or with images, with an image gallery, with video or audio. A big breaking news story is presented differently to a normal top story. And there may also be different editions to the front page – such as the weekend edition that differs in content and volume to that of the weekday. All potential displays are created and factored in as part of the design.

News site as a Bento Box

A traditional Bento box

I liken the design of a news site to that of the Japanese Bento box. There is a bounding tray and small dishes in a variety of shapes and sizes that can be arranged in different combinations. This is our site design. The food they hold is the changing news content. It is the harmony between the two, the box and the food, that determines the way we will experience this meal.

The food is the main attraction to the diner. But would it be so delectable if not presented with such finesse? To achieve this presentation the box designer has to understand the food (the content) and the diner’s needs and tastes (user behaviours).

Understanding the content – hierarchy, volume, tone

From the beginning of the design, we work hand-in-glove with the journalists. We familiarise ourselves with the various content areas, and ask editors to prioritize their importance. This yields a content hierarchy.

In addition we learn about the journalists’ production patterns to get a picture of the volume of content that will pass through the homepage during the day. For example how many top stories, how many regional, how many thematic. In most markets morning and lunchtime are peak consumption times and that’s when the team will be writing the most stories with the highest turnover.

Contact with the journalists helps us understand the tone, which we can echo in the design. Tone isn’t just the style of writing, it is also linked to the editorial agenda and user expectations and in the case of The BBC World Service, cultural differences.

The user research and competitor analysis that we’ve carried out over the years have exposed some interesting facts regarding our markets. For example we have found that in the Russian and Middle Eastern markets, the audience predominantly expects to see hard news of a serious nature. Whilst in the Brazilian market there is a strong appetite for the softer quirkier news. To reflect this, we balance carefully the density of information that is presented predominantly on the front pages of such sites. On the Russian site more ‘hard news’ headlines are surfaced in the first two folds of the page, on the Brazilian site the top folds are peppered with image galleries and ‘soft news stories’ from around the world. The nature and size of imagery along with the volume of text aid in achieving the overall perception of the nature of the content and reflecting the desired tone.

Understanding the user’s behaviours and tastes

News consumer behaviour tends to be described broadly in two ways. Users either skim or dig. Or they might alternate between the two, depending on mood and availability of time. In the morning before work a user might have little time to delve deep, whereas in the evening or during lunch-break that same user may have more time to read a full article, perhaps even a related item.

What qualities are appreciated, what tasks do users want to fulfil on a news site? Again here, statistical and user behaviour analysis tells us they like all of the following:

  • To read the latest headlines at a glance;
  • To see a rich variety of content;
  • To know that content is fresh;
  • To feel that the site is both relevant and familiar to them;
  • To be able to look for news stories around a particular theme e.g. technology;
  • To compare sources – seek many points of view about a particular news story;
  • To experience a clear and pleasant environment to read;
  • To believe that the news they are reading is delivered by a trusted source.

Delivering designs for the content and known behaviours

We have a palette of tools with which to create the Bento Box effect. Let’s look at some of them.

The grid
The backbone of any good site design is its grid. At the BBC there is a universal grid for all new sites. It is one of the components of the BBC’s recently-launched GEL (Global Experience Language). The grid is what helps create visual order. This grid is divided into 61×16 pixel vertical units to meet the BBC’s image and media player standard sizes. It can be split into two equally sized columns with a slightly wider third column (as shown below). The power of this particular BBC grid is in its ability to provide on the one hand the flexibility to present a wide variety of content, from entertainment through factual and all the way through to serious news. On the other hand it creates a visual uniformity that runs across all the BBC sites and articulates a single brand experience. Its additional remit is to accommodate standard ad size requirements.

BBC Global Experience Language grid showing two of the three grid combinations available

Clustering of information and labelling
In the news context we start of by assigning a place for higher orders of the content types as shown above. Next we get more granular in the distribution of the content types within the grid. It is based on the content prioritization that we understood from the editorial team. It is also informed by the user’s expectations, and where we want to match the patterns of competitors or express our unique offer to them.

Content hierarchy and grouping from the BBC Mundo news site

Each content group is assigned a label (excluding the top stories) that echoes the categories the site has to offer in the main navigation as well as some additional ones pertaining to the news of the day. On our sites the labels have a dual job of informing what an item or a group of items is about, and also serving as visual anchors throughout the page to enable scanning.

Example of Labelling for the thematic groupings on BBC Mundo and BBC Chinese

The combination of the layout on the grid, the treatment of content labels, spacing and imagery all create a certain rhythm on the page.

Structure – IA richness
There is a tension between the need to guide users quickly and efficiently to the specific content they want to find, and the need to expose the richness of our sites’ content. As an international provider we are faced with an additional problem: our news sites will almost always compete in a market in which there are dominant local news providers. So we need to think carefully about which and how many categories to surface, to make the site relevant to readers and to help them find content in a theme that interests them.

To explain this here’s a little user scenario: Maria wants to read about technology every day. She needs technology stories to be findable instinctively. Rodriguez wants to read any story about Hugo Chaves, wherever it may pop up. The structure should allow both to be satisfied at the same time.

For Maria, we have a set of top-level categories, such as “Technology”. The categories appear consistently in the same position, whether that is in navigation or somewhere on the main body of a page.

For Rodriguez we have a set of topics, such as “Chaves”. The topic can be appended to any story, in the same way that a tag can be appended to a story in a blog. So journalists are able to tag stories, but are limited to a controlled vocabulary unlike a blog – a controlled vocabulary that prevents sparseness of any particular topic, and also allows a governing editorial group to set the agenda.

So there is a mix between rigidity and fluidity in the composition of pages. The topic driven pages are automated whilst other pages like the homepage are ‘curated’ by the clustering of top-level categories into groups on a single page under broad themes like “Don’t Miss” OR “Features and Analysis”. This helps both wayfinding, and the surfacing of a more granular cut of themes to expose the full richness of the site: good for both Maria and Rodriguez.

Topic modules on the sites are used to expose a more granular categorization of the sites content

Typography
The most crucial part of a text heavy site is the way in which the type is treated. Technological advancement has made the control of type on the web possible like never before. The BBC’s GEL has embraced this opportunity with an ambitious set of guidelines that puts the role of typography back at the forefront of the design. Beyond decisions around font face and size, tight tracking and leading and the use of bold headers have all become part of the visual language of the sites. The employment of a horizontal baseline is used to aid with the alignment of elements and to control type setting. The attention to these details and their application is aimed at achieving a clearer stronger hierarchy and enhancing readability.

Because of the volume of information and the fact the our team works with 8 different scripts further work is done to apply it to the context of each of the news sites. Detailed work is carried out on font sizes and style to create a coherent hierarchy for headlines, short summaries, lists etc. Designers also do a meticulous job of working out tracking and leading for each of the scripts. These rules are then applied to each and every module and its many permutations: with different sized images, without an image, with related stories, and additional elements such as iconography for comments and denoting video etc. We build a full repository of modules containing every variant. (For additional details on the typography work we do see ‘BBC World Service Language Websites: user experience and typography‘)

Defining typographical hierarchy for the Burmese script

Sample of module types for the top story: with a video player and with text only

Timeliness
Time of publication is very important to news consumers. In fact many obsess over it. It contributes to a user’s opinion of the content’s credibility and relevance. In recognition of this we developed a component that we refer to internally as ‘Rolling News’. It is a module which functions like a news wire’s constant stream of headlines. It updates automatically, publishing headlines accompanied by time stamps. Clicking on a headline leads users to a short article describing the event. The module is positioned right at the top of the homepage along side the top stories of the day. It also appears on every article page.

Timeliness denoted via the ’Rolling News’ module

In addition we include time stamps on top stories for up to an hour from the moment they ‘hit’ the site.

Onward journeys
A high percentage of users enter the site through an inner article page, rather than via the homepage. For this reason we have dedicated real estate on every article page to bring out flagship content from the homepage and across the site, exposing the site’s breadth at every level. By doing so we encourage onward journeys. This approach is a recent idea. Previously, article pages had focused on exposing content that was deemed contextual to the article in question. The balancing act for designers is to retain a pleasant and readable environment whilst presenting a whole raft of additional site-wide offerings.

Article page as a mini homepage - the right hand column surfaces content from the homepage and across the site

All of this for one purpose…

In a news environment, there is ultimately one asset that the web designer has to enhance and protect. Credibility. News is all about telling a believable version of real life. A brand as well established as the BBC’s naturally goes a long way to distinguish its content from lesser-known, opinion-led publishers. But all brands are vulnerable to erosion if the presentation doesn’t do them justice. The painstaking work that goes into the BBC’s online output – the designer’s understanding of what its content really is, who its readers are, what flavours of content to mix, and the mastery of formal methods of presentation – is all part of the never-ending preparation and re-preparation of an enticing Bento box.

UXI Live 2011

Tammy Gur will be a keynote speaker at UXI Live 2011, the only UX conference in Israel, organized by UXI (User Experience Israel). It takes place between September 7th and 8th in Tel Aviv, Israel.

Tammy Gur

Tammy Gur is Senior Creative Director (Head of UX and design) at the BBC.

14 comments on this article

  1. Pingback: User Experience and the design… | BrettSinclair.net

  2. This is a really fascinating article, which I found even more interesting as it touches upon a subject that’s often overlooked when considering usability: how to cope with different type-faces and text conventions (e.g. left-to-right versus right-to-left).

    It’s all too easy to design a website and be seduced into a pixel-perfect layout when viewed in a ‘Western’ font, but if that site grows it might then need to be internationalised and as anyone who has tried to convert an English website into (say) Mandarin knows, it can be a very fiddly process indeed.

    On the subject of understanding users’ behaviours, do you do in-house user testing or use an external consultancy? I presume you don’t use any crowd-sourced user testing service such as Kupima or UserTesting given the scale but it’s certainly something worth considering for smaller websites (where in-house testing is impractical and external consultancies are too pricy). I’d be intrigued to hear more about the process you use.

    It’s not every day we get the chance to hear the ‘inside track’ on the UX of a huge and important website like the BBC so I’m glad to have discovered this article. Thank you!

  3. Just one word: congratulations (both for your work and for sharing it with us)

  4. Pingback: User Experience and the design of news at BBC World Service Johnny … | News Blogz

  5. Pingback: Putting people first » UX and the design of news at BBC World Service

  6. Pingback: e-cultuur weblog» Weblog Archief » UX and the design of news at BBC World Service

  7. Pingback: Les tweets de la semaine 2011-07-15 | BrettSinclair.net

  8. Pingback: Markup - the typeclear blog

  9. Pingback: User Experience and The Design of News at BBC World Service « UXasm

  10. Pingback: Как проектировали международный новостной портал для BBC News | Fresh: новости мира юзабилити

  11. Pingback: Twitted by persuadesign

  12. Pingback: » User Experience and the design of news at BBC World Service Johnny Holland – It’s all about interaction » Blog Archive - uxstream

  13. Darryl Hebbes on

    Just a minor gripe, I find the text size for your articles just a touch too small. I read a lot on the web and yours is one of the few sites I have to up the font size in Chrome.

    I am 41 years and have 20/20 vision.

  14. Pingback: Quora