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?


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.

enter image description here

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:

enter image description here

  • 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.

enter image description here

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 :

enter image description here

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


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.

  1. 1.Consider word length and allow space for longer copy. For Eg: English (Latin) is compact but Japanese script is wide and so will be able to fit less number of alphabets in the same space.
  2. Though English and German share the same script, there is a great difference in the language. English is compact. v/s German words are longer and they have lot of compound words. In that case making the sentences fit in the smaller spaces like application menus and headers becomes a great challenge. In that case we need to change the word or look out for an alternative synonym that can be used.
  3. Even if we consider English language , American English is different than British English. So while giving it to a translator you should be more specific of the country you want to target.
  4. If you are targeting a particular country then there are different aspects which should be considered. You need a much deeper understanding of legal and cultural differences (such as distance selling regulations, tone of voice, or attitudes to imagery and color). A country like Switzerland has 5 official languages. So producing would be a challenge.
  5. Other things that will affect the User experience are the personal details page if you have one. People in different parts of the world write their name in different ways. For eg: Usually we write the First name and the Last Name, but in some places people are used to writing middle names. Addresses, Currency, Date, Time, Units everything changes according to the country.
  6. Tool tips, Help Tips should have dynamic containers so that String length should not matter.
  7. Application name should not be translated as it is the part of Branding of a company.
  8. Once the local language strings are added, check it with different operating systems, and look for any change in the UI or shift or misplaced text, images etc. Often different fonts on different machines make your application look messy. Try to install the language pack of that particular language and see if that helps. Sometimes just because a specific font is missing, you won’t be able to view the text properly. (applies to desktop application)
  9. You can also check on different screens with minimum window size. This is often overlooked. But it gives an unfinished look to the product if left untested.
  10. Any documents, for eg: Help document or shortcut keys document etc should be translated and images need to be replaced where-ever required.
  • Welcome to the site, @Medha. +1 for a very thorough and well thought-out first answer. – Graham Herrli Mar 26 '16 at 6:03

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.