How to design a site for international audiences

A few years back companies could design a site for local audiences and ignore the user base which was beyond their expected demographic of users. However with companies expanding beyond their local demographic and moving their base of operations into multiple regions, there is an increasing demand to ensure that the site design can cater to the requirements of those regions. Designing for multiple regions with different cultural connotation and website design best practice can be a daunting experience as some best practices in a particular country might be a very offensive practice in another country. For example:

A golf ball manufacturing company packaged golf balls in packs of four for convenient purchase in Japan. Unfortunately, the number 4 is equivalent to the number 13 due it sounding like the word “death”

When the US firm Gerber started selling baby food in Africa they used the same packaging as in the US, i.e. with a picture of a baby on the label. Sales flopped and they soon realized that in Africa companies typically place pictures of contents on their labels.

EuroDisney made a major mistake when it created a multimillion dollar advertising campaign with tons of purple. For the Catholics of Western Europe, purple signifies the crucifixion, and it’s a color of mourning rather than a happy place as Disney sites are known to be. The end result was that EuroDisney flopped.


Due to multiple failures like this companies are investing more time in understanding the cultural and best practices which should be followed while designing sites for international audiences. Though it would be really difficult to ensure that all the cultural customs are found out and analyzed before designing a site or application, here are some basic standards which must be followed before implementing a site:

Work with Unicode

Irrespective of the language which the site is going to be developed in, care should be taken that the development is done in Unicode. Unicode is a computing industry standard, designed to promote and facilitate the consistent representation of text, irrespective of the script. Thus any written language i.e. English, Hindi, Arabic , Hebrew irrespective of whether it reads from left to right or right to left will be catered for as Unicode has a repository of over hundred thousand characters supporting over 100 scripts. The complete list of languages and scripts supported by Unicode can be seen at The Unicode Consortium CLDR’s chart pages

clip_image001

The most common character encoding for Unicode is UTF-8, which is a variable-length encoding representing every character in the Unicode character set. And unlike UTF-16 and UTF-32, it is backwards-compatible with ASCII, meaning UTF-8 is increasingly becoming the default encoding system for e-mail and websites.

Understand Cultural symbols and their symbolic meanings

While choosing graphics for a site, care has to be taken about its meaning in the culture where the site is going to be used. While certain symbols might be accepted almost everywhere around the world, seemingly innocent and daily symbols might be a cause for specific spite in some countries. For example, the “thumbs-up” gesture is used in many countries as an affirmation of success or approval. As a matter of fact, Facebook based it’s like symbol based upon the thumbs up gesture’s general acceptance. However, in modern day Afghanistan, Iraq and parts of Greece, Italy and France this simple gesture can be considered to be very impolite. In fact it is often regarded as the equivalent of the “middle finger salute” used in the UK and USA.

Another example is the Swastika: most of us will associate it with the Nazi movement. But for Hindus, it is the symbol of good luck and well-being. The swastika is used in all Hindu yantras and religious designs.

Similarly while the color green is considered very lucky in Ireland, a green hat is considered very offensive in China where it symbolizes infidelity.

Understand Color symbolism in different cultures

One aspect of design that can have far reaching and sometimes unintentional effects on readers is color. Colors have different meanings in different cultures and care should be taken to ensure that the color combinations used while designing a website don’t affect local sensitivities.

Understanding color can be a tricky challenge and many color meanings can almost seem contradictory — particularly in the West, where color meanings are extremely broad. Also certain colors are strongly associated via culture to emotions and beliefs and even historical facts (e.g. Yellow in China is considered as the color of the emperor and hence considered as royalty). Some interesting color representations and their cultural symbolisms are given below:

clip_image003

Reference: Colors in different cultures

McDonalds is an excellent example of a global organization which designs their local sites to reflect not only the local design standards but also the culture. To show an example of their use of color to reflect their respect the local customs, take the example of the local sites for India and Kuwait.

In India, the color red is used as an example of purity and hence McDonald’s follows a color scheme which is very reddish in color as shown by this screenshot

