May 2013
By Alberto Ferreira

Image: © Oleksiy/ 123rf.com

Alberto Ferreira is a localization project manager with over five years of experience and key interests in usability and content optimization technologies and processes. A regular conference speaker and coach, he has lead a complete corporate-level data migration and PM system implementation project and is currently coordinating an internal MT implementation project for Avira Operations GmbH.


alberto.viralhadas[at]gmail.com
https://twitter.com/AViralhadas


 

Unique but universal: Localizing user interfaces

Successful user interfaces, websites and apps owe their glamour to a combination of captivating text and eye-catching visuals. However, what attracts users in one locale, might appear bland or even offensive in another. So what makes a great, localized user interface?

Let’s imagine that you have designed a wonderful website with good functionality. It speaks directly to the user, it is informal and straight to the point. Your layout and design are impressive, harmonious, arresting. There is only one thing between you and global success: language. Your navigation bar is not adaptable to Chinese, your intuititive slide-down pages do not conform with right-to-left scripts, and your catchy titles are lost in translation.

As an essential component of human-centered design, user experience (UX) is often defined as the set of emotional and evaluative perceptions and responses that a user goes through while interacting with a given user interface (UI).

The ISO 9241-210 norm defines UX as “a person's perceptions and responses that result from the use or anticipated use of a product, system or service”. Broad in its target, the psychological implications of this definition are nevertheless clear: UX is less a well-defined discipline than the combined sum of the user’s emotional response to a specific product. A typical user is not looking for the color scheme details of an app’s interface or interested in the harmonious streamlining of the checkout feature in a website: only the full, integrated experience matters. And, for the user, the product is only as good as its experience.

With appropriate metrics and an integrated perspective on product development, UX can help to differentiate a brand and maintain its identity by promoting improved usability and a greater adequacy to the user’s actual needs.

A design-oriented company stands a better chance of creating products that are not prone to feature-creep while remaining usable and attractive. As a result support costs are reduced and customers are more satisfied. As an example, McAfee reported a 90% decrease of support calls after refactoring their user interface. After consolidation and establishing proper searching tools geared towards better accessibility, IBM’s complex internal information network acceptance improved exponentially.

A lot of Google’s and Apple’s success is owed to design. Interface minimalism and optimization with only what is required for the user’s most common goals constituted the basis for sound success. These principles remained consistent between different locales, thereby maintaining the brand identity, regardless of the target language.

Is localization part of the UX?

This question actually incorporates two different aspects: Should internationalization be taken into account during the design stage and does localization impact the overall effect of a product’s UX?

The answer is, obviously, yes. Text is an essential part of a complete multimedia system that includes image and text. Visually and linguistically, text plays a major role in the user’s perception of a product.

The most refined and sophisticated UX can be wrecked by careless localization and haunted by issues and bugs. Fonts are lost, carefully complimentary labels suddenly appear juxtaposed, HTML is improperly adapted to target locales.

Therefore, internationalization is key to a consistent user experience in a multilingual product. Internationalization defines the set of processes and techniques that are implicated in making a product capable of adaptation to different cultures. This is where UX implementation is at its trickiest.

No sound internationalization-friendly design can be adequately implemented without an accurate study of localization prioritization. Define which languages and cultures you want to localize into and include both immediate priorities and future plans. This will enable you to optimize layouts for culturally-sensitive graphics and indications or – optimally – to change requirements in the light of new market strategies.

It is hard enough to achieve an optimal combination of consistent layout and sound text in any locale. Adapting a carefully laid out interface and its content to other target cultures requires thorough considerations with regards to branding and visual aspect.

A common misconception of localization associates it primarily with translation management of assets that are, to a very fixed degree, already established. However, incorporating localization already during the earliest design stages will lead to websites that are bound to offering a more direct user experience.

TL; DR (Too long, didn’t read) – Text and terminology

If you are familiar with Reddit’s lingo (or indeed any forum, particularly of a technical nature), you know that verbosity and propensity are usually dismissed with desponent disinterest, peppered with sarcasm. Most users take a similar stance when using a website or software application that is too fond of text for its own good.

