Don’t Alienate Your User: A Primer for Internationalisation & Localisation

Published

The web should be an inclusive place for anyone to be able to learn, no matter their background or location. However, despite global reach, a huge part of the web is only tailored for western audiences – 52% of all websites are in English, and of the 4.72 billion internet users, only 25.9% are English-speaking.

That’s a lot of the world missing out on our writing, just because it’s in a language they don’t know. For educational content, this puts a lot of people at a disadvantage. As highlighted by inventor of the web, Tim Berners-Lee in W3Cs Internationalisation Initiative – we need to do more:

The key thing about the Web is that it is universal. One of the most important actions taken at the start – to make sure the Web was for everyone – was Internationalisation.

Tim Berners-Lee, inventor of the Web – W3C

There is a lot we can do as designers and developers to make sure our websites and products are welcoming and understandable for wider audiences. The best place to start, as highlighted by Berners-Lee, is with the two core concepts: internationalisation and localisation.

Definitions for Internernationalisation and Localalisation. Internationalisation: Designing a product in a way that enables future adaptations for different languages and regions without engineering changes. Localisation: The process of adapting existing software for a different market or region by adding locale-specific features and text.
Prototypr Dictionary: Internationalisation and Localisation

To start with a mental model, internationalisation lays the groundwork that enables localisation. This article will break both these terms down, and then take a look at the role that cultural norms play.

🌐 Internationalisation

Often abbreviated as i18n, with ‘18’ being the number of letters between i and n, internationalisation is the process of designing software so that it can be adapted to a wide spectrum of regional characteristics, languages, and technical specifications.

Internationalization is creating global-ready code. Without it, your content can’t be localized without writing additional code.

Alexander Pereverzevs, Lokalise

Without taking internationalisation into account in the early stages, localising your site later on will be much more difficult – ultimately leading to having to re-engineer your product.

This is a more of a technical requirement, but as designers, you can advocate that a website can support different types of content, depending on the audience. Being aware of what is needed can help ensure your project can be localised.

Tips for Internationlisation

According to W3C guidelines, a website can be primed for internationalisation by optimising as follows:

Internationalisation Technique Example/Links
Allow for text expansion and resizing, and bidirectional text
Button with 'Buy Now' text, in English, Spanish, and French
Different languages have different word lengths
Support alternative calendars, and names in native and transliterated forms
Graphic illustrating order of words between English and Hindi.
Order of words can change across languages (Image source: w3.org)
Have Unicode support 🔖 Unicode and Internationalization Primer for the Uninitiated
Use descriptive variable names Hello {firstname_lastname} will be far more useful than Hello {0} 

Informative variable names where language translation occurs will help future developers internationalise consistently

Don’t concatenate strings in your code* 🔖 How to concatenate localized strings mindfully

🔖 Internationalization & Localization Tips – Concatenation

See a full set of internationalisation guidelines here.

🌟 Don’t Concatenate: Translations are not a word-by-word replacement

To find our why concatenation is not your friend, read Internationalization & Localization Tips – Concatenation by localisation expert Daniel Neumann. As Daniel explains, translations are not a word-by-word replacement. Take the following example phrase:

Jane liked/commented on your article, Internationalisation Tips.

The above phrase can be created programatically depending on the action taken by users, so the words in bold could be concatenated by the developer, leading to issues:

  • “Your”, in Spanish, could be translated as “su” or “suyo”
  • “Liked” can be participle or past tense, so may not translate the same across languages.
  • “Article” can either be verb or noun, and can translate differently depending on the target language.

Essentially, internationalisation lays the foundation for localisation.

In all, your code can use techniques that make it global-ready, so it’s not constrained to one language. This is seen with concatenation above, but another may be to leverage libraries when outputting dates, times, and currencies. For example, moment.js can convert dates and times to the correct locale depending on who’s visiting your site.

decorative section divider

📍 Localisation

If internationalisation is designing your software so that it can be adapted for a wider audience, then localisation is the actual process of adapting for said audience. Localisation is often abbreviated to ‘l10n’ because, you guessed it, there are 10 letters between the l and n.

The following image adapted from John Saito demonstrates how design details can get lost in translation. The subtitles on the video can’t be understood by English-only readers:

A phone mockup displaying a welcome screen with text: Welcome. sign in and chat with 100s of people. And a video taking up the top half of the mockup, with Arabic subtitles
Adapted from John Saito, demonstrating how design details can get lost in translation.

So in the internationalisation leg of the procedure, you may include a markup in your code that allows for right to left (RTL) or vertical text. During localisation, you’ll then deal with the translation of the user interface for your intended audience(s).

People who come from different cultures and use different languages work to make sure that all kinds of languages, whether read from left or right, can be shared and used on the Web.

Tim Berners-Lee, inventor of the Web – W3C

