Cross-Cultural Design: Strategies for Localization

April Chu
February 24, 2021

Shopee offers 8 languages, Spotify offers 20, and Shopify offers 36. From start-ups to Starbucks, designing for global expansion is integral in digital strategy. As Robyn Larsen of Shopify puts it, "International is the new mobile-first."

Yet, even beyond internationalization (designing a product to be adapted for various languages and regions with minimal back-end changes), users want a product that recognizes their unique cultural characteristics and practices.

Localization is more than translation, it's adapting a product to meet the expectations and behaviors of local users.

In this article, we will cover strategies for localization in the design process and take inspiration from culturally responsive corporate and marketing websites.

Local UI/UX patterns and user behavior

Research cultural differences

The Hofstede cultural model includes six dimensions of national culture: power distance, individualism vs. collectivism, masculinity vs. femininity, uncertainty avoidance, length of orientation, and indulgence vs. restraint. Hofstede's country comparison tool provides overviews of regional differences across the 6 factors.

These differences influence how people trust, use, and perceive the Internet; localization means designing with these differences in mind. Take the differences in Japanese and American McDonald's marketing website design for example.

In general, the Japanese are more avoidant of uncertainty and less indulgent than Americans.

Japan / United States Hofstede's Comparison

Comparing the Big Mac product page, the Japanese version emphasizes the price while the American site includes the number of calories.

A less indulgent Japanese customer would value product cost over product calories in their decision-making process. Knowing a Big Mac is 550 calories might even turn them away from buying the burger.

A Big Mac in Japan and the United States' Website

Catering to risk-avoidant customers, the Japanese site details everything that goes into the burger with comprehensible tables for nutritional information, potential allergens, and ingredient origin.

Instead, the U.S. site taps into indulgence with visuals of ingredients and hides the nutritional information under dropdown tabs.

Ingredient presentation on the Japanese and United States McDonalds Website

Know your metaphors

Metaphors in product design communicate patterns and affordances. Metaphors are also contextual and cultural — icons, buttons, imagery symbolize different things in different cultures.

Multi-cultural corporations like Dropbox recognize the importance of cultural metaphors and ask their Internationalization team to review icons and illustrations for insight. If you don't have an Internationalization team, study the local UI/UX patterns in similar or popular websites.

For instance, Chinese apps use the term “发现” (fāxiàn, “discover”) and a compass icon to categorize miscellaneous features and pages instead of a "more" tab or a hamburger menu. Rarely used on Western websites, the shopping bag icon is used by major Chinese companies from WeChat to Xioami to signify shopping features.

From Dan Grover: Chinese apps use the compass icon or globe icon to indicate "more".
From Dan Grover: Major companies use the shopping bag icon, which isn't used widely in the States.

Optimizing for information search behavior

Language and culture play a critical factor in user's search behavior in the way they process text and imagery.

A common characteristic of East Asian websites is dense information and minimal textual hierarchy. Bram Pitoyo, Design Strategist at Mozilla, argues that it takes longer to type precise words and phrases in CJK (Chinese, Japanese, and Korean) languages.

Shopify's Larsen suggests that Japanese Internet users prefer to have all the information on the first page. These cultural and linguistic factors mean East Asian websites are optimized for browsing and not searching.

The corporate website design of Starbucks Japan features more essential information at first glance than Starbucks USA.

Typography

Design for text expansion

Translating text changes its length. General rules of thumb like "the shorter the English text, the longer the translated text" and text expansion factors offer basic guidelines to plan for spacing in translated copy and UI elements. IBM offers localization guidelines for rough calculations:

Text Expansion Factors based on English

In practice, text expansion is not that straightforward. Expansion factors fail to capture that individual CJK (Chinese, Japanese, and Korean) characters are more compact than Latin characters -- they tend to be more square and take up more horizontal space.

Expansion factors help plan for text with dimension constraints such as microcopy, CTAs, and menus rather than long-form content like blog articles.

For example, when we worked on CHC's (Continental Holdings Corporation) corporate website design, text expansion was much more important for the menu layout than for the "About" page.