It is not just laziness that drives most users to avoid interacting with overlong texts. In evolutionary terms, although oral language evolved over two million years, the first written symbols date from only 3500 BC, and the first alphabetic records date from 1000 BC. During our cognitive evolution, language became a natural skill, but writing appeared long after our basic brain structures were already in place. Therefore, unlike oral language acquisition, reading and writing are not innate skills in infants and have to be learned.

Since literacy is individually variable, and users typically want to avoid as much effort as possible, clarity is key for user acceptance and retention. A localized version of a product can emphasize functionality by upholding the following criteria in the master locale:

  • Use consistent, simple, and task-focused terminology.
  •  Use plain language (in advanced workflows, this can entail implementing Simplified English).
  •  Idiomatic expressions should be conceptualized and consistent (e.g. interjections, expressions, proverbs should be tagged as such and used in a consistent context).
  •  Avoid incomprehensible technical jargon.
  •  Avoid excessive wordiness. Use primarily short sentences with only one or two phrases.
  • Avoid repetitive text and branding on the same window (e.g. having the company name on logos and in-context messages in the same screen).
  • Use capitalization to clearly structure your on-screen content (e.g. use title case in the main title, but only sentence case for subtitles).


Keep in mind that reading on-screen is more wearisome on the eyes and takes almost twice as long as reading on paper. Therefore text density also plays a role in providing visual comfort for reading. Depending on the resolution, short lines with a maximum of 80 characters are a good rule of thumb.



Image 1: A quirkily structured website generates navigation distrust while a linearly structured design makes it easier to gather and identify information.



Affinity, tone and humanizing

Everything we interact with generates a specific emotion suitable to reinforcement or repression. Regardless of culture, users are emotionally affected by the register and tone of the text. When adapting a product to international markets, keep in mind the four ‘R’ principles:

  • responsiveness: provide feedback and ensure that the functionality is in accordance with the user’s actions.
  • respect: guide your users without being patronizing or smug about it (e.g. artificially escalating error messages and providing adequate feedback for user actions).
  • relatable: the in-product text should have a unique voice and register. This does not entail a mascot or a fictional character (like the infamous Microsoft Office clip), but rather a direct addressing of the user by a unified subject. In other words, keep usage of pronouns consistent (e.g. “we have found an error…” instead of “<company name> has found an error…”)
  • relevance: localization-optimized UX keeps the master locale in line with user goals, therefore avoiding excessive and redundant information.

 

Typography and visual perception

“Graphic design is a form of translation.” – Simon Johnston

The way different elements are perceived on screen, the harmony of the design, responsiveness and overall look can generate deep emotional responses that can range from frustration to pleasure. The way visual elements are perceived and interpreted by the brain and the effect that these elements have on our emotions plays a decisive role in our appreciation of whether a given product or website is attractive or not - and whether we will continue to use it. On the other hand, proper functionality and expandability can sometimes be pushed to the backseat to emphasize minimalism and usabilty.

The aesthetic value of a consistent and easily-accessible interface is essential, and text plays a decisive role in this. Its placement, layout and aesthetic are vital components of a successful UX strategy and often are the most determinant factors in conversion rate and customer base growth. Visible information – on the other hand – should be sparse, clear, concise and used in a relevant way. In this context, digital typography plays a major role in UX localization, as its proper implementation can provide users with an appealing combination of aesthetic appeal and usability.

A good UX-oriented interface uses typography smartly. Text placement, layout and typographical arrangement are essential parts of the equation. Weight and scale are just two of the aspects that should be privileged.



Image 2: The use of wide-font catchy mottos and clear titling and subtitling are essential to convey a sound information structure and capture the user’s eye.

The way the text is printed on-screen carries deep semantic implications for its meaning. Common fonts used in modern Western scripts are mostly based on sans-serif fonts. Serifs (aesthetic projections of letters meant to underscore their limits) were progressively eliminated from characters in order to save ink on printing. Also, sans-serif characters are easier to read in pages where there is a large density of text. Text design, such as the choice of font, can influence the user’s interpretation directly. For example, Irish pubs worth their salt might have a sign with a Celtic font. This has cultural implications and is meant to provide a sense of familiarity. The same can be applied to websites with a strong cultural appeal.

When adapting a UX pattern into other languages, particular attention should be paid to the following items:

Avoid widows and orphans. Widows are single words at the end of lines, while orphans are single lines of a paragraph at the top of a column. These break text flow and compromise a harmonious look and feel.

Ensure kerning, tracking and leading are aesthetically sound. Regardless of the target script, ensure that kerning (the distance between characters) and leading (distance between lines) remains consistent in different target cultures. Right-to-left scripts such as Arabic or special pictographic languages such as Chinese often require leading adjustment as text density can increase dramatically.

Avoid centered text. Because of its variable margins, centered text gives a feeling of discontinuity.

Use grids as aids for localized layouts. A webpage or a desktop application layout can have an arrangement and layout adaptation facilitated by using a grid to visualize margins and limits in a clearer way.



Figure 3: A grid system is essential when adapting a layout to different locales. Source: www.designer-daily.com/the-use-of-grids-in-website-design-6639


Embrace multicultural UX patterns

While standard UI patterns can generally be reused between different cultures, the way that these are perceived will change according to the target culture.
Cultural differences need to be accounted for when refactoring graphics and, most especially, when adapting text. For instance, while headings are often the primary focus of interest for most European countries and the USA, an element’s context and background perception are much more important for Japanese.

Several eye-tracking studies have shown that the typical user follows an ‘F’ path while browsing pages for information. Similar principles have influenced design and should be taken into account for UX localization: for European and American markets, keep the most relevant information or interaction options to the top and left side of the page. For Asian cultures, text can be more disseminated throughout the dialog or page.

Eye-tracking study regarding an American scan of a Google results page
Chinese scan of the results.
Source: http://searchengineland.com/chinese-eye-tracking-study-baidu-vs-google-11477


Be careful with color

This includes text coloring. As stated by the Institute for Color Research, we establish our opinions about a “person, environment, or item within 90 seconds of initial viewing, and between 62% and 90% is based on color alone”. Do not assume that black will be the primary choice for text color, as even hyperlinking (typically blue) can change the look and feel of a text in context.

Build an idiomatic lexicon

Terminology accuracy is essential to achieve technical consistency across multiple languages. However, colloquial expressions and idioms are a great way to capture your readers’ interest. There is no better way to call on users’ affections than to use idioms, proverbs and other figures of speech, which are often very cultural-specific, and even specific to different regions or dialects.
For that reason, the translation of sentences like the following can prove difficult:

“If you have any questions, be sure to drop us a line” or
“Subscribe and we will help you keep an eye out for new offers.”

Proper transcreation cannot rely solely on the translator’s arbitrary choices and tastes, and should instead be adapted to the desired locale by the use of a style guide and, ideally, consistent terminology usage. Do not ignore the decisive role that this consistency can play in SEO as well.

Keep it simple

While pretty to look at, most complex interfaces with heavy use of graphics are typically more confusing than impressive when actually used in a productive setting. Consistency and simplicity pave the way for a smooth locale-independent source that can be then implemented in other locales. The modern return to basics with an emphasis on typography and minimalistic, sparse backgrounds and layouts is not a passing fad: adaptation into different devices and cross-platform rendering is made much easier with this arrangement.

Allow room for inference

While text can be used effectively in guiding the user towards specific points of interest, let users figure out the score by using visual cues and inference points. Users can interpret subtleties of speech more clearly if they are not buried under a torrent of text. For instance, when suggesting that a user introduced a password incorrectly and that the password is case-sensitive, it is redundant to tell the user explicitly to check the Caps Lock key. A much more user-friendly way to resolve this is to provide a pop-up while writing the password that notifies the user that the key is active.