It’s not just language that often doesn’t translate well, but features too. Say your mother tongue is Arabic, Urdu, or any of the other 12 languages that are traditionally written RTL – translation of a website alone is not enough (or sometimes even possible) without the software’s ability to support bidirectional text in the first place.

‘Mirroring’ and RTL Reading

When designing, this is commonly referred to as ‘mirroring’. Here, the reading pattern starts from the top right, and zig-zags, affecting where you place CTAs, image progressions, and product colocation, in contrast to the western F pattern of reading.

RTL layout for twitter - a 'zigzag' reading pattern is used, starting from the top right.
RTL layout for twitter – a ‘zigzag’ reading pattern is used, starting from the top right.

More Localisation Tips:

Localisation Technique Example/Links
Numerical formats (e.g. currency, date & time)
Screenshot of 2 Facebook Signup screens side by side, highlighting the change in date layout between English and French
Content layout remains the same, but date formats are customised for the region – English vs French (click to enlarge)

Legal specifications for a particular region GDPR notices in Europe became a requirement for sites collecting user information
Adapting the UI with cultural sensitivities in mind Removal of images/text that may have different, negative, connotations in another jurisdiction – or that may even be illegal!
A table of emojis showing 2 different meanings. Hand rock emoji = Rock on/Infidelity. Okay hand sign emoji= OK/middle finger. Clapping emoji = appreciation/making love
Emojis can carry different meanings (click to enlarge)

Regional language or spelling (BrE/AmE), and cultural-appropriate tone 🔖 Localisation and Translation on the Web
Multilingual SEO 🔖 Multilingual SEO best practices

🔖 SEO tips for your multilingual website

Understanding and preparing for various cultural nuances helps you serve more people around the world, and from a business perspective, it can also give you a competitive international edge. In addition to increasing the availability of information, it’s also no longer an option not to have internationalisation; without the ability to localise your website later down the line, you could be alienating potential users, reducing your reach, and increasing your dropoff rate.

decorative section divider

Designing and building for wider cultural norms

On a podcast by ShopTalk Show, technical writer Rachel Andrews talks about editing work for an international audience: “One of the things you learn…is the number of things that are completely baffling outside of your own culture.” For example, according to Hofstede’s country comparison tool Chinese and US users differ massively in individualism, indulgence and power:

Bar chart of US vs China, showing cultural differences.
Hofstede’s country comparison tool for China and the US

What makes sense in one culture or region doesn’t necessarily in the next; with localisation, your aim is to address their specific needs and queries. You don’t just want a word-for-word translated product, you want your content to be understood as it was intended.

Be Culturally Concious

What should we be culturally conscious about when designing? Some standout examples include:

  • 🇨🇳 China API Access: Many APIs (such as Google) are blocked in China
  • 🇯🇵 🇪🇬 Japan/Egypt = RTL: Text direction (vertical/RTL) differs, and so the layout of your text, as well as your content (logos, navigation etc.), should take this into account
BBC's website navigation bar, shown twice - once in English (LTR text), and the same one but in Arabic (RTL text).
BBC English LTR layout vs BBC Arabic RTL layout
  • 🎨 Eastern Bloc Colour Association: The colour red can still stir up associations with communism (and, in Latin America, the colour yellow is linked to death and mourning)
  • 🍔 China Discover Button: on mobile apps, a ‘discover’ button is used instead of the western’s Hamburger button.

Discover is the new hamburger menu where, instead of this hamburger menu, you see an icon of a compass and that’s appearing in most of the popular Chinese apps. Jenny Shen

The more your product caters for cultural preferences, the more likely people will engage with it. So where to begin? If you’re a one-man-band, this can be quite a feat, but you could start by researching “cultural considerations when building a website in [country name here]”, for example.

Better still, bring someone onto your team who is from/has some experience working in that particular area, and who will be able to let you in on the ins and outs of the region and identify potential issues before they snowball.

And best of all, get someone/a group of people to beta test your app:

I think the design of WeChat is really usable. . . when I started to use Facebook Messenger I thought it was really hard…WeChat has more functions than messaging. . .

I don’t know why I can’t open messaging (directly) on Facebook, when I click the icon it takes me from Facebook to Messenger and it’s annoying.
ResearchGate.net

For more on cultural norms, check out this article from Jenny Shen: UX Design Across Different Cultures — Part 1 | by Jenny Shen | Prototypr.

decorative section divider

TL;DR

Internationalisation (i18n) paves the way for localisation (l10n). Lack of internationalisation at the start can = regrets at the end. By forfeiting your ability to adapt your product for a wide range of regional requirements, you’re limiting its potential pool of users. Not to mention wasting valuable time (and in some cases, money) unpicking and relaying the foundations of your design.

So add those markers, enable that code, and thank yourself (and me) later.

* * *

Useful links: