Internationalization
The Adaption of the user interface for potential use virtually everywhere.
Imagine you’re trying out a new app for the first time. It’s getting rave reviews from people on Twitter. They’re saying it’s brilliant. Life-changing. Delightful.
Internationalization describes designing a product in a way that it may be readily consumed across multiple countries. This process is used by companies looking to expand their global footprint beyond their own domestic market understanding consumers abroad may have different tastes or habits
To avoid running into situations like the one above, here are a few tips to keep in mind when designing for internationalization :
01 Leave Room For Longer Translations
The most common internationalization problem is not having enough space for translations.If your design includes words, make sure you have enough space to fit longer translations. If you don’t, you might end up with overlapping text or text that gets cut off. For example: Think of the label “New!” for example. In English, it’s 4 characters with the exclamation point. But in French, it’s 9 characters: “Nouveau !” That’s more than double the size of English.
Solution: One way is by using Google Spreadsheets. The function can get machine translations in a bunch of languages at once. Within seconds, you can get a rough idea of how long the translations might be in each language. Google Translate IBM’s globalization site has a useful chart that shows how much extra space is needed when translating from English:
02 Avoid Putting Text In Narrow Columns
Columns are a great way to organize your content
But what happens when the length of your text becomes unpredictable? Well, that’s what happens during translation. Your 1-line headings can grow into 2 or 3 lines, and your beautifully balanced layout can suddenly break.
A safer choice is to use wide rows instead of narrow columns. That’ll give your text more room to grow without breaking your layout.
03 Don’t Embed Text In Images
Use lines instead of text: Sometimes you don’t have to use real words to get your message across. It’s amazing what a few fuzzy lines can do
Overlay text with CSS: The text in the green circle below isn’t actually part of the image. The text was just added on top using CSS
A safer choice is to use wide rows instead of narrow columns. That’ll give your text more room to grow without breaking your layout.
04 Don’t Create Sentences With UI Elements
It’s common for designers to move different UI elements around to see which layouts work best. “Let’s put this text field over here to the right. Let’s move this dropdown to the left.”
But you’ve got to be extra careful when working with words. If you try to form sentences by combining text with buttons, boxes, or dropdowns, you’ll often end up in a lot of trouble. Instead do this :
05 Watch out For Metaphors
Product design is all about metaphors. Every icon, every button and every interaction is a metaphor for something in the physical world.
But some metaphors mean different things in different cultures. Therefore, it’s a good idea to do some research on metaphors before including them in your design.
06 Use Descriptive Feature Names
Fun names are difficult to translate, and they might be meaningless in other languages.
While “Packrat” might’ve been a clever name for a U.S. audience, it made no sense in other languages. The rat icon next to it made things even more confusing.
07 Provide Alternates For Translation
There might be special branding moments when you want to be a little more playful.
For cases like this, we’ll sometimes write two versions: one version for English and an alternate version for translation.