Our designer opted for a horizontal menu instead of a vertical sidebar to accommodate the additional width of the English menu.

To account for text expansion and prevent text overflow consider:

  • Design for the longest translation first, then check what the interface looks like in the shortest language. Comparing German and Japanese are good reference points.
  • Avoid fixed-width components when possible. Prototyping tools like Figma, make it super easy to design expandable components.
  • Increase spacing around UI elements and copy. Leave space for additional line breaks — try to accommodate for accommodate edge cases before developer hand-off.

Choosing and using multiple script fonts

In Cross-Cultural Design, Senongo Akpem suggests 3 tips for choosing multi-script fonts:

  1. Inspect the overall weight and contrast level of the scripts. Find weights and sizes that have a similar feel and give the page the right balance.
  2. Keep an eye on awkward script features. Small details like character x-heights, descenders, ascenders, and spacing can change the overall brand effect.
  3. Don't automatically choose scripts based on superficial similarity. Fonts make look similar at first glance or in the name — try to dig a little deeper into naming conventions of fonts in different languages and the history of the typeface.
Mingoo Yoon: Yoonseul Batang

Multi-script design is challenging because it requires typographic sensitivity to convey the same brand image across different languages and contexts. Slack's font choice conveys a consistent brand tone across its various marketing website designs.

Regional Slack websites

Consider visual density

When designing websites in different languages for different cultural contexts, consider the visual density of paragraphs or an individual character. Different cultures value and are used to varying amounts of text density.

Mingoo Yoon: Blanc

This might mean creating different design systems with various line heights and font choices for each localized page. Sometimes, you can get away with making a design system work across multiple site versions.

To increase the flexibility of the design system, Akpem suggests choosing a slightly larger CJK font size because of their higher density and using wider line-heights.

Conclusion

In short, the end goal of localization is adapting your design to the local user instead of asking the user to adapt to your design. While Tenten Creative has gotten pretty good at East vs. West design and digital strategy, we have only touched on a few strategies and tips for cross-cultural design.

We'll be the first to admit that cross-cultural design is difficult and requires extensive research but localization done right is an invaluable step in digital transformation.

Shopee offers 8 languages, Spotify offers 20, and Shopify offers 36. From start-ups to Starbucks, designing for global expansion is integral in digital strategy. As Robyn Larsen of Shopify puts it, "International is the new mobile-first."

Yet, even beyond internationalization (designing a product to be adapted for various languages and regions with minimal back-end changes), users want a product that recognizes their unique cultural characteristics and practices.

Localization is more than translation, it's adapting a product to meet the expectations and behaviors of local users.

In this article, we will cover strategies for localization in the design process and take inspiration from culturally responsive corporate and marketing websites.

Local UI/UX patterns and user behavior

Research cultural differences

The Hofstede cultural model includes six dimensions of national culture: power distance, individualism vs. collectivism, masculinity vs. femininity, uncertainty avoidance, length of orientation, and indulgence vs. restraint. Hofstede's country comparison tool provides overviews of regional differences across the 6 factors.

These differences influence how people trust, use, and perceive the Internet; localization means designing with these differences in mind. Take the differences in Japanese and American McDonald's marketing website design for example.

In general, the Japanese are more avoidant of uncertainty and less indulgent than Americans.

Japan / United States Hofstede's Comparison

Comparing the Big Mac product page, the Japanese version emphasizes the price while the American site includes the number of calories.

A less indulgent Japanese customer would value product cost over product calories in their decision-making process. Knowing a Big Mac is 550 calories might even turn them away from buying the burger.

A Big Mac in Japan and the United States' Website

Catering to risk-avoidant customers, the Japanese site details everything that goes into the burger with comprehensible tables for nutritional information, potential allergens, and ingredient origin.

Instead, the U.S. site taps into indulgence with visuals of ingredients and hides the nutritional information under dropdown tabs.

Ingredient presentation on the Japanese and United States McDonalds Website

Know your metaphors

Metaphors in product design communicate patterns and affordances. Metaphors are also contextual and cultural — icons, buttons, imagery symbolize different things in different cultures.

