Today the World Wide Web is something that we take completely for granted. However, when companies first began to expand their presence on the web, web designers were confronted with a whole new set of challenges caused specifically by the need to localize their sites. In the twenty-first-century, web professionals are still striving to find the best ways to adapt their websites and apps to their target audiences. These audiences not only speak different languages but have widely differing cultures. Let’s look at five ways to approach localizing your user experience (UX).

Think Globally

Culture has an enormous influence on people’s behaviors and perceptions. This means that the design decisions you make naturally fall under the influence of your own background and culture. These decisions can have unexpected and surprising results when observed through the eyes of someone from a different culture.

  • Example: Do you assume that everybody reads a web page in the same way? Well, actually, eye-tracking studies show that in the west, people read in a sequence – their eyes travel from left to right and from top to bottom. In Asia, however, people read a bit differently. They do more skimming and jumping back and forth. What this means is that the placement of user interface (UI) elements, e.g., calls to action, might be affected just by the way your target audience reads.

Indicate Languages Without Flag Icons

If you land on a webpage in a different language, most of us start looking for a way to change the language. One very common design pattern is to make use of flag icons. You click on the appropriate flag icon and switch the language. This seems to be a logical method, but in reality, it’s a bad design choice. Consider the following scenario:

You’ve been given the task of designing a site that will also be translated into Spanish. You need a way to inform your Spanish-speaking audience that the site is available in Spanish. You think that a visual indicator like a flag icon is preferable to plain text.

The question then becomes: Which country flag should you choose to represent Spanish? You might opt for Spain’s flag since the Spanish language originated there. However, from the point of view of a user, Mexico has a much bigger Spanish-speaking population than Spain. And, what about the other nineteen Spanish-speaking countries out there in the world?

The blog Flags Are Not Languages explains how flags and languages are clearly different as follows:

Flags are symbols that represent countries or nations while languages represent a shared method of communication between people.

Understand Text Expansion

What jumped out at you when you first saw a foreign language in writing? Maybe the alphabet was completely different or the translated text seemed longer or shorter. The fact is that when content gets translated into another language, the text length is probably going to change. Because English is a very compact language, it leads to longer translated text in most other languages. Think about how this might impact your design? Can things like tabs or buttons accommodate more text? Also, it will usually be necessary to construct a “buffer” to accommodate possible text expansion after translation.

However, it’s not safe to assume that the same rule applies to every language. For example, when the word Share is translated into German, the text length is almost doubled; however, in Korean, the text is only 70% the length of the English text.

Avoid Inline Components

Another UI design pattern that can cause a localization issue is the use of “inline” components such as dropdown lists or input fields. The problem arises because most languages do not follow the same word order. This means that attention must be paid to the repositioning of your UI components to accommodate the correct sentence structure in the translated text.

Be Concerned About Capitalization

In English there are different rules for capitalization – at the sentence level, and at the header and title level. Other languages have different capitalization rules, and many use capitalization far less than English. For example, calendar months, a language’s name, and organization names are all capitalized in English, but not in Spanish. Because of these differences, it’s important to avoid using Cascading Style Sheets (CSS) to handle capitalization. And, never use capitalization as a styling differentiator – some languages don’t have any capitalization in their writing systems.

Conclusion

The above are some of the more common issues associated with website design and localization, but they are by no means the only ones. When localizing your user experience, it’s imperative to be aware of cultural differences. When choosing each design element, think about the diversity of the users who will be affected by your design decisions.

How Localize can Help

Translation and localization can present big challenges to web designers. The Localize platform offers the ability to add screenshots of the area that the translation needs to be placed for your translators to reference. We provide powerful solutions that can help translators work with your web design, localizing your user experience.