Designing a Localization-Friendly User Interface: Managing Locale Specific Content (Part 2)

Continuing from our previous post about designing a localization-friendly user interface, we wanted to share insight about managing locale specific content. We’ve also opened up the comment section so feel free to share your stories relating to the early stages of application design and localization.

Identify and Plan for Locale Specific Variations

There are a number of locale specific variations that must be addressed in the user interface so your users can connect with your software in a language and locale that feels native to them. These include:

Calendar, Date, Time, Currency and Numbers

Numerical data, such as date, time, and currency, as well as calendar-related events, are displayed differently from language to language. When users arrive at your website or use your application, the last thing they want to do is convert prices into local values to make decisions. Your user-interface must be designed to display locale specific data correctly in order to offer a positive user experience.

The example below shows how based on the user’s chosen locale, calendar and currency are displayed. In this example, it is achieved by defining language specific javascript.

Sorting Rules for Different Languages

Languages have their own sorting rules, so if your application’s user interface displays data in a sorted view, it should be in a locale-aware manner. This implies that the proper locale must be passed to the “sort” API used by your application and the sorting algorithm should handle locale specific rules. For instance, your menu items, if sorted alphabetically, may not hold the same value for all languages. It would be better if you have them sorted by functionality.

The below examples will help you understand how different sorting rules followed by different locales can affect your application.

Example 1: An application that sorts the names Ändrè and Andrew produces different results depending on the locale.
German: Ändrè is at the beginning
Swedish: Andrew is first

Example 2: Sorting is even more complicated in Japanese since it has thousands of characters and four different types of written characters. The special nature of kanji characters and their pronunciations make it extremely hard if not impossible to sort accurately. It is not possible to digitally guess the pronunciation, so it is a good idea to ask the user for the pronunciation. You will find that most of the software applications in Japanese adopt this approach.

The snapshots below show how amazon.com addresses this issue in the Japanese version of their website. In their new user registration form, there is an additional field for Japanese which captures the pronunciation in katakana for the name field from the user. With the kanji name and the correct pronunciation, it becomes easier to sort the user information in Japanese.

Icons and Imaging

Icons may hold different meanings in different cultures. Icons that are accepted in a certain culture may even be offensive in another, so design should aim to include universally understood and accepted icons wherever possible.

You could choose to localize icons for every target locale (culture) or internationalize them by restricting your icon usage to universal symbols. The icons in the example below have become standards because of their widespread usage, but are not necessarily approved or licensed by an international committee.

There are a few icons standardized by the ISO and you can find them under their user interface standards.

Images with Embedded Text

When localizing content, one of the most commonly overlooked texts are those embedded within images. To ensure that the embedded text is not displayed in the source language, and instead in the language of the user, use as little embedded text as possible. If you must have text embedded within images, using SVG files for your graphics may come in handy because SVG supports text that can be easily localized.

SVG files are XML, which makes the text strings embedded within the graphics to be easily accessed for translation using XSLT. Since XLIFF files are XML, the translated text strings can be assembled back into SVG files using XSLT.

Implement Responsive Design

With the increasing number of mobile users worldwide, developers are compelled to design applications and websites that can be viewed and used on a variety of mobile devices like smartphones and tablets. This necessitates design practices that allow the user interface to expand and contract in size based on the user’s screen resolution, also known by the term “Responsive Design.”

Enabling Proper Localization

The responsive design technique can complement the localization requirements of your user-interface because the goals are similar – handle fluctuations in size. When you design the UI to accommodate multiple device sizes and resolutions, your user interface is designed to be flexible for dynamic expansion and contraction. It is now becoming increasingly popular to look at “Responsive Design” as tied up with “Localizable UI Design”.

You can verify the responsiveness of your design and get a good idea of how your design looks on multiple screen sizes by using emulators and virtual machines or testing services and tools like BrowserStack where you can generate screenshots at actual device sizes. There are also community efforts available like OpenDeviceLab where you will find shared community pools of internet-connected devices for testing applications and websites.

Have other tips about designing a localization friendly user interface? Comment below or learn more about localizing your product by contacting our localization team and request a personalized demo!