Best Practice for designing UI for a multilingual site?

Question

I'm in charge of UI for a company that offers a brand monitoring and social media analytics for international clients. We currently offer the system in 3 different languages, but this is expected to grow.

I'm looking for some guidelines or heuristics on how best to design UI in circumstances where, for example, text string length might vary immensely from one language to the other. Any ideas? referrals?

Answer 1

I am not aware of any heuristics or best practices since there are different use cases depending upon the countries you are designing for. However this excellent article Global by Design : Creating a world-ready web design gives some valuable inputs:

• Look at the scope of designing a global template (except in unique cases) : A availability of a global template with sufficient customization options to change the color and font specifications will help in keeping a uniform look across all your sites and also ensure that users dont have to look around to find the same information (since the layout is structured in a similar manner). To quote from the above mentioned article :

Consider Eli Lilly. Years ago, its local offices managed uniquely designed sites. While there is nothing inherently wrong with every country having its own unique design, the collective costs of designing and maintaining all these designs is significant. Local resources are better spent on creating local content. A global design template frees up local offices to do just that while also improving the user experience for those who may travel between country websites. For example, if a web user lands on the .com site and then travels to a specific country’s website, a consistent design is less disruptive; the user does not have to relearn the navigation.

Today, Eli Lilly uses an excellent global template that supports global consistency while allowing room for local content and promotions.

However though global templates should work for most languages you might to reconsider your design for languages might might read from left to right as your entire design would be flipped in that case. Take a example here of how Facebook structures its Arabic page:

• Design for Text Expansion and Contraction : As you rightly pointed out text may scale or contract in different languages. To account for that,the above mentioned article states that:

The general rule is to plan for text expansion of up to 30% to 40% when going from English to German, which is one of the more extreme examples of text expansion. Going from English to Spanish or French will probably only result in a 10% to 20% expansion. To safely design for any target language, a goal of 35% expansion is a good guideline.

Text expansion can wreak havoc with the menu; translating a single word from one language into another, while maintaining a strict character length, can be extremely challenging. For example, "Search" in English translates to "Rechercher" in French, which is nearly twice as long. Allow space for an additional 40% or more of room for expansion in the menu.

Also the article raises an excellent point about the importance of using professional translators to ensure the correct words are used to denote navigation or content since current web translators or auto translators are not exactly correct

• Design for different font sizes : Font sizes can vary from language to language and we have to ensure there is consistency in the standards. To give an example from the above mentioned article:

For example, consider the German and Chinese web pages from Accor Hotels. As shown here, Accor specifies the Chinese font at 12 points while the German font is specified at 10 points.

Here are some additional resources for you to read through:

Select Country; Select Language : Developing a user-friendly global gateway

Tips For Making Your Website Multilingual Friendly - This one has some really good tips about aspects to consider while designing multilingual sites which are briefly summarized below:

• Use Unicode : By using Unicode you are making your website multilingual ready for the future as it supports over a hundred thousand characters of different types. It is also supported by most, if not, all web browsers and platforms. Therefore, switching to Unicode will only benefit you in the long run.
• Flexible design : When designing for multilingual support, your design needs to be built around the languages in the sense that it should be easily compatible with left to right and right to left languages
• Cut Back on images containing text : This is because the text is embedded in these images and when the user flips through languages he would see the same text (unless he redirected to a specific page for that language) or alternate images are automatically inserted on the language switching
• Choose your colors wisely : However, when adding multilingual support, you need to assure the colors you pick for your website also reflect what you do without having a negative affect within certain cultures :

Another article worth would be worth reading : 7 Tips and Techniques For Multi-lingual Website Accessibility

Answer 2

Good question....

The usual method is the following:

1. Choose fonts that support a wide set of languages
2. Anything which contains written text needs to be generated by a computer - including graphical headers
3. Translations need to support field orders: for example, Hungarian says "3-tól 4-ig", whereas English says "from 3 to 4". Therefore, translation technology should include the whole string (usually in a format of "From %s til %s") parametized
4. You can't know when is there enough space for something. Be gracious with space
5. Usually, a translator office asks for the following information:
   • The text in original language as an excel sheet, with each text row numbered
   • The screenshots of each screen where the text appears (using the numbers)
   • descriptions, hints in case needed
6. You'll have to fact-check everything. It's good if even the preliminary mockups & visuals are tested for 2 separate languages, just to make sure, but you'll surely have to check everything in place before publishing.
7. Localization is not just translation. It's also about date formats, cultural references, icons, etc.
8. It's likely that for some pages / elements, you'll need a special localized version - be prepared for that
9. For each translatable text, use a special notation (common is: _("text"), so that the system knows it should be translated, and can check if a translation is missing in some languages
10. Hope for the best :)

Also, check how large, open projects like Gnome or Ubuntu or Firefox deal with internalization and localization. There's some info on how LiveJournal did it, for example.

It's also a good idea to document design rationale and patterns - so that design intent could be still expressed even with large changes between different versions of a site.