Dochula Pass, Bhutan

Over the past 24 hours I’ve been exploring with interest the localization of the Flickr UI.

One difference you’ll notice, if you switch to a language other than English, is that the icons above a photo such as on this page have no text in them.

I checked with Flickr staff, and they confirmed that this is because of the difficulty of squeezing in the translated text in the space available. A classic localization issue, and one that developers and designers should always consider when designing the UI.

For example, here’s the relevant part of the English UI:

Picture of the English version, with text embedded in graphics.

and here is what it looks like when using the Spanish (or indeed any other) UI:

Picture of the Spanish version with only icons, no text.

The text has been dropped in favour of just icons. Note, however, how the text appears in the tooltips that pop up as you mouse over the icons.

This can be an effective way of addressing the problems of text expansion during translation, as long as the icons are understandable memorable and free from cultural bias or offense. Using the tooltips to clarify the meaning is useful too. I think these icons work well, and I’d actually like the Flickr folks to make the English version look like this, too. It detracts less from the photos, to my mind.

Here’s what it may have looked like if Flickr had done the Portuguese in the same way as the English:

Picture of a hypothetical Portuguese version with text in the graphics.

There are a number of problems here. The text is quite dense, it overshoots the width of the photo (there are actually still two letters missing on the right), and it is quite hard to see the accented characters. The text would have to be in a much bigger font to support the complexity of the characters in Chinese and Korean (and of course many other future languages).

Of course, in many situations where text appears in graphics the available width for the text is seriously fixed, and usually within a space that just about fits the English (if that’s the source).

Text will usually expand when translating from English, in particular. This expansion can be particularly pronounced for short pieces of text like icon labels.

So the moral of this story: Think several times before using text in graphics, and in particular icons. If you need to localise your page later, you could have problems. Better just avoid it from the start if you can.

That’s called internationalization 😉

View blog reactions

>> Get my slides !

The long-awaited @media conference is finally over. It went ok, I thought. I’ve been looking forward to carrying the i18n gospel to the heathens of the design and development community. 😉

It was great to have a single track in San Fran. Of course, given that there were two tracks in London, my audience there wasn’t huge – though I’m guessing that about one third of the 700-odd attendees came, which isn’t too bad – especially since I was up against Dan Cederholm (even I wanted to see Dan again). It’s always frustrating that people don’t know how much they’d find talks on i18n useful until they have accidentally been to one.

Anyway, I got a lot out of the other excellent conference talks and enjoyed meeting or better getting to know many new people. I’m looking forward to next year already. It will be different, however, and probably a little quieter, given that Molly Holzschlag announced that she was leaving the Web Conference Circuit, and Joe Clark announced at the very end of the conference that he was retiring (‘pretty much’) from accessibility. Good luck to them both.

As usual, there are lots of photos.

About the presentation

Check out slide 77 for a list of practical takeaways from the presentation.

The presentation was not designed to give you a thorough overview of potential internationalization and localization issues – we would need much longer for that. It aims to provide you with a few practical takeaways, but more importantly it aims to get you thinking about what internationalization is all about – to take you out of your comfort zone, and help you realize that if you want your content to wow people outside your own culture and language, you need to build in certain flexibilities and adopt certain approaches during the design and development – not as an afterthought. Otherwise you are likely to be creating substantial barriers for worldwide use.

The presentation also aims to show that, although using Unicode is an extremely good start to making your stuff world-ready, using a Unicode encoding such as UTF-8 throughout your content, scripts and databases is only a start. You need to worry about whether translators will be able to adapt your stuff linguistically, but you also need to also consider whether graphics and design are going to be culturally appropriate or can be adapted, and whether your approaches and methodologies fit with those of your target users.

View blog reactions

Wagha border closing ceremony
Flickr photostream.

I returned from Lahore, Pakistan recently, where I delivered a keynote speech at the Softech event, and a 2 hour technical talk. I was taken out several times to view the sites, for which many thanks to the organisers and students.

We had some worries when the Chief Justice brought his protest against President Musharraf to Lahore. I had to move from my hotel near the city centre, so that I could be sure I would be able to move freely between the hotel and the university. And for a while we drove around with an armed personal bodyguard in tow. Luckily, there was none of the violence that took place in Karachi just afterwards. Otherwise, I found it a fascinating, if rather polluted, place.

There are 5 new sets of photos:

  • Lahore streets Photos of people about their business in the city.
  • Wazir Khan Mosque A beautiful, colourful mosque, made even more so by the warm late afternoon sun.
  • Lahore Fort Known locally referred to as Shahi Qila, there are indications that there has been a building here for at least a thousand years. The current construction is several hundred years old.
  • Badshahi Mosque Opposite the fort and built in 1673 by the Mughal Emperor Aurangzeb, this is one of the city’s best known landmarks, and a major tourist attraction. It’s easy to see why. I really liked it.
  • Wagha Border Ceremony At Wagha we saw an extraordinary spectacle. Every morning and night there is a ceremony when the border between India and Pakistan is opened and closed. The soldiers make choreographed, aggressive movements and the crowds that gather to watch shout patriotic slogans towards the Indian side. It’s an extraordinary sight, but frankly rather unsettling. Even though most of the people present seemed to enjoy themselves, it can’t be a good way to improve international tolerance and cooperation. The photos tell the story.