Designing for Globalization

Designing for a global audience can feel daunting. Do you localize your product? Or, do you internationalize your product? And what does that even entail?

Let’s demystify localization (L10n) and internationalization (I18n) to understand how designers might leverage both approaches to create truly global products.

Simply put, localization is translation plus cultural adaptation. International users are sensitive to cultural differences and are likely to distrust or overlook a product that poorly adapts to their market.

Internationalization is about building features and experiences to programmatically adapt to the localized content and local market. If you aren’t coding and testing for internationalization, you risk giving your users a broken experience (E.g. the product may not be able to process payment correctly if the number format is not adapted to the country).

Here are some examples of how a designer might use these different approaches.

So which approach is the correct one for designers? Localization, internationalization, or a combination of both?

Globalization (G11n) is the combination of localization and internationalization and it’s the proper approach for designing for a global audience.

How does SurveyMonkey tackle Globalization?

At SurveyMonkey we believe a truly global-ready product is one that has been internationalized by engineers and designers, and properly localized by qualified linguists.

We practice a simple schedule of continuous localization: translation happens every day and we edit Monday through Thursday. Translators, Lead Linguists, and Linguist Quality Assurance Specialists work directly via our Translation Management System (TMS) platform, and we do this across 15 locales.

Additionally, designers and developers follow global-ready design practices. If you are designing for a global audience, you might want to consider implementing these 5 steps into your workflow.

1. Allow Space for Longer Languages

English is a compact language (usually shorter than most latin-based languages). Designers should design for all languages upfront by allowing space for longer languages to expand. Here’s a simple rule of thumb: For less than 10 characters in English, allow up to a 300% expansion for other languages (I.e. Design for 30 characters).

2. Carefully Balance Graphics with Text

Graphics that have embedded English text in them can’t be translated, so creating a graphic without any text makes it applicable to any language.

Don’t go overboard. While removing all text sounds easy, sometimes taking out too much information makes the images hard to understand.

3. Mind Your Fonts & Formatting

Fonts do make a difference, especially for Asian languages. Anything under .50em (8pts) is very difficult to read in Chinese, Japanese, and Korean.

Additionally, don’t force capitalization or bold formats. Instead, work with your developer to put uppercase/bold/italic styling in the string itself and not the CSS template. This allows translators to apply formatting within the string based on the style rules of their unique language.

In screenshot above, all table column headers have been capitalized in the source code making it impossible for linguists to follow the proper capitalization rules in German.

4. Design for Differences in Date/Time Formats

Most countries outside the USA use the 24-hour clock for displaying time and order months, days, and year differently. Instead of depending on translators to adjust these according to their language, consider having your developers implement calendar features using existing international libraries to automatically render the correct layout for each language.

Fun fact: Not all dates are equal when it comes to a product launch. Which day is considered bad luck in Italy?

A) Friday the 17th

B) Friday the 13th

C) Friday the 7th

The answer is Friday the 17th!

This is an example of why it is important to get feedback from local office team members, users, and linguists working in-country. It helps you avoid the embarrassment of launching your product on this day in Italy.

5. Consider Cultural Sensitivities

Using the same models for all regions could make local users feel less connected with your content. Make sure to use diverse people in accordance with the region. Use culturally relevant images when possible or neutral images when necessary.

Another example where culturally relevant images are being used appropriately according to the target audience is shown below.

Besides imagery, color plays a factor as well. Enabling color adaptation can make an impact when reaching out to global audiences. For example, do you know what the color red means in China?

A) Peace and love

B) Danger

C) Good luck and happiness

If you guessed ‘C,’ you are correct! Unlike in the United States, where the correct answer would be ‘B.’

A few final tips

At SurveyMonkey, our designers use a Sketch plug-in that helps them preview layouts in several languages. The plug-in leverages existing translations and uses machine translation (MT) to simulate completely translated designs. Designers can catch text truncation, overlapping, and other user interface issues before all layouts are finalized.

If you have a localization team, involve them in early design iterations. If you don’t have localization experts on your team, be sure to test your designs in German and Japanese before you start development. This will help you visualize your layout with text length that is much longer and shorter than English, as well as avoid a few headaches downstream.

And always remember: languages are different, design for flexibility!