clip_image005

However in Eastern countries, Red is denoted as dangerous or evil and McDonald’s reduces the red tone in the color just keeping enough for the branding

clip_image007

The screenshot above is the screen shot of the English page of Mcdonalds of Kuwait

There is an excellent article Color and cultural design considerations which should be read to get a deeper understanding of how color is perceived in different countries

Understand Country specific design patterns

Though there has been an increasing trend in moving towards a cleaner and minimalistic looker with lesser emphasis on chrome and more on content with explicit use of typography, these UI design patterns might not be applicable everywhere as the design layout depends from country to country. For example, while there is an increasing trend towards minimalistic design patters in US, there seems to be no such movement in most Asian countries where design layouts still has very high information densities. Taking the example of McDonald’s China, there is an emphasis on communicating a large amount of content to users at a single instant with multiple points of focus. Part of the reason is because users in China are more accustomed to analyzing more information at a single glance and it’s easier to read a lot of content in Chinese.

clip_image009

Screenshot of the McDonald’s China site

However if you have a look at the McDonald’s USA site, the content focus is more on communicating a single point of focus with subsets of information with explicit use of large typography and distinctive call to action buttons as shown below.

clip_image011

Screenshot of the McDonald’s USA site

Another aspect to consider while designing localized sites is the language structure. Though most languages read from left to right, there are a number of languages which read from right to left and hence must be accounted for in terms of design. It should be noted that while dealing with languages which read from right to left, just doing a text translation will not be sufficient and aspects such as placement of design elements and controls must be taken into consideration. For example, the Facebook landing page in Arabic (which is a right to left language) is not just a textual translation of the English version but the corresponding content and control placements are also flipped to read from right to left as shown below:

clip_image013

However care should be taken before completely embarking on a design orientation based upon the language being used as countries can have multiple languages and designers need to ensure that the language of their target audience is catered for. To quote from the W3C internationalization page

The script may also change by legislation or with changes in government policy. For example, to reach the Azeri-speaking population in Iran, you would use Arabic script. From the late 1930s, Cyrillic was the script of choice in Azerbaijan itself and became policy in 1940. Due to the fall of the Soviet Union, beginning in 1991 a gradual switch to Latin occurred, becoming mandatory for official uses in 2001. However, for your target audience and unofficial uses, you might want to use Cyrillic for older audiences and Latin for younger audiences, and most likely both to reach the general Azerbaijani population. If you want to reach all Azeri speakers, you would use all 3 scripts. (Note that there might be terminology and other differences among Azeri speakers in different countries, just as there are differences between English or French speakers in different countries.)

You also should be aware that your choice of script may have political, religious, demographic or cultural overtones. In countries where the language of higher learning was Russian, Cyrillic will be used by educated people. Latin is associated with Pan-Turkic movements, and more generally can indicate Western-tending movements. Arabic script has associations with Islamist movements.

Design flexible layouts to account for language compatibility

While designing a localized site, care should be taken to ensure that the form and content elements on the page can account for the differences in language length. For example, German tends to use much longer words than English, whilst many Asian languages require much less space for text than English. This means that if you’re ever translating your website into other languages, it’s best that your content and design are kept as separate entities.

The graphic below gives an example of how a single word can have varying lengths in different languages

clip_image015

Hence care should be taken that that fixed width structures are avoided and content containers are flexible enough to handle size changes due to the shift from one language to another.

Use professionally translated text for local content

While writing content for your localized sites, ensure that your content has been translated by a professional translator and vetted by a cultural authority for that culture to ensure that no careless or glaring mistakes have been made. While it might be tempting to use Google translate or a local employee to do a rough translation, lack of knowledge of translation nuances can lead to some embarrassing results as shown below:

Pepsi’s ‘Come alive with the Pepsi Generation’ slogan reportedly turned into ‘Pepsi brings your ancestors back from the grave’ when translated into Chinese.

Germany was not entirely receptive of Irish Mist whiskey liqueur, Clairol’s mist stick curling iron or the Rolls Royce Silver Mist model. This isn’t surprising when you consider that ‘mist’ is German for ‘manure’.

