« Previous | Main | Next »

Creating a great user experience for the whole world

Post categories:

Tammy Gur Tammy Gur | 12:29 UK time, Thursday, 5 February 2009

If you have been following the BBC's web services you'll have noticed the sites transform their design over the course of the last year. The sites have been moving from a narrow design to a contemporary wide-screen one, 1024 pixels wide. This move is part of the new pan BBC visual language mentioned in Richard Titus's post, a move which began with BBC's homepage.

The World Service followed suit in October with the relaunch of BBC Persian in the new format and this week with the launch of BBC Brasil.

Over the course of 2009, we will continue to re- launch the portfolio of sites; covering 33 languages, in doing so we will and have been facing some unique challenges. These challenges are subject of this post.

Change comes to the World Service online

The move to 1024 for the World Service sites could have been a fairly mechanical job of applying the BBC's new-look style guidelines, a new 'lick of paint'. Could have, but wasn't. Instead we took the opportunity to rethink our entire offering, both editorially and technically, to make it more appropriate to our many different markets. In other words, to take a step further in our ongoing journey of "localisation".

The look and feel employed currently across the World Service language websites, with the recent exception of Persian and Brazil, follow the model of "one size fits all". That one size is the (pre-1024) English news site. It ensured that the World Service offering was efficient in that it offered a consistent user experience and adhered to the principles of usability. I'm referring to those basic principles that apply to users regardless of their geographical location; the need to master the same techniques for navigation, scanning a page for what is most interesting, and following what is sometimes referred to as "information scent".

However, "one-size-fits-all" doesn't offer much flexibility to adapt to differing user behaviours, preferences and cultural differences. Not to mention the different types and standards of equipment that are commonly used by ordinary people in all those places. Remember: 33 different languages, 33 different markets as far apart as India and Brazil. Each of which hosts numerous local services that are (by definition) designed for the people there. How could a single-design really compete in such a variety of circumstances?

A Balancing act

Earlier I described localisation as an 'ongoing' journey. That's because editorially, the World Service language sites are already targeting their particular market. It may be a surprise for some to learn that the sites are not mere translations of stories written in English. Yes, the non-English sites do take and re-present the most relevant of the English-language content, but they also generate content specifically for the country and language groups they serve. The language services that produce the sites, are staffed by journalists who speak and write in the target language, and who know the target markets profoundly.

So how did the World Service team approach the targeting of a local market within the discipline of design and user experience as well as editorial content? And how can we resolve the tension between this and the need to operate strictly within the principles of a global brand?

There are four main aspects of the local markets we focused on to inform this work:

- The script: Latin-style scripts familiar to English readers impose a certain kind of design. Other scripts, including ones reading from right to left, using characters whose differentiation can be more subtle, suggest a different kind of design. In this area we looked at how to create emphasis, a flow of reading that is easy on the eye as well as how to balance the use of space within the page imposed by each script. These aspects impact the overall page layout, legibility and the treatment of the brand. They require bespoke treatment for each script.

- Editorial design: the layout of the content was looked at in order to reflect not only a hierarchy of importance within the editorial content that is unique to each site, but also the density of content on pages that is expected by users in the market. We also focused on the balance between images and text to denote types of content, as well flexibility in layout that would better reflect the dynamism of the news and the production turn around to support this pace.

- Navigation:The focus here was to explore and research the reorganizing of varying types of information within each site in order to create site structures and a navigation mechanism that enabled easy and clear routes into and across the content.

- Interaction design: Some patterns of behavior such as interacting with carousels or the features that allow users to 'take away' elements of content and ingest in their sites, are familiar in some parts of the world but are not as intuitively understood by users in other parts of the world.

We used a variety of methods to gain a better understanding of these aspects within each market. We carried out a competitor analysis; we did some extensive 'number crunching' to interpret usage statistics and qualitative surveys. And we also engaged with the users themselves. We initiated online forum discussions, where we asked for feedback about specific aspects of the site such as navigation, legibility, layout etc. We also organized user-testing laboratories to find out about the interaction and usability aspects of the sites.

And as all who have worked in user centred design know: we made our designs pass through multiple iterations, informed by these findings, until we felt we got it right.

The solution: uniform building blocks arranged in unique compositions

The result of our research is a palette of common elements: a layout grid, an approach to the chunking of text blocks, an approach to information architecture, a varying set of interactive structures. All of them follow BBC principles of usability, accessibility, readability and simple common sense. All of them respect the BBC brand. However the arrangement of those common content elements into compositions is, or will be, unique to every language service.

Designers now have the tools, namely a repository of building blocks using a coherent style and functionality to make the content work with the visual characteristics inherent in the script itself. With these building blocks they are able to fine-tune the overall design of a piece to its market. They also enable creating sites and additional services that take into account an optimal use of the equipment and connectivity that most of the people in the market actually have.

The Work is not done

The work on the redesign will continue to evolve, even once the sites have launched, informed by the fast moving changes of the web but also and most importantly by the invaluable user feedback that active users provide.

