A guide to UX/UI localisation

For the most part, Tundra works on websites written in English with users that are predominantly English speakers. Our design phase includes meticulously crafted content design, with English UX copy that is styled to fit perfectly into banners, cards, and various other components.

But what happens if all that English copy is translated to Mandarin, or Thai, or Hindi? Would the components still work visually? Would the translated copy make sense to native speakers of the languages? And how well will our design choices resonate with users from these regions?

As we embarked on a project with one of our long standing clients to help regionalise their AU/NZ website across their South East Asian markets, we were faced with a number of these questions. We learnt a lot about how we can refine and expand our thinking going forward with regards to multi-regional/lingual considerations.

Probably the most obvious consideration for multi-regional website design is how the typography will look. For the majority of websites, text is the most important element—after all, this is the information users are coming to the site for. Great care and effort is placed into writing quality copy, as is ensuring that it is displayed effectively with a clear hierarchy.

A key challenge that comes from multi-regional websites is how languages with very different character compositions, like English to Mandarin, are handled during the translation process from a visual perspective. For example, a hero banner that allows for 50 characters at 70px font size may look perfect in English and other Roman alphabet languages, but once these characters are translated into Kanji, the spatial difference is significant and may leave the banner looking completely unbalanced.

Another consideration is how a paragraph of translated text is handling its line breaks. In languages such as Mandarin and Japanese, the way a set of Kanji are grouped is immensely important to the meaning of that text. If a line is broken in the wrong way, it could lead to text that is no longer readable.

Font choice also needs to be considered for translated text. During a recent regionalisation project, we found that our client’s English brand font was not bold enough when translated to Thai characters, so we decided to explore other font alternatives. As we started searching, we found many font options with the distinctive loops found in Thai typography, but also a number of fonts that omitted the loops and were closer in appearance to Roman characters.

This led us down a bit of a rabbit hole in an effort to understand which style we should be using. We learnt that the loop-less fonts have become increasingly popular over the last couple of decades due to their efficiency, but are considered inaccurate and hard to read by many Thai speakers. This kind of nuanced investigation and reflection is so important when it comes to digital content translation and presentation.

This kind of discovery underscores the importance of seeking feedback from local users to ensure that your designs will test well in international markets, and are just as well considered as the original English language version.

Design checklist

• Consider the spacing and character count of key headings and content elements when translated from one language to another to ensure your design is appropriate for all language implementations
• Consider how line breaks will affect character groupings in translated languages
• Explore font options for languages with non-Roman scripts, and the cultural sensitivities surrounding this choice

The visuals of a website must be carefully considered too when designing for multiple regions. Many cultural sensitivities exist around colour and image use that outsiders to that culture may unintentionally overlook. How can we ensure a brand’s colour palette can be maintained without causing confusion or offence? How can we select imagery and icons that are relevant to cultures outside of our own experience?

We as Australian designers can comfortably choose images and icons for Australian websites that are appropriate and diverse for our culture, but it’s important to not make assumptions for other regions, and to do research into the cultural implications of colour and iconography before publishing anything.

An interesting fact we discovered during a recent project was the use of the hamburger menu icon in mobile designs. This is an icon you might assume is ubiquitous across the world, but we found that some cultures utilise a 4x4 square or a compass icon. It proves that without doing the research, you could be running blind into a design.

Design checklist

• Research the cultural implications of colour and iconography to ensure you’re making appropriate design choices across regions

The devices other regions favour should also factor into decisions made in the design process. As designers, we typically work to a minimum screen size. In recent years, this size has jumped from 320px wide to 375px as phone specs have improved, but this may not be the case in all regions. Depending on the market penetration of different phone brands in a given region, device sizes may be different to what we in Australia are used to.

Although it’s possible to source screen size usage statistics, it’s probably best to err on the side of caution and design to a lower screen size than you are used to, so that you can ensure a quality experience for all users.

Perhaps the most important technical consideration, however, is the quality of a user’s data connection. While we enjoy super fast 4 and 5G connections here in Australia, this is not always going to be the case for other regions. An image-rich experience may prove to be quite problematic to users in regions that have 3G or slower mobile connections, so designs that rely less on imagery should be considered where possible.

Design checklist

• Research device popularity in each regional market you are designing for, and design for the minimum possible screen width your users could be operating on
• Consider the data connection and speeds available in each region and ensure your designs are optimised to perform at the most common internet speeds your users will encounter

Creating experiences that are accessible to all is something we hold very close to our hearts. As we've stepped into this regionalisation journey on recent projects, we can appreciate there are many other factors that contribute to accessible experiences which go beyond what we usually account for. It’s important as designers to always look for opportunities to learn and grow, and continually keep your eyes open to new considerations and design strategies.