³ÉÈËÂÛ̳ World Service Language Websites: user experience and typography
The ³ÉÈËÂÛ̳ Chinese website was recently relaunched in line with ³ÉÈËÂÛ̳'s new Global Experience Language (GEL).
Following the ³ÉÈËÂÛ̳ Arabic, ³ÉÈËÂÛ̳ Russian and ³ÉÈËÂÛ̳ Persian relaunches earlier this year, this further adds to the growing typographic richness of GEL, as well as expanding on GEL's use in the news domain within the ³ÉÈËÂÛ̳.
I'm the Senior Creative Director for World Service websites.
I'd like to share with you some of the user experience thinking behind the project, and give an overview of one of the most challenging aspects of the project: typography.
Since the GEL redesign of the ³ÉÈËÂÛ̳ News site in July 2010 we have been working to align the user experience of the family of news sites around the ³ÉÈËÂÛ̳.
³ÉÈËÂÛ̳ World Service offers news in 27 different languages including English. This amounts to 27 siblings to the ³ÉÈËÂÛ̳ News site in varying shapes and sizes in 27 different languages, using nine different scripts.
Given the diverse landscapes these sites operate in - in terms of editorial offer, audience expectations, technical infrastructure in target markets and typography, to name but a few - the goal of aligning user experience has been an interesting challenge.
Context
Unlike most localisation projects, World Service language sites are not direct translations of each other (or the English News site), on the contrary, their editorial offers are tailored to their target markets.
In our previous redesign, when we moved World Service language sites from 800px to 1024px wide templates, our approach was towards a much more tailored UX solution for each site that fitted their editorial offer and the expectations of their respective audiences for a news site.
This tailored approach produced good results for those of our audiences who don't read English and whose only exposure to the ³ÉÈËÂÛ̳ site is on the news site in their own language.
However, it had an undesirable effect of creating a user experience barrier between these sites - especially for those in our audiences who switch between the English News site and another one in their first or second language who had to learn different conventions to find their ways around these sites.
With GEL, we have worked to bridge this gap, while still catering for the different editorial offers of each site. The language sites we have relaunched in GEL now share the same set of design patterns, user journey principles and page layout approaches as the ³ÉÈËÂÛ̳ News site in English but with adjustments in accordance with audience expectations and the editorial offer of each site.
Design pattern adjustments:
A good example to explain the thinking that went into the kinds of adjustments we've made, is the carousel.
As well as the obvious changes like the Persian and Arabic carousels moving right-to-left inline with the reading direction of these languages, we changed the highlight colour to a vibrant blue to help the contrast between the text and the background. Especially in languages like Chinese, which has very complex glyphs, the blue provides a much better contrast against the text.
We've also opted for numbers instead of the square dots that are used on the English News site to denote the number of panes that the carousel holds. This was to make the existence of other panes much more obvious especially for those markets where the carousel design pattern is not as recognised.
Another pattern that we use across the sites, is to reveal the duration of audio/video content on roll-over to give an idea to our users of the kind of time/download-size commitment they would be making by clicking on these links. This is especially important for parts of the world where connection speeds may be slow.
New design patterns
Working with our CMS development team, we have also introduced some additional design patterns and user journeys, to answer requirements informed by the worldwide markets we cater for:
Rolling news
Even though a large number of stories are covered each day, our news front pages are editorially driven to reflect the most important stories of the day more prominently. User feedback, especially from frequent visitors to the site, revealed that this caused the site to be perceived not as up-to-date as it actually is.
We now distinguish top stories that have been published or updated in the last hour by denoting the time since the update in minutes.
We also have a prominent "rolling news" module on some of our sites that lists news stories in a chronological order and updates automatically as and when new stories are published.
Topics:
³ÉÈËÂÛ̳ journalists have been able to tag news stories with a set of controlled vocabulary for some time now. We then generate aggregation pages which collect similarly tagged stories together.
This system provides granular cuts of the content on our sites to cater for our audiences with niche interests, as well as providing a country specific news aggregation that users can bookmark or subscribe to. This is especially valuable to users of sites like ³ÉÈËÂÛ̳ Arabic and ³ÉÈËÂÛ̳ Mundo, which cover many countries.
We now have a number of ways in to these aggregation pages:
- index level, where journalists have the option to expose these topics.
- story level, where all associated tags are listed inside the body of the story
- aggregation and index pages, where we also show a list of the most recently updated topics grouped into subjects/people/places/organisations - giving a good overview of the news zeitgeist.
Typography
GEL introduces the most ambitious typographic guidelines for the ³ÉÈËÂÛ̳ to date.
Until GEL, our typographic specification did not go beyond naming a commonly available system font as the house style for bbc.co.uk. Beyond the strict implementation specifications, for example the baseline grid, GEL declares typography as one of its key building blocks.
The onus is back on typography to do its fair share of communicating the key principles behind GEL: Pioneering, Current, Modern British, Best, to name a few.
With the current state of typography on the web, this was a big undertaking even on sites using Latin script. Pulling this off in non-Latin scripts was an even bigger challenge.
There is very little anatomical difference between a very German typeface commonly in use today like DIN and a very British one like Gill Sans. Going back a few centuries to pre-typography times, would reveal the pronounced differences in calligraphic style between these cultures: See below samples of German Blackletter and Insular script that originated in Great Britain and Ireland.
Calligraphic tradition is very diverse in cultures that use the Arabic script also, and if anything, much stronger. Yet technologies developed to produce printed material (originally in Latin script) like typesetting and the typewriter have fallen short to appropriately support this very sophisticated script.
In Arabic script, most characters have a minimum of four shapes depending on their position within a word. There are also a vast array of contextual letterforms: that is when a character joins up with another particular character, they take yet another shape. You can imagine the support - or rather lack thereof - that a technology as unsophisticated as the typewriter can offer to a writing system as sophisticated as this. So one of the main drivers of the evolution of Arabic typography was the constraints imposed by technology.
As a result, despite its diversity in calligraphic tradition, Arabic typography especially on the web is even more constrained than Latin: there are only five commonly available system fonts that support Arabic text and four of them have the same set of glyphs for Arabic characters. So as far as Arabic typography is concerned, they are identical!
Yet, especially in the case of Urdu, the need for this diversity is so acute, and catering for it is so challenging that, the ³ÉÈËÂÛ̳ Urdu site is the only news site in Urdu that actually uses HTML to display text. Other news websites in Urdu publish their news story pages as GIF images generated using desktop publishing software specially developed to accommodate the typographic styles the Urdu readers are accustomed to.
Since this approach has major issues, including accessibility and SEO to name just two, until now, on the ³ÉÈËÂÛ̳ Urdu site we have tried to address this by offering a custom designed font as a free download for users to install on their systems. Even this has its issues as a considerable section of our users don't have the means to install fonts on their systems.
It wouldn't have been possible to implement GEL without addressing this major challenge.
Our strategy was to free ourselves from the constraints of system fonts by embedding a custom web font on our sites. We believe this is the first time this has been done on a major news site in English or one of these languages.
We have also aimed to meet the varied cultural needs of each language by further customising the font for each site.
Our primary criteria for selecting the font were the need for:
- legibility at body text sizes
- a good presence at headline sizes to achieve the typographic hierarchy set out in GEL
- contemporary, fresh aesthetics, again, in fitting with GEL's philosophy
- a good base to customise for the different languages.
At the end of our search we decided to use Nassim, a font designed by Titus Nemeth in 2007. The many prestigious design awards that Nassim has received are testaments to its fresh and contemporary design, and with its range of weights enabled us to achieve the typographic hierarchy we required.
We worked very closely with our colleagues in the respective language services to identify individual and contextual letterforms that needed to be anatomically and/or stylistically different to be more easily recognisable by their audiences. And Titus Nemeth incorporated these requirements into customised editions of Nassim for ³ÉÈËÂÛ̳ Arabic and ³ÉÈËÂÛ̳ Persian.
These fonts were painstakingly hinted to improve their legibility on screen. The hinting process is humorously described as an exercise akin to "drawing" letter shapes on tiles on a bathroom wall. When the letter shapes in question are as sophisticated and varied as those in Arabic, it is an even bigger challenge.
Titus Nemeth paints .
In parallel, we produced very detailed design mark-up using a formula we developed to help accurate vertical positioning of text elements against the GEL's baseline grid, hence produce a harmonious vertical rhythm to our pages. Hats off to our client-side developer colleagues who implemented the designs meticulously.
The result is a solution for a non-Latin script as sophisticated as Arabic, which not only fits with GEL in spirit, but is also an impressive technical implementation of it.
We hope that this is a first step towards a richer typographic experience on the web, especially in the news domain. It has been a very interesting journey for all that were involved. We have learnt a lot and feel we have made good progress towards being able to rely on typography to do its fair share of heavy lifting on the web, as it has been doing on design projects on other media for centuries.
Future
In the space of six months, we have relaunched nine of the language sites; ³ÉÈËÂÛ̳ Gahuza, ³ÉÈËÂÛ̳ Turkish, ³ÉÈËÂÛ̳ Indonesia, ³ÉÈËÂÛ̳ Afrique, ³ÉÈËÂÛ̳ Arabic, ³ÉÈËÂÛ̳ Russian, ³ÉÈËÂÛ̳ Mundo, ³ÉÈËÂÛ̳ Persian, and ³ÉÈËÂÛ̳ Chinese, covering nine languages, four different scripts and two reading directions, targeting vast geographies around the world from Asia to Europe, Africa to Latin America, the Middle East to Oceania.
The fun isn't over yet: we have 18 more language sites that require five other scripts to be worked on and we are working with colleagues around the ³ÉÈËÂÛ̳ to localize pan-³ÉÈËÂÛ̳ products like the Embedded Media Player, and systems like ³ÉÈËÂÛ̳ ID and commenting tools to ensure they work seamlessly with the language sites.
I hope you have enjoyed this post and I'll be updating you about some of these developments in the future.
Kutlu Canlioglu is Senior Creative Director, UX&D, ³ÉÈËÂÛ̳ Future Media
Comment number 1.
At 27th May 2011, Peter Russell wrote:That sounds like amazing work. Thankyou for the very detailed write up.
Complain about this comment (Comment number 1)
Comment number 2.
At 28th May 2011, Greg Tyler wrote:Excellent work. A very interesting post! Good luck with future typographic challenges.
Complain about this comment (Comment number 2)
Comment number 3.
At 31st May 2011, Joe Halliday wrote:Brilliant post - I've always found the technical challenges of working with different scripts to be very interesting. I hadn't realised that the use of HTML for Urdu was so rare! Thanks.
Complain about this comment (Comment number 3)
Comment number 4.
At 5th Jun 2011, David Farsley wrote:An intriguing insight into what should really be a very drab subject matter. I have a passing interest in typography, but as someone who has had to project manage web site builds not only in multiple languages (which is problematic enough in its own right), but also across languages with non-latin characters (one of which, I genuinely hadn't heard of before being tasked with the job) I can only imagine the challenge for an institution like the ³ÉÈËÂÛ̳.
I'm a control freak, so having to rely on someone else to say "yes, this is fine" without any useful way of being able to double check was a nightmare - my Mandarin is a little rusty, you see. Good luck with the other 18 languages - I don't envy you one iota! :)
Regards
David - [Unsuitable/Broken URL removed by Moderator]
Complain about this comment (Comment number 4)
Comment number 5.
At 20th Jun 2011, Paul D Hunt wrote:I'm running Windows XP and using Chrome as my browser and I cannot get Chrome to display the ³ÉÈËÂÛ̳ Nassim font when viewing the Arabic news pages. Do you have any information on this issue and how to resolve it?
Thanks.
Paul
Complain about this comment (Comment number 5)
Comment number 6.
At 27th Jun 2011, Kutlu Canlioglu wrote:Hi Paul,
Chrome is unable to handle font embedding for complex scripts at this stage.
So unfortunately, we've had to disable the font embedding for this browser.
I understand a fix is in the backlog of Chrome's development team, and we will enable font embedding when there is a stable fix in place in the future releases of the browser.
You can display Nassim in Firefox 3.6 and upwards, or IE5 and upwards.
I hope this helps...
Kutlu.
Complain about this comment (Comment number 6)
Comment number 7.
At 4th Aug 2011, Spartacus wrote:I just wanted to add my thanks too, for possibly the first ³ÉÈËÂÛ̳ Blog post I've ever read that was both interesting and informative. (At least, to me...) Keep up the good work!
Complain about this comment (Comment number 7)