“How to Design a Site for International Audiences” – Part 2

This is the second part of the series: “How to Design a Site for International Audiences”, which will deal with country specific design patterns and design flexible layouts to account for language compatibility.

While in Part 1, we mentioned the significance and impact of color in designing for international audiences, Color is not the only attribute which is country specific. Countries also have design specific constraints which must be evaluated.

Understand Country Specific Design Patterns

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.

ImageScreenshot 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.

Image

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(RTL) 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:

Image

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 occured, 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

Image

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.

To read the first part, which focuses on importance of Unicode and understand the cultural symbols and their symbolic meanings and the significance of color, click here.

Third part will follow soon.

 

Lead UX Program Manager

Mervin F Johnsingh

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