Why bother with localization for game UI design?
First of all, what constitutes the UI in video and mobile games?
Types of UI in games
A game user interface is a system of visual components that allows players to interact with the game. These components include:
- Non-diegetic UI. These are menu items outside the game world and story: settings for choosing the language, display resolution, sounds, etc.; credits; different sections or types of games (for instance, when there are daily challenges on top of regular levels); badges or leadership boards.
- Diegetic UI. It encompasses interface elements that exist within the game world: speech bubbles, inventory, character selection, etc. Based on a particular story and style of the game, it can include virtually anything.
Here’s an example of non-diegetic and diegetic UI elements in the Strange Horticulture game:
Non-diegetic UI: game menu. Source: Strange Horticulture
Diegetic UI: interface elements that exist within the game world. Source: Strange Horticulture
Why you should localize game UI design
While it might seem like no big deal compared to the main game content (dialogues, characters, item descriptions, level names, etc.), the interface and navigation should be localized to ensure a consistent and culturally relevant experience.
Thanks to effective UI localization, you can achieve the following:
- Greater playability. When interface elements are properly localized to the target culture, local players are more likely to enjoy the game and explore it longer.
- Consistency. No matter how great the localization of the main game content, cluttered UI as a result of poorly planned UI translation can ruin the impression. Preparing for UI localization will ensure that players have a consistent experience with all components of the game.
- Easy expansion to new markets. Preparing your game’s UI for translations means adopting flexible tools that allow for scalable text fields and adjustable visuals. When you already have these in place, it’s much easier to add other languages over time.
Now that it’s a bit clearer what constitutes game UI design and why it’s crucial to localize these components, let’s discover how to approach this localization process and what to be aware of.
7 tips for localizing your game UI design
The success of your game localization will largely depend on how well your team understands each target culture and what tools you use to manage and test translations. We’ll cover the 7 things that you’ll definitely need to pay attention to when localizing your game UI design.
1. Research target markets
You can’t overestimate the role of market research. Different cultures and regions might have their unique rules and patterns of perception that will influence how they play video and mobile games.
Gather information about each location that you’re going to localize your game for to learn about the following:
- Laws that might concern your game content
- Cultural sensitivities (for instance, mentions of religions or historical events might be banned or viewed as offensive)
- Commonly accepted notations: date and time formats, units of measurement, and other norms
2. Make your text fields scalable for text expansion
If the original language of your game is English, it’s comparatively concise when it comes to typical menu items. You’ll need to consider that other languages will have longer words and phrases.
The button and text field size shouldn’t be the same for different languages. For instance, see how the French version is way harder to read because the button is not scaled while the text is longer:
Unscalable menu buttons result in the cluttered UI text in French translation. Source: Strange Horticulture
In the English version, all text fields are even. Source: Strange Horticulture
Make sure to check your text length when you’re in the translation process. With Gridly, you can use a length checker to detect overlength text so you can take instant actions. Furthermore, you should follow these rules for UI design:
- Make the UI elements dynamically scalable and apply responsive spacing
- Opt for dividing the text into 2 lines rather than making the font size smaller
- Prepare the UI for up to 30% longer text fields compared to English
- Use drop-down menus when applicable to hide length differences from the main screen (if it doesn’t overcomplicate the navigation)
Here’s a good example of responsive spacing that makes phrases of different lengths look consistent and equally fine:
Comparatively shorter English text fields in the game menu. Source: A Little To The Left
Longer French text fields are broken down into two lines instead of making the font size smaller. Source: A Little To The Left
Here’s another example of how a dynamic UI element can be seamlessly resized to fit bigger text:
Dynamically resizable UI fields that fit text of different lengths. Source: Hidden Folks
3. Adjust the look and feel for right-to-left languages
For languages with a right-to-left orientation such as Arabic, you need to rethink the interface in general, providing players with a natural and convenient experience. This means, for instance, moving the typical menu items from right to left.
Here’s an example of the localization to Arabic in the Mini Metro game that doesn’t take the right-to-left orientation into account. Menu items are placed on the right in the Arabic version, just like they are in English and all other versions, while they would feel more natural on the left side:
Arabic localization without RTL menu orientation. Source: Mini Metro
Contrary to that, here’s a good example of taking right-to-left orientation into account in the game navigation. Here, the zoom scroll is designed to move from left to right in English and other European languages, while it moves from right to left in Arabic and Hebrew:
UI differences for RTL and LTR languages. Source: Minesweeper
What you need to do is make sure that the right-to-left nature of languages is reflected in the interface and navigation.
4. Choose fonts that support multiple languages
When choosing the typography for your game’s UI, opt for Unicode-compatible fonts that support many languages, especially those that combine glyphs and characters. Even if you’re not planning to localize to hieroglyphic languages right away, these fonts will make any future expansion easier.
Another thing to pay attention to is the default width of fonts. Based on the width, you’ll need to adjust text field padding and spacing in your game’s layouts.
In the example below, you can see how the font might look inconsistent in the Japanese localization (different alphabets are displayed with different sizes and spacing):
Font inconsistency in the Japanese game localization. Source: Hidden Folks
Additionally, when localizing to languages requiring different character encodings (e.g., UTF-8, UTF-16, ISO-8859-1), using a byte-based length check to calculate the string length is more accurate to ensure the translations are not too long as a single character might be represented by multiple bytes in certain encodings.
>> Here’s how you can use byte-based length check in Gridly.
5. Ensure correct formatting
If you use locale-specific data in the game, such as date, time, or currencies, display them correctly for each target region. For example, some cultures have a 12-hour time notation, while others normally use a 24-hour one.
Even if it seems like a minor unimportant detail, it’s things like this that show true commitment to game localization. For instance, in the example below, the date format could be adjusted for more commonly used in Japan “year / month / day” with glyphs and numerals:
Missed opportunity to localize the date format in the Japanese version of the White Door game
6. Choose icons wisely
The perception of icons in different digital products, including games, is based on the previous experience of users, and there hasn’t been an established standard usage of many icons. With that said, you should only use icons when their meanings and context are absolutely clear. Experts also advise testing icons for recognizability and memorability.
For example, you can see some commonly used icons in the screenshot below:
Icon usage in the game menu. Source: White Door
Here, it’s easy to recognize what the icons stand for. If you have icons like these in the original version, there’s no need to additionally localize them. But if you have something more unique or culture-specific, consider changing your iconography to fit different audiences.
7. Test localized designs and game versions
When the translations are done and verified by reviewers within the localization management system, it’s not the end. You should put cycles of localization QA on your agenda to make sure that the localized versions function properly.
The two major parts of testing your game localization are:
1. Testing multilingual content in designs. A proper localization tool with flexible string translation can give you a unified view of your interface designs in multiple languages. For example, with Gridly, you can easily review all UI translations in your designs and adjust the layouts so that all text fields and buttons remain consistent in every language.
Gridly Figma integration
>> Explore how to localize your Figma design with Gridly
2. Engaging native speakers in playing the game. Find local players and give them an opportunity to know the game and navigate through it. Their feedback can give you valuable insights into cultural nuances, as well as into the user experience of the game in general.
With Gridly’s localization QA capabilities, you can easily categorize different issues and track your progress in translating the game’s UI.
>> Explore how Angry Birds creators - Rovio accelerated LQA by 4x with Gridly
As you can see from the different examples shown in this post, there might be a lot of inconsistencies that are hard to spot right away, which makes localization testing a crucial step. Don’t neglect different types of testing to make sure that the game released on different markets has a culturally relevant and natural look and feel.
Ensure the success of UI localization with Gridly
Localization is a resource-intensive process that requires a lot of research and layout adjustments. Game developers are even complaining about reworking the UI as the most tedious part of their job. To minimize the efforts and eliminate possible errors, you’ll need to have a flexible localization management tool.
Here are features in Gridly that streamline the localization process for your game UI designs. These features are crucial aspects of any localization tool, enabling flexibility and ensuring a smooth and efficient workflow.
Automation
Since UI components usually contain typical words and phrases, it makes sense to automatically pre-translate them and only have a human reviewer check if everything is correct.
Gridly Automation for pre-translation with ChatGPT
Translation memory
Given that UI elements might be repeated throughout the gaming experience, powerful translation memory can save some time on repeated fields.
Gridly Translation Memory
Multimedia support and design tool integrations
It’s crucial to provide screenshots for context or fully integrate the translation strings with the design tool to view all localized UIs at the same time.
Flexible collaboration functionality
The process of localization requires the involvement of translators and reviewers, so it’s essential that the platform allows you to set different roles and access types, as well as conveniently manage communication between parties.
Gridly user access control
When you have the right tool, it’s easier to prepare your game designs for translation, keep track of them, and review the results. We hope these tips help you prepare your game for successful localization and ensure that different versions will be easy to navigate and enjoyable to target audiences.
If you are interested in learning more about localization management for your games overall, and specifically in game UI design, explore Gridly’s comprehensive tool box or schedule a demo to see it in action.
