Accounting for and accepting changes: 3 lessons in global UX design

What I’ve learned in multilingual UX design

When translating from English to other languages, or vice versa, there are a few challenges. We will go over these challenges, and purport the necessity of localized, translated content from the beginning of the UX process, so it can alleviate some of the challenges of translation in design. The solution to this problem is localized translated content.

So you’re translating your website so that it can become a multilingual one. You may think you need only two languages, a translator, and that’s it. But when it comes to website translation, design is a major aspect.

The design of a multilingual website will usually depend on the global template you’re using. The use of a global template makes sure that your designs are streamlined from one language to another, keeping brand consistency intact. You’ll most likely be using the same color scheme, the same CTA templates, and more, so your German users won’t be too surprised when jumping from the English homepage, for example.

But with the use of your global template, there are challenges that will abound jumping around from one language to another. I’ll talk about challenges such as shifts from language to language, specific layout changes, and visual elements that need to be tailored to each locale. I’ll provide you with a solution: the necessity of pre-existing localized, translated content even before you utilize the global template.

Lesson: accommodating shifts from language to language

I want to take this opportunity to say that the usual design workflow usually incorporates major design actions, such as those stated in this article. But in the workflow, the usual process of translating comes at the very end. This causes the shift from language to language to change how it relates to the design. The alignments, the buttons, and the CTA will change to different alignments from language to language.

Let’s take the case of shifting from right-to-left (RTL) to left-to-right (LTR) languages. WIth RTL languages, you write and read from the right to the left across the page. Examples of this are English and German. The opposite of this is LTR, where you write and read from the left to the right. Examples of this are Hebrew and Arabic.

This change affects the structure of the website, design-wise. Typography, icons, and images must be flipped, so it looks like a mirror image. However, you don’t flip the icons or buttons featuring English characters, if you’re maintaining those. Flipping them will look like gibberish.

In my experience, you don’t just work consecutively. Working consecutively by creating the RTL design and then transforming it to LTR won’t work like magic. You’ll have different alignments and structures, as well as different size typography, icons, buttons, and maybe even different space adjustments for different text lengths (which we’ll talk about in a bit). It will be a mess

Research says cross-cultural translation and localization are most effective for international brands. What that means is that if you’re designing for a certain local demographic, you need translation and localization in order for it to make sense to another audience.

And yes, that’s correct, you need translation and localization, but you already knew that. What you usually do is design and then localize and translate. Sounds easy right, you won’t have any texts bogging down your design. But what I’ve learned is that you should localize and translate before you even begin to design.

The lesson I learned in accommodating shifts from language to language is to work simultaneously, creating one language landing page mirrored to another language landing page. Another option would be to create a translated mirrored page beforehand. It makes it easier, in the long run, to compare and contrast both language pages and see where you went wrong and where you can adjust.

Lesson: accounting for specific layout changes

Just as your layout changed with LTR and RTL languages, your layout will change as well for text expansion and text contraction. When you’re designing a multilingual website, your multilingual landing pages will be translated from one language to another, and that translation almost always necessitates text expansion and contraction.

Why? Well, the beauty of languages is that they’re not all exactly the same: they differ in length, in syntax, in meaning, and more. The length of a language can even depend on the translator’s style, the type of the translation (whereas some slogans can be creatively translated, manuals are almost always word-for-word translations), and the language.

For example, with language styles, a text from Asian scripts will alter the text and expand it due to the characters and the space between them. You don’t want the script to seem too crowded, but at the same time, you don’t want it to be too far apart.

Adapting layout to text will require a keen eye for multilingual typesetting, in graphic design programs such as InDesign. In my experience, it’s ideal for it to be translated first into the language of translation and then create the design. There are certain benefits to this, which I’ll tell you more about later on.

Lesson: adjust the localized design for each country

It’s a common misconception that localization means different designs for each country: stars and stripes for the American English site, animated baguettes for the French site — not only is this stereotypical and insulting, it also doesn’t do much for your branding when it comes to the user experience. Adobe Design talks about continuous multilingual design localization here.

When a user wants to experience your brand, creating a template that works for all your sites will be the most ideal way to streamline that experience for your users. This means that the colors, fonts, menus, and buttons style will be the same for all your sites.

You’d ideally want to translate before or simultaneously while creating your global template. This is so that you can see which aspects of your design you want to alter based on the localized design for the country. Here are some tips for UX writing localization.

If you see more yellows and greens in one country’s common websites and reds and blues for other countries’ common websites, chances are there’s a connection between the language/culture and their designs. In those cases, you can also adjust the colors of the translated texts.

Conducting localized research prior to global templates allows you to adjust the colors, the menus, the icons, the buttons, and the typography tweaked for each page. While you’re utilizing the global template, make sure it’s consistent across all your pages, but don’t make it exactly the same. Instead, use a localized design tweaked for each country along with the global template. And it’s not just your global template that you need to use localization, but also your UI — as evidenced by this blog post. This will require ample research, but it’s been done.

Design matters: the solution to your multilingual website

In order to accommodate shifts from language to language, account for specific layout changes, and adjust the localized design for each country, localized research and translation must be done in advance. The translation is usually done in the last part after the design. In my experience, and to solve problems with design for multilingual websites, I’ve realized that translation should be done before the design.

“The main goal of a good user experience is making the users feel at home in using your product. Great user experience doesn’t just mean putting fabulous fonts, colors and images,” says Cams Brozas, from translation agency Tomedes’ UX department.

Translation agencies take the work out of your multilingual website by translating. Tomedes, for example, know that the design must come after translation. This is one of the key reasons why I set them apart — I found that they’re one of the only companies who, when creating multilingual websites from scratch, use translation before the design. Most other multilingual website builders leave design for last.

But design matters. So much so that designing without researching, designing without localization, and designing without translation is like a blank canvas without a guide. For a multilingual website to be crafted, it needs guides and predetermined information. It must be done with localized research, such as what colors mean in other countries, how numbers are expressed in different languages, and what symbols are common in other cultures.

“It has to make you feel that it’s specifically designed for you, for it to be useful and usable, regardless of the region you’re from or the language you speak, and that’s where localization and translation comes in,” says Brozas.

When it comes to the user experience, accounting for and accepting changes in global UX design is all part of the experience.

—

Here are some references to read if you’re interested in more UX localization and translation:

• 8 Key Strategies to develop and scale a global UX program — by Jose Coronado.
• Why translators make good UX designers — by Celine Solenthaler

Angela Fabunan is a multilingual content writer with experience in covering design and UX, language learning, and minority languages. She has been a professional writer for 12 years, with a BA in English Language and Literature from Bowdoin College, in the US, and an MA in Creative Writing at the University of the Philippines, Diliman.