Adapting UX design for text translation in product internationalization
When a product goes global, a localized user experience is key to success. A clunky or alienating product will frustrate users and fail to gain traction. Providing an engaging experience for global users requires thoughtful internationalization (i18n) which involves more than just translating text across languages, but means adapting the app’s design and layout to accommodate regional differences without engineering changes.
As UX designers, we must build in flexibility and anticipate where an experience may confuse or fall flat for some audiences. With foresight, we can save substantial time and effort during localization.
Based on my experience, here are some UX design tips for considering text translation during product internationalization:
Account for Changes in Word Order
→ Label inputs with short phrases
Anticipate Text Expansion
→ 1. Accommodate multiple labels to align forms
→ 2. Ensure functional text elements responsive
→ 3. Avoid inserting text in inflexible containers
→ 4. Make use of white space and line wrap
→ 5. Adjust layout or components when needed
Account for Changes in Word Order
Word order varies significantly between languages. For instance, in Hindi and Finnish, subjects, verbs, and objects appear in different positions than in English, as demonstrated below.
Label inputs with short phrases
Designing based on English sentence structure may embed an input within a sentence, as below.
However, this design can impede translation and development as the original position of the input depends on English word order. When translated into other languages, the sentence may be incomprehensible.
Considering language differences, use short phrases to label inputs instead, facilitating translation and development.
Text Expansion in Translation
When translated from English into other languages, text often expands in length. For example, the word “views” varies in length when translated, as shown below.
Furthermore, the shorter the source sentence in English, the longer its translated version is likely to be:
To avoid issues like text overflow, overlap, or misplacement from expansion, consider the following approaches:
1. Accommodate multiple labels to align forms
As discussed in “Account for Changes in Word Order,” use short phrases to label inputs. However, a form with multiple inputs may become discontinuous when translated, as below.
Two solutions:
- Label over the input, left-aligned. This solution usually works best, allowing space for label expansion and retaining form continuity, as below.
- Label left, right-aligned. This provides space but requires more horizontal width. It is good to adopt if there is sufficient space for the form to expand.
2. Ensure functional text elements responsive
Compared to descriptive text, functional text elements contain short but essential phrases, such as action buttons, navigation panels, tags, and dropdown lists. Unresponsive text elements, especially those with truncated text, can create barriers for users and negatively impact experience:
It is important to ensure these elements adjust automatically to fit varying text lengths and remain fully readable, as shown below.
3. Avoid inserting text in inflexible containers
When text is placed in containers with a fixed width, it often overflows or crops. It is better to position text in adaptive spaces that can accommodate expansion.
For instance, placeholder text in an input field may get truncated when translated, while a hint outside the field avoids this and provides persistent guidance.
Similarly, while toggle switches with on/off labels inside work well for English-only interfaces, as text length increases with translation, display issues arise. We can separate text from toggles or use icons to indicate status instead:
4. Make use of white space and line wrap
· Reserve additional white space for text expansion
Anticipating potential text expansion rates and providing extra white space helps avoid content that overruns its boundaries or truncates, as below:
· Set a maximum line length for wrapping
Based on the predicted text expansion rate, set a maximum line length for wrapping content to avoid a single long string of text, as below:
5. Adjust layout or components when needed
Poorly designed layouts frustrate users and impede their experience. For instance, I encountered the window below during a UI review, the third tab overlapped the close button, impeding the action of closing the window.
· Revise layouts to increase white space
In extreme cases, modifying the layout may be necessary. In the Original Layout of the example below, the content appears acceptable in Display Mode and Edit Mode (English), but the components in Edit Mode (Translated) overlapped, requiring layout changes. As shown on the right side under Adjusted Layout, by optimizing the placement of the action bar and breadcrumb, more white space is created to accommodate text expansion.
· Replace text buttons with icon buttons if layout changes are difficult
Another solution for issues like this is replacing common text buttons with icon buttons when intuitive meaning is retained, e.g., the “download” and “delete” buttons here. This saves space and avoids significant layout revisions, as below:
Wrapping Up
In conclusion, considering internationalization and translation challenges from the earliest phases of UX design can help avoid painful, post-production fixes. Simple principles like designing for text expansion, testing across languages from the start, and creating flexible, responsive components and layouts can significantly improve the experience for global users. Also, it is crucial to conduct a thorough UI inspection in a test environment encompassing all targeted languages before product launch to identify any issues.
Moreover, as product internationalization requires a combined effort, be collaborative with development teams, UX writers, and other stakeholders to align on details and implement adjustments. With collaboration and testing, multi-functional teams can deliver a localized experience that engages users worldwide.
As this is my first article on Medium, I sincerely hope you found some of the tips helpful. Thanks for reading!