Multi-cultural corporations like Dropbox recognize the importance of cultural metaphors and ask their Internationalization team to review icons and illustrations for insight. If you don't have an Internationalization team, study the local UI/UX patterns in similar or popular websites.

For instance, Chinese apps use the term “发现” (fāxiàn, “discover”) and a compass icon to categorize miscellaneous features and pages instead of a "more" tab or a hamburger menu. Rarely used on Western websites, the shopping bag icon is used by major Chinese companies from WeChat to Xioami to signify shopping features.

From Dan Grover: Chinese apps use the compass icon or globe icon to indicate "more".
From Dan Grover: Major companies use the shopping bag icon, which isn't used widely in the States.

Optimizing for information search behavior

Language and culture play a critical factor in user's search behavior in the way they process text and imagery.

A common characteristic of East Asian websites is dense information and minimal textual hierarchy. Bram Pitoyo, Design Strategist at Mozilla, argues that it takes longer to type precise words and phrases in CJK (Chinese, Japanese, and Korean) languages.

Shopify's Larsen suggests that Japanese Internet users prefer to have all the information on the first page. These cultural and linguistic factors mean East Asian websites are optimized for browsing and not searching.

The corporate website design of Starbucks Japan features more essential information at first glance than Starbucks USA.

Typography

Design for text expansion

Translating text changes its length. General rules of thumb like "the shorter the English text, the longer the translated text" and text expansion factors offer basic guidelines to plan for spacing in translated copy and UI elements. IBM offers localization guidelines for rough calculations:

Text Expansion Factors based on English

In practice, text expansion is not that straightforward. Expansion factors fail to capture that individual CJK (Chinese, Japanese, and Korean) characters are more compact than Latin characters -- they tend to be more square and take up more horizontal space.

Expansion factors help plan for text with dimension constraints such as microcopy, CTAs, and menus rather than long-form content like blog articles.

For example, when we worked on CHC's (Continental Holdings Corporation) corporate website design, text expansion was much more important for the menu layout than for the "About" page.

Our designer opted for a horizontal menu instead of a vertical sidebar to accommodate the additional width of the English menu.

To account for text expansion and prevent text overflow consider:

  • Design for the longest translation first, then check what the interface looks like in the shortest language. Comparing German and Japanese are good reference points.
  • Avoid fixed-width components when possible. Prototyping tools like Figma, make it super easy to design expandable components.
  • Increase spacing around UI elements and copy. Leave space for additional line breaks — try to accommodate for accommodate edge cases before developer hand-off.

Choosing and using multiple script fonts

In Cross-Cultural Design, Senongo Akpem suggests 3 tips for choosing multi-script fonts:

  1. Inspect the overall weight and contrast level of the scripts. Find weights and sizes that have a similar feel and give the page the right balance.
  2. Keep an eye on awkward script features. Small details like character x-heights, descenders, ascenders, and spacing can change the overall brand effect.
  3. Don't automatically choose scripts based on superficial similarity. Fonts make look similar at first glance or in the name — try to dig a little deeper into naming conventions of fonts in different languages and the history of the typeface.
Mingoo Yoon: Yoonseul Batang

Multi-script design is challenging because it requires typographic sensitivity to convey the same brand image across different languages and contexts. Slack's font choice conveys a consistent brand tone across its various marketing website designs.

Regional Slack websites

Consider visual density

When designing websites in different languages for different cultural contexts, consider the visual density of paragraphs or an individual character. Different cultures value and are used to varying amounts of text density.

Mingoo Yoon: Blanc

This might mean creating different design systems with various line heights and font choices for each localized page. Sometimes, you can get away with making a design system work across multiple site versions.

To increase the flexibility of the design system, Akpem suggests choosing a slightly larger CJK font size because of their higher density and using wider line-heights.

Conclusion

In short, the end goal of localization is adapting your design to the local user instead of asking the user to adapt to your design. While Tenten Creative has gotten pretty good at East vs. West design and digital strategy, we have only touched on a few strategies and tips for cross-cultural design.

We'll be the first to admit that cross-cultural design is difficult and requires extensive research but localization done right is an invaluable step in digital transformation.

Related articles