Also be aware of that slang is also avoided as much and what might be considered as acceptable words in a specific language might be considered as a very offensive slang in another language.

Also note that names might be called differently or might be spelt differently depending on the language. For example Munich (the capital of Germany) is spelt as “München” In German.

Also note that not only selectable text should be translated but also text which is embedded in images to ensure there is a cohesive user experience and uniformity across the site.

Lastly note that literal translations should also be done carefully while choosing website names as shown by the example of Holland’s hit festival which whose domain name becomes http://www.hollandshitfestival.nl/

Check out this article Ten Tips for Localization and Translation for additional inputs on best practices while doing translations.

Maintain Global Branding

Though care should be taken that the site is localized to reflect local customs and considerations such as color and local symbols are taken into the consideration while doing the site design, the site still maintains its brand identity to increase trust and acceptance across customers.

 

Be aware of Privacy Laws

While designing a localized site, be mindful of the privacy laws of that country. For example , Europe has very strict data collection laws as opposed to USA and care has to be taken that there is no violation of that as that can have serious consequences as shown as below :

The absolute worst case scenario is that the EU denies US firms the right to do business in Europe where there is any possible human data transfer back to the US. Some examples include:

  • Bar all e-commerce unless data about Europeans is processed in European and follows the new rules.
  • Airline and Hotel firms could not transfer any data about European customer’s preferences such as eating and seating.
  • Medical research data could not combine European and American data sets.
  • Firms that need data about individuals such as accountant, insurers and investment bankers would be severely curtailed.

There are numerous examples of companies who have made efforts to ensure these laws are met. For example, Citibank in collaboration with the German National Railway made an agreement to collectively launch the largest German credit card offering. In order to get approval the two firms had to negotiate for six months to institute numerous privacy protections to satisfy the new privacy directive. Another example is that Anitha Bondestam, the Swedish privacy watchdog instructed American Airlines to delete all health and medical details on Swedish passengers after each flight unless ‘explicit consent’ was given.

Be Mindful of small details

A successfully localized website is one that appears to have been developed locally, even when it wasn’t. Since localization mistakes and oversights can be awkward for website users and potentially embarrassing for the company, ensure you get it right. The last thing any company wants is to turn away potential customers from its website before those visitors ever have a chance to experience the product or service. Generally speaking, website localization means giving some extra attention to things like:

  • Dates: Be mindful of date formats used (DD/MM/YYYY vs. MM/DD/YYYY)
  • Time: 12-hour vs. 24-hour time.
  • Currency: Pay attention to conversions and formats.
  • Phone Numbers: Formats are different around the world.
  • National Holidays: Holidays are country and region specific.
  • Metric Units : Be mindful of the metric units being used in that country
  • Website Language Codes: ISO codes are important to know.

Also be mindful of details such as how consumers in your target country access your site. An excellent example is how Facebook customizes its tagline depending upon its target country. The English page says, “Facebook helps you connect and share with the people in your life.” The Japanese page says, “Using Facebook, you can connect with friends, colleagues and classmates to deepen your connections. Also access Facebook from cell phones and smartphones.”

The thing to notice is that the Japanese page mentions users can access the site with phones, but the English page doesn’t. This is perhaps because this study 95% of the Japanese population is mobile subscribers. To quote the study:

Japan has 125 million mobile subscribers (95 percent of the population), of these 103 million (84 percent of mobile users) are mobile Internet subscribers

Conclusion

In closing, there is significant research done on the best practices to following while doing localization on a site. Ensure that you pursue all the research that is available before jumping into a localization problem and follow the best practices recommended to ensure there is little or no embarrassment when the site launches thus driving your site towards greater globalization.

 

About these ads
Tagged

One thought on “How to design a site for international audiences

  1. Bharath says:

    Nice article indeed ! The importance of localization explained by taking McD as as example is simple and thoughtful ! :)
    Keep up the good work !

    Bharath

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: