Todd Sumamno
At first, when you’re designing multilingual websites, there’s no right or wrong answer. Everything is experimentation–everything open to critique. You’re trying new things with creative license, and at the same time, you’re learning. Yet, after some time, you’ll learn that there may be great UI mistakes that make the UX experience a bit off for your consumers.
In this article, we’ll see how to design websites with language considerations for UI and UX. When it comes to multilingual websites, everything from icons to language use and language context matters. A great multilingual UI takes into account the language and region of the target market–the specifications of the intended audience themselves. This way, you’ve put the UX first, because you’re putting your user first.
How Translation Services Can Fix UI and UX Mistakes With A Linguistic Approach
As you can probably tell, translation is going to serve you well, when it comes to creating multilingual websites and fixing UI mistakes. Translation services, which efficiently adapt online content to new languages and localities, might come in handy. A great translator can work with UI and UX designers to come up with the best options for your website so that it can successfully turn multilingual. Translation services can fix mistakes such as inappropriate color schemes, mixed-up hierarchies, and muddled icons–all from a linguistic perspective. If you need documents translated, you can always use an Online Certified Document Translation service.
The Most Common UI and UX Mistakes Translators, and UI and UX Designers Face
Here are the most common UI mistakes translators, and UI and UX designers face:
Problem: Too Much or Too Little White Space
Solution: Accommodating Text Expansion and Contraction
When your UI breaks because the language you’re translating in is long, or you need more white space, it affects the layout, page elements, and copy in the design. You’re going to need to accommodate for white space in Asian characters, for example. In Japanese, “computer” is “コンピューター”, which has fewer letters but more white space.
Text Expansion/Contraction is real (and really important). It means leaving room for translations to contract or expand the size of the text, depending on the language.
Let’s take the CTA button. In English, you’d have something short like “Sign Up” or “Register.” In Chinese, you’d explain politely, saying something like: “Try it now for 30 days free of charge.” In German, you’d have a more cordial approach, according to their etiquette rules, such as “Sign up now to enjoy full access to all our features.” You don’t typically use the word “free,” for German users as it’s considered aggressive or impolite. So, the text here would definitely expand to accommodate variations in language.
Problem: Inconsiderate Language Context
Solution: Accommodating Cultural Variations in Language Use
This brings us to the next problem and a major one: inconsiderate language context. This goes without saying but the cultural context of the target language you’re translating matters. You can offend through UI translation if you’re not careful.
All languages are not made the same. That means you’ll have languages that are made to be read left-to-right, and some languages to be read right-to-left. Arabic, Hebrew, and Urdu will be read right-to-left, and you’ll need to accommodate serious changes to the layout. This is because the layout for right-to-left languages must mirror the layout in left-to-right languages. Say, you have English as the source language and Arabic as the target language–you’ll need to mirror elements for bidirectionality. Here are Google’s guidelines for bidirectionality.
All regions are not the same either–they have their own sociohistorical and cultural backgrounds that flow into their languages. In English or European languages, honorifics are what you’d call the terms “Sir” or “Ma’am.” But they’re more common in Asian languages, which are filled with honorifics. For example, in Japanese, honorifics appear as -suffixes. In UI, this affects the way it’s perceived by different users, while in UX this affects the overall experience of that user.
Problem: Mixed-Up Hierarchies
Solution: Correcting Subdomains and Using Appropriate Colors, & Icons
When it comes to hierarchies, UI must prioritize different elements on the screen for the overall UX experience. It’s a technical process, as UI is, but still involves language. Each multilingual website must have landing pages or subdomains with considerations for the target language. You’ll have your source language as your homepage, then subdomains in a drop-down box.
If you don’t have the correct landings pages and subdomains you might break your website’s UI.
The worst thing you can do to a user is to make it difficult to select their language in the drop-down box. Sometimes, some websites use flags, which is not recommended. That’s because flags represent countries, but languages can be used by multiple countries–so, if possible use the text to indicate languages, translated, of course, in the user languages.
Another thing is colors. Did you know that there are culturally appropriate colors for each region? For example, yellow represents wealth and status in Africa, but in Latin America, it indicates mourning. Purple is often called the color of royalty in some regions, but in Brazil, it’s worn at funerals.
And last, icons. The icons you use for your multilingual website can be perceived differently by different users. And you’ll need to take into account your text expansion and contractions as well. For example, you’ll have maybe a text option for your German page as opposed to an icon on your English page, since the text in your German page is already expanded. You’ll break the UI if you add another icon to your German page.
