Designing a setting for the torrent of content that passes daily through a news website is a challenge unlike any other. 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 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
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
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.
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.