Creating a great user experience for the whole world
Post categories: Ö÷²¥´óÐã World Service
| 12:29 UK time, Thursday, 5 February 2009
If you have been following the Ö÷²¥´óÐã'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 Ö÷²¥´óÐã visual language mentioned in Richard Titus's post, a move which began with Ö÷²¥´óÐã's homepage.
The World Service followed suit in October with the relaunch of in the new format and this week with the launch of Ö÷²¥´óÐã 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 Ö÷²¥´óÐã'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 "".
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 Ö÷²¥´óÐã principles of usability, accessibility, readability and simple common sense. All of them respect the Ö÷²¥´óÐã 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, Ö÷²¥´óÐã World Service Future Media.
Comment number 1.
At 5th Feb 2009, lucas42 wrote: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.
Complain about this comment (Comment number 1)
Comment number 2.
At 5th Feb 2009, Chris_huh wrote: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.
Complain about this comment (Comment number 2)
Comment number 3.
At 5th Feb 2009, Briantist wrote: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?
Complain about this comment (Comment number 3)
Comment number 4.
At 5th Feb 2009, lucas42 wrote: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.
Complain about this comment (Comment number 4)
Comment number 5.
At 5th Feb 2009, Hymagumba wrote:Lucas42
Might you suggest how the front page of Ö÷²¥´óÐã 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.
Complain about this comment (Comment number 5)
Comment number 6.
At 6th Feb 2009, lucas42 wrote: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 Ö÷²¥´óÐã's site has a huge range of different visitors, it needs to be flexible to accommodate everyone.
Complain about this comment (Comment number 6)
Comment number 7.
At 6th Feb 2009, Tiggs wrote: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.
Complain about this comment (Comment number 7)
Comment number 8.
At 6th Feb 2009, jwfrosty wrote: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?
Complain about this comment (Comment number 8)
Comment number 9.
At 6th Feb 2009, bigsammyjoseph wrote:Fixed width sites are better for article-based sites - like most of the Ö÷²¥´óÐã 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?
Complain about this comment (Comment number 9)
Comment number 10.
At 9th Feb 2009, TammyGur wrote: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 Ö÷²¥´óÐã 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 Ö÷²¥´óÐã.
Tammy
Complain about this comment (Comment number 10)
Comment number 11.
At 10th Feb 2009, eighty-eight wrote: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 Ö÷²¥´óÐã 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 Ö÷²¥´óÐã can justify putting animated ads on its site.
Complain about this comment (Comment number 11)