Skip to main content

Blog Post

Beyond Translation: Design Considerations for Localization

Culinary adventures often lead me to local Asian or Latin markets. I'm always mesmerized by the product packaging designs that fill the shelves. The way colors, typography, and illustrations appeal to different cultural tastes is fascinating. I love to contemplate what the similarities and differences are to brand and conversion strategies around the world.

Colorful food product packaging at an Asian market

Colorful packaging and signage at an Asian grocery store is familiar yet in many ways a distinctly different experience compared to that at other markets.

When a company or organization begins to chart a globalization strategy, there is a lot to consider from a technical perspective for functionality and SEO. But there is also the all-important user experience to take into account: How does your brand appear to a global audience? What does your brand’s “voice” sound like in another language? What stories are you telling about your brand and how would users around the globe react to them? How can you better connect?

User experience (UX) is all about content and look-and-feel coming together to communicate succinctly, to persuade, and to be helpful. How do we translate something so amorphous? Here are some keys areas to look at when creating a globalization strategy for UX.

Global gateway navigation

Website visitors need to be able to quickly indicate their location and language. An element can be added to the user interface (UI) facilitating the transition. A variety of patterns are available, and can be used in combination. The decision on which ones to use would incorporate discovery research, consideration for the site’s current UI patterns around navigation, the number of options to be presented, and how they are categorized.

Common patterns

  1. Utility navigation elementlanguage picker

“Utility Navigation” refers to the area of smaller links (such as login and search), typically placed just above a website’s main category navigation. This could be a logical spot for an icon and/or text with a drop-down selector or two allowing the user to make a change, provided there aren’t too many options. 

2. Mega or fullscreen menu

In the event that there are more choices than what can fit comfortably into a drop-down selector, or to provide a more engaging presentation, a mega menu (from the main or even from the utility or footer navigation, depending on the size of the menu) could be the right solution for providing the user with options. Or a fullscreen menu like the one Uber uses to allow the user to select a language.

language menu

Uber’s language menu contains 40 total options, so taking up the entire screen with an alphabetized list is a viable pattern.

3. Landing page

For an expansive global presence, a separate landing and/or selection page may be the best solution. Phillips' website uses a text link in the footer of their site labelled “Select country/language,” next to an identifier of the current location and language, for example “Brasil - Português.” The link goes to their country selector page. Apple also uses a footer link to a landing page of categorized options for country or region.

change region - English displayed as default

Starbucks’ website provides a footer link to a page displaying all the options, as well as an indication to the user of the current region and language.

4. Footer element

Another viable spot for a location and/or language toggle is the website footer. For example, Amazon has a pair of buttons in their footer, while HP uses a footer-based mega-menu for selection.

Amazon.com language selector

Amazon’s footer-based selectors show the current language and location. Clicking on either will present the user with a window that contains further, helpful information as well as a drop-down selection list.

Navigation best practices for a global audience

  1. Try to auto-detect the user’s location and language where possible, but be sure to give an easy option to change: auto-detection isn’t always 100% accurate.
  2. Use a location-first global gateway when there are regional-specific services, products, pricing, or other key content.
  3. Provide a clear way for users to change location or language. The header and footer are obvious places for users to find these selectors. On mobile consider placing them in the main navigation menu.
  4. Use a globe icon to signify the availability of other languages. If the user does not speak English, “Choose your country” or “Language”  isn't nearly as effective as an icon. A globe icon is unobtrusive, and looks good at even the smallest sizes. The globe is well-suited for both language- and location-oriented global gateways. Consider a globe that does not show the North American continent front and center.
     

different styles of globe icons

Globe icons in a variety of styles and complexities. There’s a perfect one out there for every brand!

5. Remember that flags are not languages. Unless the content is specific to that country don’t use flags! For example, what flag should be used to represent Spanish? Or, for that matter, English? And what language would users expect if they clicked on the flag of Switzerland - a country with four official languages?
6. Always use the local format for the name of the language. For example, if you’re linking to pages in Chinese and German, translate the labels as ‘中文’ and ‘Deutsch’ rather than using the languages’ English names ‘German’ and ‘Chinese’.

Logo and brand translation in cross-cultural marketing

Did you know that the famous “Mr. Clean” has many aliases around the world? He is Maestro Limpio in Mexico, Meister Proper in Germany, and Don Limpio in Spain, to name a few.

In some countries “Cool Ranch” Doritos are known as “Cool American” Doritos. This is because what we know in the US as “ranch dressing” is marketed as “American dressing” elsewhere. Even in English-speaking countries, localization is a factor!

stack of coke cans from around the world

Cans of coke with various logos from around the world.

The importance of culturally-sensitive brand translations - logos, product lines, and slogans - cannot be overstated. There are a number of infamous (and often humorous)  localization errors that even the largest companies have made. 

For example, in Germany, Ford launched the Ford Probe. But “probe” translates to “test” or “rehearsal” in German, and consumers assumed they would be buying a test car, rather than one that was ready for the road. Needless to say, the car did not sell well.

A little due diligence can go a long way. A professional translator who is a part of the target audience in that location would be an ideal consultant for brand-based adjustments. Similarly, a local designer could be enlisted to thoughtfully adjust the core brand elements to suit the audience, while retaining the desired character of the brand.

Colors for a global audience

The meaning of colors can vary widely across cultures. In the United States black is worn to funerals, while in China the color white is associated with mourning. Red is strictly forbidden at funerals in China as it is traditionally a symbolic color of happiness

