By Savitha Nayak

Introduction

Designing for global audience requires us being aware of certain essential dynamics of scale, diversity, and sophistication. Here are the top UI design guidelines or heuristics about how best to design for multilingual and multi-device user interfaces. And also contains important design cues relevant to various screen resolutions. These guidelines could help in ensuring uniform UI look across devices.

Design Guidelines for Multilingual Interfaces

1. Global design template: When designing for global audiences, ensure that you create a global template with sufficient customization options for font specifications, line length, and color to provide uniform user experience on all your sites and to make it simple for users to search for the same information.

This calls for maintaining the design style sheets separate from the content. This technique of slotting the localized content into the same design template frees up the time, effort, costs involved in improvising the look across the multilingual sites.

2. International spirit and local look: Users trust the sites that have local or national appeal. Studies from Asian countries, Germany, the UK prove that they choose the local versions of international brands. For example, consider registering with a local domain name for your website.
3. Right name: The choice of website name becomes crucial when it scales geographies. For example, a linguistic faux pas occurred when Coca Cola was launched in China. The name was first rendered as ‘Ke-ke-ken-la’, which the company discovered that it meant, ‘bite the wax tadpole’. Therefore, due care is essential when choosing a name for your site.
4. Text expansion and contraction: The site design needs to be flexible to variations in text length owing to text expansion and contraction. For example, Chinese, Japanese, Persian use larger font sizes than English, French, German, and so on. The recommended practice is to set a goal of 35 percent expansion to safely design for any target language.

Source: http://www.accorhotels.com/gb/india/index.shtml

Similar to the above, the design of the website needs to adapt to the length of words. For example, the word ‘search’ takes up 10 characters in French but only two characters in Japanese.

5. Navigation: When considering multilingual website design, some languages can force-move the navigation bars or alter entrance pages. Make sure that the layout is optimized for such language adjustments. This also requires ensuring that the option for choosing a language is highly visible and available at the beginning of the site page.

6. Graphics: The UX/ UI designer requires using only culturally relevant images as they have different connotations depending on the people culture. A thumbs up sign can mean “okay” in the western world but it is more likely to mean ‘man’ or ‘male’ in Japan. The designer also requires ensuring the alternate text displays correctly in the target user language.

Avoid heavy graphics or flash elements that will slow the loading time on international servers.

7. Text direction: If your site caters to languages written from right-to -left and left-to-right, make sure that the layout design is compatible with the text alignment of the language. For example, the United Nations website adapts its layout for the Arabic language, which is written from right-to-left.

Source: http://www.nomensa.com/blog/2010/7-tips-and-techniques-for-multi-lingual-website-accessibility

8. Interface preferences: The proposed design needs to fittingly meet the requirements of optimized content for different languages and devices. For example, some nationals prefer minimalistic web interfaces with simple task-oriented user experiences; others prefer busy interfaces with lots of options and content.

Source:http://fransgaard.com/what-responsive-design-brings-to-multi-lingual-interfaces/

9. Colors: This seemingly small consideration has serious differences in interpretation. The website design needs to reflect the cultural differences. For example, green color has religious connotations in Islamic countries, whereas it is associated with environment in Western cultures. Designers are also aware that different colors can have a psychological effect on the people viewing them.

10. Formats: When the users are spread across the globe, it becomes necessary to ensure that the format for currencies, units of measurement, time and dates are correctly represented based on the country’s usage.

Design Guidelines for Multi-device Interfaces

1. Design choice:Evaluate performance – a key factor in the initial stages of design process.
2. Branding: Ensure consistent look and feel, and content that resonates the company brand and business strategy.
3. User centric: Ensure that the functions provide users the ‘in my control’ feel, and is based on web and device policies.
4. Information architecture:
   1. Categorize the primary and secondary navigation options, logically, with supportive cues, such as breadcrumbs and navigation links, buttons.
   2. Build less hierarchy, more distinct categories, proper labels, and apply device interaction patterns.
5. Conventions:
   1. Use simple and clean interfaces – easy to understand, use, and remember.
   2. Maintain minimum size of (44 x 22 pixel) for the tap area.
   3. Allow 12-pixel gap separating one tap object and another.
6. UI flows: Bridge the gap between user input and system output by progress notifications, meaningful tips, animations, and so on without, however, disrupting the user’s workflow.
   1. Elements: Achieve a sensible mix of the number and type of UI elements, their size, resolution, and depth considering loading and behavior. Avoid full size images and strike a balance between quality and load time.
7. Efficiency: Prioritize and optimize features, enhance the mobile device functionality capabilities.
8. Responsive, adaptive plan: Optimize a single site across devices for ease of tracking and monitoring a single URL, and for consistent user experience. Go for minimal design while ensuring usability for different resolutions and devices.
9. Typography: Considering readability and easing vertical scrolls, ensure:
   1. The font style holds 35-50 characters in a line. The typefaces are regular sans serif with even strokes.
   2. Line-spacing are upwards of 150 per cent of the point size for content-intensive pages.
10. UI scaling:
    1. Need to scale all the UI elements, such as the background, header, and footer. List images to bigger screen sizes by using the standard size of one device per platform.
    3. Avoid pop-ups, notifications, and advertisements, and minimize the number of pages.

In conclusion, the proposed UX and UI design solution needs to factor-in and help deliver a complex mixture of device-specific, language-specific, and region-specific content, while creating a unique and tailored user experience for the individual.

About the author: Savitha Nayak is a Content Architect, Infosys Limited.