User Interface localisation will give you a big boost in your reach as well as your sales potential, conversion rates and customer retention.
If you want to reach audiences who speak different languages and – most importantly – hail from different cultures, localising your UI is the only way to do it.
Some of the largest and smartest brands in the world go even further:
They localise their social media and content too. That’s because all of the data shows that the Return On Investment localisation offers is huge – not to mention the chance it offers to develop a competitive global market presence.
For now, let’s start with the essentials. Here’s how to design a localisation-friendly User Interface:
Internationalisation and localisation are not just translation
Translation is the almost direct transportation of words from one language into another.
Getting a straightforward translation of your UI will almost certainly leave you with text which is distant and foreign-sounding to the native eye – as well as design elements and usability which can be confusing or contradictory to a native audience.
On the other hand, internationalisation and localisation are two parts of a much more effective process of adapting your UI for people who speak different languages and who are from different cultures:
- Internationalisation – sometimes abbreviated as I18N (“I” then 18 letters then “N”) is the part of the process which lays the groundwork for localisation, meaning a product can be easily adapted later on.
- Localisation – sometimes abbreviated as L10N (“L” then 10 letters then “N”) is much easier after a product has been internationalised. Localisation creates a culture and language-specific version of a product which looks and feels natural to a native eye.
Representing languages – the difference between language and culture
There is a simple example which shows the importance of localisation and the differences between language, region and culture which it is always worth bearing in mind:
Do you remember how many websites used to represent the choice of languages on offer with a small selection of flags?
Not many do it any more. That’s because languages aren’t directly linked to convenient lines drawn on a map. Just think about the examples of:
- English: there are significant differences between UK English (en-gb), US English (en-us) and Australian English (en-au). Only having one variant of English available (under an American flag, for instance) will instantly turn off your users from the UK.
- German: is spoken in Germany, of course. But it’s also spoken in Switzerland, Austria and many other parts of the world which have their own flags and their own dialects.
- Spanish: is spoken in 20 different countries! Each of these regions will almost certainly have their own linguistic differences. But they will also vary dramatically in terms of culture.
It only takes a moment’s thought to understand why any flag representation system for languages is a counterproductive way to go about things in terms of consumer confidence and brand reputation:
After all, you are trying to reach out to a new audience to make them feel comfortable on your website, and thus comfortable and confident enough to buy your products.
You don’t want to confuse or – even worse – offend someone by insisting they click on a flag which is not their own. Perhaps the flag is that of a country with historically poor relations with their own – in addition to having a dramatically different culture or dialect.
Modern detection methods allow you to present your UI to users in the language of their browser or ask them to confirm their language choice.
Never generalise by linking language to a certain flag. When it comes to specifics…
How to localise your UI
1) Be dynamic (in terms of layout) It’s important to remember that conveying the same message will take up different amounts of space in different languages. This is known as text expansion or, sometimes, contraction.
Remember that this can happen vertically as well as horizontally with some languages! Chinese or Japanese, for example.
This matters for your UI design. Different text lengths can play havoc if you don’t plan for them first. A dynamic layout is the way to be prepared to accommodate this.
Most modern development frameworks should allow you to set your interface window and all elements to be positioned relative to each other, rather than having fixed sizes or being set distances apart.
- Plan for text expansion: on average, text may expand by around 35% when translated into a different language. This varies by language, but should always be planned for.
- Leave plenty of blank space: if your original design has a lot of blank space, you’ll have it there to play with when creating your localised versions.
- Don’t use fixed element heights and widths: any element – from buttons to labels to menus – should be set to dynamically adjust to the text within it rather than have the text squeezed to fit.
- Adjust to size of contained elements: containers and wrappers too should dynamically adjust to the size of any elements within them rather than being of a set size.
2) Wrap text (correctly) When the length of any text expands and contracts, line wrapping plays an important role in UI design.
Its importance becomes even greater when you remember that some languages – especially character-based ones like Chinese, Japanese and Korean – do not necessarily use spaces to separate words.
This means you can’t wrap text whenever there is a space and expect your text to make sense. Standard line-break and word-wrapping algorithms can’t handle this.
Make sure you find a word segmentation algorithm which can. Preferably a linguistic knowledge-based one.
3) Flip for right-to-left languages (but don’t flip everything) Some languages – Arabic and Hebrew are two of the most commonly-spoken examples – are read from right to left instead of left to right.
In most cases, this means that you will need to flip your design. However, there are certain elements which you do not want to flip even if your target audience reads right-to-left:
- Music notation
- Video controls
- Icons which do not indicate direction. Icons like “back” buttons – which do indicate direction – should be mirrored.
Most modern development frameworks have mirroring capabilities built-in. This makes it easier to adapt to right-to-left languages than ever before – as do libraries like the open-source RTLCSS which reverses CSS rules for you.
The final step – as with all localisation – should be to have a native speaker from your target audience review your final UI design to ensure it makes sense for a right-to-left user.
4) Select the best multilingual font You may have gone to a great deal of effort to select a font for your UI which matches your branding.
However, very few fonts support all languages. This means that your thematic, attractive font may not be a good choice for your localisation efforts (unless you’re a fan of those little empty boxes which indicate the system doesn’t know what to display).
That said, by simply choosing a different font which has little in common with your original choice, you can end up with an inconsistent international brand.
This is where internationalisation – planning for your later localisation – comes in…
By selecting a font which supports all of the languages you think you may localise into later, you’ll make it easier to retain the look and feel of your brand across language borders. At the start, you might want to:
- Choose a Unicode-compliant font – and check that it supports your selected languages
- Plan to allow the conversion of text data globally
- Consider Google Noto Fonts (these are designed to be universal)
- Use a dynamic layout where font size can be adapted to provide readability in different languages
5) Be flexible (with your fields) It’s surprising how much the simplest-sounding localisation measures can make your audience feel right at home when browsing your UI.
Think for a moment about the sheer variety of names a person might have. Although it might seem like fields for given name and family name make sense in many parts of the world. Don’t forget there are many cultures where:
- Family names come before given name
- The traditional western idea of family names and given names doesn’t exist
- Family names might change depending on the gender of the person (even in married couples)
- Patronymics and metronymics exist
- Prepositions (such as “de”, “da”, “von”, “van der” and so on) exist
Many UI designers might be tempted to tailor the fields you offer for something like name entry to each individual culture. This is a perfectly reasonable, if potentially time-intensive, approach.
But why not simply offer a single combined field for the name and allow users to input theirs as they please?
The same is true for addresses and titles. In the case of the latter, the simple questions “what shall we call you?” or “how do you like to be addressed?” and a blank field are massive time-savers.
6) Adapt numbers as well as words Seeing dates and other numerical values in an unfamiliar format can be confusing for users. The simplest example is probably the difference between British English and American English date conventions:
MM/ DD/ YY is normal for the US, while the UK favours DD/ MM/ YY. Mismanagement of these numbers could result in serious misunderstandings – as well as a disconnect with your users if the mistake makes it difficult to grasp information at a glance.
Some of the numbers which you need to ensure are presented as expected for your specific target cultures include:
- Time units
- Price and currency formats (remember that separators like decimal points and commas are not universal and that readers may naturally expect a currency symbol to be placed before or after the value)
- Imperial vs metric units of measurement
- Phone numbers
7) Don’t embed text Rarely will embedding text in your image provide any sort of value you can’t achieve by placing it elsewhere.
Embedded text also creates serious problems for your UI design team. They’ll need to create a different image for every language – a huge time sink.
This is particularly true when you consider that many images you use may themselves need to be localised.
- This might either be so that they are more engaging to local people by including local landmarks or people in more typical local attire or situations.
- Or it might be to avoid causing inadvertent offence by displaying imagery which doesn’t convey the same message to your local audience.
If you absolutely must embed text in your images, use text in code so that it can be adapted via set values.
8) Sort smart (and sort for each audience) Probably the most common way to sort data in a language like English is alphabetically. Unfortunately, this either doesn’t make sense to do or isn’t possible in every language.
Most languages will have their own expected ways of sorting data. Make sure you know what they are for those languages and cultures you are targeting.
9) Be truly symbolic (by properly localising your icons) While some symbols might be universal, some symbols and icons only seem as if they are…
For example, in some parts of Asia, the “gear” or “cog” icon usually intended to mean “settings” in the west is used to identify something else. Likewise, the “tick” symbol does not necessarily mean “correct” or “complete”.
This makes checking that your symbols and icons convey the correct at-a-glance message a vital part of your User Interface localisation.
- Consult the ISO (International Organisation for Standardisation) list to see which symbols and icons are truly universal
- If you want to use your own labels, consider defining them
10) Stay legal It may sound like an obvious point, yet it’s important not to forget that different regions may have different legal requirements.
Following these is, of course, vital. But they may impact your user flow and must be planned for. Consider:
- Privacy rules (such as GDPR in Europe)
- Payment steps
- Return policies
User Interface localisation – getting help from the experts
Like everything when it comes to localisation, your User Interface design should always be reviewed and rigorously tested by a native-speaking linguist before you put it in front of your audience.
If you don’t have your own in-house translation team, your Language Service Provider will be your greatest strength here. Be sure that yours uses native language specialists:
No one else is truly in a position to understand exactly what a person from that culture will expect in terms of the functionality and design of your UI.
Armed with a native-speaking expert and the User Interface localisation tips in this article, you’ll soon be well on the way to expanding your reach, sales potential and conversion rates…
As well as benefiting from all of the other advantages which come along with properly adapting your UI for audiences from different cultures.
Are you planning to internationalise or localise your UI?
Asian Absolute helps companies of all sizes adapt their User Interface to be easily understood and used by audiences in more than 120 languages and untold different cultures.
Get in touch with us to learn more or get a free quote on your next localisation project 24/7.