If you are one of those who have already contributed, thanks! Keep those comments coming in!

Tammy Gur is Head of Design, BBC World Service Future Media.

Comments

  • Comment number 1.

    Why does the bbc feel its necessary to use fixed width pages? When I'm at home, I use a fairly big screen and I don't like all the wasted space at the side of the page. But my laptop has a small screen and its annoying to have to use horizontal scrolling to see all the content. Its easy enough to cater for all screen sizes - just don't use fixed widths.

  • Comment number 2.

    lucas42 - Fixed width pages mean that the site will look the same on all computers so there will not be any formatting errors. If the page was to stretch then images would align incorrectly and other elements would displace themselves. Now that there is a wide variety of screen sizes (most notably widescreens) its just safer to use one width. And most screens these days are at least 1024 pixels wide.

  • Comment number 3.

    Really good work people, very impressed with the attention to detail.

    Any chance you could put the results of your findings about this localization out in some details, as it would be of great reference use for anyone wanting to do a really good multi-lingual site?

  • Comment number 4.

    Chris_huh - I don't see how having a site that looks the same on every computer is a necessity. Good formatting needn't rely on screen widths, it should be flexible. If an image ends up in the wrong place when the screen is resized, then theres a problem with the formatting of the image, not the width of the page.
    With the increasing popularity of browsing on phones and netbooks, theres no such thing as a "safe width". For example, 1024px gives me too much blank space on my desktop, but horizontal scrolling on my laptop.

  • Comment number 5.

    Lucas42

    Might you suggest how the front page of BBC News should resize to a 1800px wide screen? I can only see silly looking long lines of text next the photos rather than a nicely shaped box being the result.

    It's worth noting that zeldman, mezzoblue nor alistapart (some of the largest standards design advocate sites) are all fixed width.

  • Comment number 6.

    Hymagumba

    Surely the "nicely shaped boxes" could be kept, but on bigger screens have more boxes per line? Obviously this wouldn't work with the current formatting, as they're still using tables for layout and tables are very inflexible.

    I looked at the sites you mentioned - they're all fixed width, but they can't agree on a single width. This shows theres no single width thats perfect for everything. And as the BBC's site has a huge range of different visitors, it needs to be flexible to accommodate everyone.

  • Comment number 7.

    Fixed-width pages are, basically, wrong. Especially nowadays, with people using anything form 9" netbooks to 22" widescreen behemoths.

    Websites really ought to be fluid, so that they don't scrool too much on small screens or (like on my PC now) give up an entire third of the browser's window to completely empty space.

    Fixed-width pages are the worst of both worlds. As they look awful across most common screen sizes.

  • Comment number 8.

    I personally love fixed-width sites - I generally find them much more readable. When viewing fluid sites on my laptop with a resolution of 1440x900, I have to resize my browser window so that the site is a more sensible width than my full screen size.

    Aren't shorter lines generally considered easier to read?

  • Comment number 9.

    Fixed width sites are better for article-based sites - like most of the BBC sites. It's a general rule that lines with more than 15 words is difficult to read - the same reason why newspapers are columned.

    It's a practice that's lasted hundreds of years - why change that now?

    The main problem with the UK news sites (not the new international sites) is it's table based layouts. Switching these to CSS would mean the sites would collapse better on smaller screens - like mobiles.

    Is there any plan to switch to CSS?

  • Comment number 10.

    Thanks for posting your comments, and the lively debate. It’s interesting that the decision to use fixed width has been the thing that got you talking. It is of course something that designers at the BBC are debating. There are those for and those against, but we do have the benefit of a highly reasoned set of guidelines that we work to, and those guidelines do put the Corporation in the fixed-width camp. This question is such a challenging one given the use of high resolution/wide screen monitors for PCs on the one and the increasing accessing of sites on small screen devices on the other. Personally I’ve never been convinced that the arrival of wider and wider screens means that users want wider and wider browser windows. Observing users and colleagues I’ve noticed how many people use a small window by choice, and let other applications remain visible while they work. Still, times change, and history hasn’t yet decided. There are too many really excellent designs in both formats, to be able to say one is better. The debate will go on, and it’s participation like yours that actually does get taken seriously. I’ll be taking your comments with me to future discussions in the BBC.

    Tammy

  • Comment number 11.

    Is the animated ad that I have just noticed at the bottom of the Radio 4 - Woman's Hour web page a part of the new design? Presumably there are others elsewhere on the BBC site.

    Please, get rid of these now. I will put up with a static ad, but given the way that animated ads distract you when you're reading a page, I don't see how the BBC can justify putting animated ads on its site.

 

More from this blog...

BBC iD

Sign in

BBC navigation

BBC © 2014 The BBC is not responsible for the content of external sites. Read more.

This page is best viewed in an up-to-date web browser with style sheets (CSS) enabled. While you will be able to view the content of this page in your current browser, you will not be able to get the full visual experience. Please consider upgrading your browser software or enabling style sheets (CSS) if you are able to do so.