Designing User Interfaces and UX for Localization

5 min read

Business, Product Design

One of the most important things you have to consider when conceptualizing user interfaces is whether or not these interfaces are future-proof.

Your designs should be able to serve today’s user base as well as tomorrow’s.

How long do you want your project to be used for?

Express the answer to this question in the design.

Table of Contents

I. What is the importance of design and localization?

II. How do design and localization come together?

III. What are the best practices when designing for localization?

IV. Final thoughts

I. What is the importance of design and localization?

A future-proof design should be able to withstand changes without compromising the integrity of the design itself.

New features, new functionality, or even new languages are likely to be introduced to your product. The design should be able to adapt to these changes without compromising the user experience.

A future-proof design should also take into account localization—the translation of your app or website into another language.

Localization means making your product available to the people of a specific locale so that they can interact with your product more comfortably.

Localization boosts UX. For example, you can translate your English website to Japanese to reach the market the people there have to offer.

While it may seem like a “nice to have” feature, statistics show that if you localize your app you can generate up to 128% more ROI.

II. How do design and localization come together?

As a designer, you should aim to create your design with possible future translation in mind.

Design choices in the conceptualization stage will affect how adaptable your product will be and how difficult it might be to localize.

That is because an app or a website might have a very pretty user interface that works in English, but once translated to another language, the design falls apart.

For example, German is around 25% longer than English when translated from an English text. This often results in text breaking the margins of the container it has been placed in and spilling out, which ruins the design, UX, and the product itself.

Designing a UI for localization can be quite challenging. In fact, you would do well to consider hiring a professional translation company to do the work. Nowadays, translation agencies pay special attention to design considerations as well.

III. What are the best practices when designing for localization?

So as a designer, what can you do to design for localization? Here are a few strategies you can employ:

1. Set your UI to accommodate the largest version of your localized content

For example, if you have an “Add” button, it translates to “Hinzufugen” in German. Instead of setting your character limit to 3 and forcing your German users to interpret an abbreviated command, set the limit to 10 and let them see the whole word.

2. Make extra provisions in terms of space in text boxes to allow for surplus text that may show up in future

This strategy works better for websites than apps due to their limitations of space.

3. Use icons to communicate

“+” is universally recognized as “add,” and “x” is universally recognized as “close.” Using such icons not only saves on space but also improves the user experience of your app.

4. Use flexible heights when your design combines elements with text

For example, if you have an image with a caption and another element underneath, it would be better if the image shrunk to accommodate a longer caption, as opposed to having the caption push the element below it down.

5. Set character limits and overflow

This goes hand-in-hand with accommodating the largest version of your localized content.

For example, if you have a blog post on your front page, limiting the amount of content shown would result in a “Show more” or “Read more” option. This will allow your users to be redirected to another page where they can access the content in its entirety.

6. Use a font that supports foreign character sets

If your font only supports the Latin alphabet, your users will see blank boxes if they try to represent your text in another language, like, say, Arabic or Russian. Default system fonts usually support foreign character sets.

7. Consider the relations between text, images, and UI elements

Specifically, don’t embed text in images and do not place UI elements in the middle of sentences.

8. Pay attention to wording

Use general descriptive wording instead of expressions that only make sense to a specific demographic. You should also provide alternatives for your translation company to choose from when translating your work.

IV. Final thoughts

By using these methods, you will have an easier time localizing your design, which will boost your user experience. You’ll also have a better system in place to do SEO for apps or websites.

Localization lets you conquer new markets and bring your app to more people. If you follow the principles of effective localization, people around the world will have access to better digital products.

And when you build a business that thinks about its users, your user base will appreciate you for it!

Rilind Elezaj is an experienced a Digital Marketing Specialist with a demonstrated history of working in the marketing and advertising industry. Rilind possesses a strong entrepreneurial mindset and has devoted his career to enhancing the sphere of digital marketing. In his methodological approach, Rilind integrates web development and other digital marketing solutions to create hybrid strategies that bring the best results.

The Ultimate Guide to Hiring Software Engineers

Rilind Elezaj

Digital Marketing Specialist

More articles about Business, Product Design