language - Best Practice for designing UI for a multilingual site?

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

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