7 Key UI Design Principles for Multilingual Apps

Multilingual UX design can feel like a mountain of a task. Certain basics should definitely be considered: keeping your users in control, catering to a simple and fluid user flow, providing visual clues, etc. Nevertheless, designing a mobile app that should transcend national and cultural borders is an endeavor that takes far more effort. Here are some core UI design principles to guide you in making your app a global success.

Let your users choose languages

Here comes the first question: Should your mobile app/website have a default language setting? There are tons of apps out there that determine languages based on the user’s IP address or system setting (often represented by national flags). While this practice may be common and the flags beautiful, it is often not the best solution.

The downside is that it overlooks countries with more languages in use. For example, there are 22 official languages in India. In a quickly diversifying world, it is important that your app reflects the needs of as many people as possible.

Therefore, it is recommended that you always have a “gateway” to your app or website’s main page that allows your users to pick the language. In other words, the first time a user logs in or opens the app, he/she should be the one who determines in what language the content is shown. Also, the user should be free to change languages at any time.

Moreover, to represent languages, use locale names instead of national flags. For example, if your website is for Spanish speakers in the United States, you can mark it as Español (Estados Unidos).

Internationalize your product

“Internationalization” is a term that refers to the process by which you prepare your product for localization. In a mobile app or a global website, it means spending time and resources to restructure your codebase so that your product is ready.

One challenge of internationalization is to get the encoding correct. Languages such as English and Spanish are single-byte and generally wouldn’t have any problem appearing in a browser. However, for languages like Chinese, Korean and Arabic, you need to make sure your coding structure is well configured to maintain these language characters (e.g., encode with UTF-8); otherwise, these “double-byte” languages won’t show correctly in your app.

Learn your target market’s cultural patterns

If you see "01/11/20," you probably know it is a date, but what date is it specifically? Is it November 1 or January 11, 2020? While you may be familiar with the DD/MM/YY date format, it may differ across regions and countries—and sometimes, if you just put "DD/MM/YY," your potential users may not understand what it means.

Cultural patterns are what make each market distinct. Do some research on your target market’s cultural patterns before actually diving into it. For example, is the symbol you use culturally relevant? Are there any cultural taboos you want to avoid? Answering these questions will eventually boost trust in your product or service.

Maintain a consistent brand image

While you need to beware of the cultural differences across regions where you sell your products or service, also be sure to keep a consistent global brand image.

To do this, you may either choose to use a layout template (there are already tons of them), or create your own customized version that is specifically configured to meet your internationalization needs. Overall, each language variant of your website or mobile app should have the same flavor when it comes to your brand image and delivers similar user experiences. Once you have a consistent template for UI design, expenses on things like adding new features (like buttons) and new languages would drop significantly.

Avoid using embedded texts

Has your team already designed a few fancy fliers or images? If they are so good-looking and are probably on your ads for a few days, it may be natural to reuse them in your newly launched multilingual website or mobile app. However, before you tell your team to “just upload them to our website,” maybe you'd like to make sure that any texts are not directly integrated into the images. You probably need to have someone internationalize the images and fliers first by extracting the text into a separate layer. This way, you will be able to upload these texts into a translation management solution. In other words, apart from the regular content, your favorite images and fliers will be multilingual as well.

Plan on enough space for longer texts

Before you import your HTML data for translation, you should know that translated text components rarely have exactly the same length as their original counterparts. If you translate from English into languages like Russian or Ukrainian, it is likely that your translated copy would expand by at least 30%. Conversely, if your target language is Chinese or Japanese, the content may shrink by about 10% to 15%, which may make your UI aesthetically undesirable.

Therefore, should you have a “fixed” UI structure that does not change with the size of your content, your text boxes, buttons, and other fields would just not be able to fit. Fixing them manually one by one would then cost you a significant amount of money that would otherwise be saved.

Bring design and translation together with robust localization technology

Just like you can't expect your team to “draw” UI content strings or keys in a simple raster graphics editor, you shouldn’t just assume that once the website is ready in its original language—mostly English—your translators can now jump in and finish the work within days. Creating and maintaining a multilingual mobile app is a long-term process that involves the use of different tools, ideally combined on a translation management platform that integrates seamlessly with your UI design workflow.

The Phrase Localization Suite offers an effective way to orchestrate the entire process with its integrations for design tools such as Sketch and Figma. First, your designers can push translation keys from the artboard in their preferred design tool directly to Phrase. Then, your translation team can take over and deliver high-quality translations thanks to screenshots attached to the strings for better visual context. In the end, designers are able to pull the translated content back to Sketch or Figma only with one click via the toolbar and prevent design breaks early on.

This simple but highly effective workflow provides a seamless connection between your team of designers and translators. Even more importantly, it makes it clear that for a multilingual app to function properly, you need to be both on top of the core UI design principles and familiar with how things are done in a multilingual design environment. Made with the whole team in mind, Phrase is designed to adapt to your translation needs and scale with your global app from day one. Sign up for a free trial, and see for yourself how it can support your globalization efforts.