Have you ever thought about German?
The word “Personal” which is just 8 symbols in English is 12 symbols in German “Persönlichen”. It is 50% longer! Just imagine what a mess your beautiful, handcrafted page will possibly turn into if it is translated into a different language.
We rarely think about how the interface looks in the other languages while designing. The idea to write this article came while designing Pocket Lists App, when I faced with the task to create the App Store Screens in 10 languages. Some difficulties were expected here, but I did not expect the problem to be this significant.
Diving deeper, I found out that extra-long issues are common for the German, Italian, Russian and for other languages with a longer average length of a word.
But non-fit texts are not the only issues, I’d like to highlight here. Living in Russia, sometimes I stumble on fonts without Cyrillic script support. Often it doesn’t actually feel like what the designer intended in the first place.
The same problem can occur in China, Japan, Greece, Israel, UAE and in many more countries with unique writing systems.
Untranslated titles are also a part of the issue.
Solution
At first, you should know if your product is going to be available in different languages. If you are designing an international product, ask your Project Manager to provide you with the list of countries you are working for.
Here is the best (as far as I am concerned) method to prevent issues. Reduce the font until it becomes unacceptably small. Then, find out the biggest number of symbols fitting into your UI where texts are unable to stretch. Just fill each of the titles with random numbers and letters until it fits correctly. Count symbols manually or paste the text in the new Google document and check Tools → Word count.
In Pocket Lists, we used ICanLocalize service to find translators. There is an option to add description for the each string of text, so you or your teammate will be able to guide a translator with a maximum length of the word or text.
Select the multilingual font and/or choose a similar one for unsupported languages.
Finally, ask QAs for checking the final results not only in English but also in other languages.
Keep in mind this specific while designing international products, and people around the world will be grateful to you 😉
Interesting links
- 10 principles for great translations by Laura Cunha
- What are the longest and shortest languages in terms of average length of words? on Quora
- UX Design Across Different Cultures — Part 1 by Jenny Shen
- UX Design Across Different Cultures — Part 2 by Jenny Shen
- Localization sounds simple, but it is not: Part 1 — Intro & Translation by Dennis Nerush
- Localization sounds simple, but it is not: Part 2 — Supporting multiple currencies by Dennis Nerush
- How To Internationalize Your Typography by Yona Gidalevitz
- Designing a Localization-Friendly User Interface (Part 1) by Dimitris Glezos
- Designing Pocket Lists a Case Study by me
If you would like to chat or have any questions, find me on nikolayp.com, instagram and behance 👋