The infographic project Flag Stories analyzed the flags of various countries and compared them in all sorts of fascinating ways. The data on what flag colors symbolize offers a peek into the wide variety of global color meanings.

Blue, for example, is considered the safest color choice around the world, since it has many positive associations. In North America and Europe blue represents trust, security, and authority, and is considered to be soothing and peaceful. In Eastern cultures, blue symbolizes immortality. In Hinduism blue is strongly associated with Krishna, who embodies love and divine joy. Many Indian sports teams use the color as a symbol of strength.

Yellow is associated with happiness, cheeriness, optimism, and warmth (as the color of sunlight), as well as joy and hope, though it also represents caution and cowardice in many Western cultures. Eastern and Asian cultures consider yellow sacred and imperial. In Japan, that definition is expanded to include courage (which is expected of rulers) and it is the color of commerce in India. Meanwhile, yellow is associated with death and mourning in many Latin cultures.

morrocan wall art

Blue, yellow, and white wall decor in Marrakesh, Morocco.

Typography for translated text

It’s been said that web design is 95% typography. Be sure to pair quality content translation with quality typographic styling. Character counts expand or contract according to language. Expect a 15 - 30% expansion when translating English to Spanish or Portuguese, for example. When planning to translate English to Chinese or Japanese, however, expect variation.

Japanese text translated from English experiences varying degrees of expansion. The degree of expansion is related to the subject matter. As a guide, to determine the Japanese word count, multiply the number of English characters by 1.8. The more transliteration (katakana characters) is used in Japanese, the greater the expansion rate from English. For example, technology-related documents translated into Japanese from English (computer fields especially) have a higher expansion rate than other text types. 

Consider components

Component design is typically based on expected character counts. Expansion and contraction, as well as additional typographical styles and constraints for the optimal display of character-based languages will affect the appearance of components.  In some cases, additional styles are recommended at the component level as well as for basic type styling.

navigation menu in English and Japanese

HP’s main website navigation menu in English and Japanese.

Type style adjustments to maximize readability

For character-based languages, there are different standards used to optimize legibility. Recommended style adjustments for Chinese and Japanese from English include the following:

  1. Reduce font sizes by 15%
  2. Increase line-height by 15%
  3. Set text-align to justify
  4. Set word-break to break-all
  5. Recommended line lengths for body copy are up to 15 - 35 characters on desktop and up to 15-20 on mobile.

    an example of Japanese typography

A line length of 30 Japanese characters is considered “just right” for comfortable readability. Image courtesy of Seven rules for perfect Japanese typography.

Also consider right-to-left (RTL) readers of languages such as Arabic and Hebrew. Here are 5 great tips for RTL language sites.

Social media

Popular social media platforms vary from country to country. For example, Twitter and Facebook are blocked in China and WeChat and Sina Weibo are two of the most popular social media platforms used there. Be sure to include the relevant networks for follows and shares.

asian social media icons

Icons for Line (popular in Japan), and Sina Weibo and WeChat (popular in China).

Content strategy

Targeted vs. cross-cultural approach

Content strategy is vital, and so is taking the time to write a playbook for addressing a broader audience. Where will you attempt a one-size-fits-all approach? Where will you create campaigns, initiatives and landing pages for a specific region?

Best practices

  1. Express yourself in the target language with the help of a professional translator, ideally a member of the target audience in the desired region.
  2. Be aware of social norms and taboos in the targeted cultures, and take nothing for granted.
  3. Do local market research and user testing.
  4. Be prepared to pivot, continuously iterating and honing approaches across markets.
  5. Engage with local search engines and post regionally relevant blogs. Learn more about International SEO.

Images

Images with people

line of people in a crowded cafe

Consider all personas when art-directing pages. Include members of the worldwide target audience, or better yet - serve region-specific images in key locations. 

Users will feel more welcome if they see people who look like them depicted on the website, associated with the product or service that is being promoted. 

Images with text

Images with text are already SEO and accessibility no-no’s. They can also confuse users in other regions. Text can sneak into stock photography and infographics.

image spelling out the word "agile" and closeup of a medicine bottle label

Connect globally

Clearly, there are a number of considerations to take into account when planning to expand to an international audience. In UX, the most important consideration is always people - the users. They drive our efforts as we attempt to reach them, to hold their attention, and to win their trust and loyalty.

A seamless experience is crafted by leveraging the right data and by listening to real people in interviews and user testing. With proper planning, the help of local language and cultural experts, and an iterative strategy for continuous improvement, localization will be a success. Users will feel welcomed on a website. They will be able to find their way, and to comfortably take in the information they seek. They will have a brand experience that feels like it fits them as an individual, and they will keep coming back for more.

Becky Cierpich

Meet team member, Becky Cierpich

Complemented by an academic background in computer science and communication, Becky brings 15 years of web and graphic design experience to her role as a UX/UI designer at Mediacurrent. Driven...

Learn more about Becky >

Related Insights

Access icon Up arrow icon Drupal 8 icon Facebook icon - white Facebook icon - blue outline Facebook icon - yellow Hollow right arrow icon Hollow right arrow icon - white LinkedIn icon - white LinkedIn icon - hollow LinkedIn icon - blue outline LinkedIn icon - yellow Mediacurrent wordmark Quote icon Twitter icon - white Twitter icon - hollow Twitter icon - blue outline Twitter icon - yellow Youtube icon - white Youtube icon - yellow