For a long time, English was the most widely used language in the digital world. Even today, it’s estimated that 55 percent of all web content is in English. But that’s changing—more and more users expect to get products in their native languages. In fact, more than 70 percent of consumers want to get information in their own language, making the potential of localization in product design clear.
But offering content in several languages can add many new layers of complexity to design. In this article, I want to describe some practical tips that will help you localize your products. But before we get into that, it’s important to define what exactly location is.
Become a Shopify Partner
Build the customized commerce solutions that your clients need now and in the future. Whether you’re a freelancer or a multi-person agency, working with Shopify will take your business to the next level.Sign up
What is localization?
Localization is the adaptation of a product to a specific market. It includes changes that are necessary to make a product culturally appropriate without breaking its functionality.
"Localization is the adaptation of a product to a specific market. It includes changes that are necessary to make a product culturally appropriate without breaking its functionality."
Localization is a lot more than just a translation. Product creators need to not only translate the content, but also consider the cultural specifics of the new region. The ultimate goal of localization is to adapt a product so that new users believe that it was designed especially for their language and culture.
Do not put off supporting localization
This is by far the most important rule of localization. It’s vital to keep localization in mind from the very beginning of the product design process. All too often, product teams put off localization until late in the development cycle. This decision has a negative impact on the product—product designers create a UX dept and increase the overall cost of localization.
As a product designer, your responsibility is to build an awareness of localization. Make sure the aspects of localization are reflected in the specification, and that mocks and prototypes are designed to support localization.
Common technical issues of localization
When localizing a digital product, there are some technical issues that should be considered. Below are five things to consider.
1. Don’t use hardcoded strings
Many localization issues stem from legacy code. Hardcoded strings are one of the most common problems that make it hard to extract content for translation.
All elements in your user interface such as titles, menu items, toolbar labels should be defined as variables, not hardcoded constants.
2. Choose your fonts wisely
Make sure you choose a font that’s easy to read in all languages you support and has all the required characters. Use a Unicode-based encoding such as UTF-8, because it supports many languages and can accommodate pages in any mixture of those languages. Services like Google Fonts and Type Kit all allow you to test a typeface before using it in your design.
Quick tip: Note that some fonts may need a different line-height. For example, Chinese characters are visually more complex than Latin characters, meaning they might need more space for good readability.
3. Create a flexible layout
Expansion of the length of text strings is quite common when translating them into other languages—certain languages are more ‘wordy’ and require more space. For example, a label that says ‘Submit’ might be translated in French to ‘Soumettre’. The English version consists of 6 characters, the French version 9, taking up 30 percent more space.
Below are a few tips to follow to allow easier text expansion:
Make containers responsive. Ideally, you shouldn’t have containers with fixed dimensions.
Place labels above fields in forms. In comparison with left-aligned labels, labels above the fields give you more space and make it much easier to accommodate the lengthy character strings.
- Design for ‘Left to Right’ and ‘Right to Left.’ The script the language is written has a direction. Most languages use scripts which are written and read from left to right, but some scripts, such as Arabic, are written right to left. If you need to support right to left, the layout you design should support mirroring. You should be able to mirror the layout of the whole page—text, images, buttons, and navigation—should all be mirrored.
Keep in the know with Shopify's international initiatives
Visit our Go Global page to stay up-to-date with the tools and resources available to you as you expand internationally. Learn about the incentives and opportunities to help you grow as a Shopify Partner.Visit page
4. Consider local formats
Avoid hardcoding units in the user interface. You need to adjust the following units based on region and user preference:
Dates. Date format varies between countries, so it’s important to be aware of the forms of all-numeric calendar dates used in every particular country.
Measurements. Be aware of the measurement system each country uses.Users in the United States typically expect to view measurement data in the imperial system (pounds, inches, and feet), while users in Europe expect to get the information in the metric system (grams and meters).
Phone numbers. Country codes and the number of digits in a phone number vary depending on the country.
Currency. Having the right currency is especially important for ecommerce apps and websites. When users view an item, they expect to see prices in their native currency. Every time users see a foreign currency, they have to spend extra time converting it to their own.
- Social media buttons. People around the world use different social media services.
5. Ask users to select a language
One of the things that differentiates good products from bad is the user’s ability to complete the task with the least possible amount of effort. Common sense tells us that when it comes to choosing a language for our users, we should strive to auto-detect user location and set the language automatically.
But there are a few cases when this solution doesn't work properly—for example, the user might travel to different locations, so if the app or website hides the language option, they won’t be able to use it—it’ll be in an unfamiliar language.
If you design a website, you should give the user the ability to change languages. Present the language selector at the top of the page (the area where the user will search for it).
If you design a mobile app, it’s safer to ask users to confirm the language selection during onboarding.
Quick tip: Make sure you correctly label languages. Many designers use flags for this purpose, but this isn’t ideal, since flags represent countries, not languages. And one country can have two or more official languages.
Adapt the language of your product
Solving technical issues is just half of the battle. To create a great multilingual product, you need to look beyond code and focus on the language you use. Below are eight tips to help make translation and localization easier.
1. Research your target audience
Chances you already know who your English speaking users are. But do you spend enough time researching your target audience in the new region? To adapt your product for that audience, you need to know what language they speak and how they expect to be spoken too. And you only get that kind of information by researching your demographics.
Quick tip: Be sensitive to cultural customs and social taboos. Countries have differing ethical views, and humor and symbolism does not always cross borders. For example, the thumb up gestures that means ‘great’ for U.S. users, but in the Middle East it means ‘Up yours!’
2. Avoid long sentences
Long sentences are hard to understand, both for your target audience and translators. It’s always better to use short and catchy sentences. Ideally, each sentence should be up to 25 words.
3. Use simple language in your products
People interact with app and web user interfaces through language. Every time you introduce slang or idiomatic phrases into your copy, you sacrifice one important property of your UI: clarity. Users who are not able to decode the message easily become confused. But you also make the work of your translator much harder—not only do they need to be familiar with the slang, but they also have to translate it to a different language without losing the original meaning, which can be very difficult.
By choosing to use simple language, you create translation-friendly content.
Tip: If you have to use specific terms or phrases in your app that require a specific translation, it’s best to add them into a separate document. This document should contain the terms, their translations, and an explanation or definition. By providing contextual information, you make it much easier for translators to understand the meaning.
4. Don’t rely solely on machine translation
It might be tempting to use machine translation such as Google Translate to increase the speed of translation, but it better to resist that temptation. Tech giants such as Google have made exciting advances in auto-translation, but the tool they’ve created still can’t compete with humans—the accuracy of the translated text varies significantly. In many cases, machine translation will be inaccurate, unnatural, and error-prone. A poorly translated product can easily lead to frustration.
For this reason, it’s a good idea to get a human translator, preferably an in-country native speaker, since native speakers have a better knowledge of the subtle nuances of language.
5. Adapt visual elements
The language you use in your product should be adapted to account for cultural nuances and differences. Words are only one part of the translation equation; visual elements like colors and icons should also be adapted.
The meaning of icons and colors can vary depending on the culture. It’s important to follow a few simple rules to be sure your UI works for your users:
Try to use icons with universal meaning. Many icons are now universally recognizable, such as those for home, play. or printer, which do not require text labels to convey their meanings. Test your icons to make sure they have the same meaning in all of your supported languages.
- Research color meaning. Colors have different meanings in different cultures. For example, red means different things for users in China and users in the Western world. While Westerners often associate red with danger, users in China associate red with good luck.
6. Strive for consistency
The language you use in your app should be consistent. Terms, icons, and colors should all be used consistently throughout your product.
This requirement is especially important when a few visual designers and content managers work on the product—even when each designer or content manager has their own style, the final product should sound like the same person created the entire design and text.
7. Create editorial guidelines
The English version of the product likely has a distinct voice, and you probably want your content to have that same voice and tone in any language. To make that happen, you need to create editorial guidelines for translators. People who work on localizing your product should follow the guidelines to keep your branding consistent.
8. Always test your design
‘Test early, test often’ is a fundamental requirement for good product design. When it comes to testing your localization, you need to hire people who represent the target audience. Ideally, those people should interact with the team regularly, so the product team can get regular feedback from them during the localization process.
You might also like: How To Use Translation Keys To Create Internationalized Themes.
Building for global markets
As our world becomes more and more connected, failing to adapt your product to people from different regions undermines your long-term ability to stay competitive. I hope that the tips mentioned in this article will help you create better multilingual products.
What tips do you follow to create digital products for international markets? Share your experience in the comments below!