International UI Design

Note:

Currently in the beta phase.

A set of effective international interface layout design rules can not only establish the product's tone in global design but also ensure operational consistency. Following these design rules can significantly enhance the globalization quality of applications.

Interface Space Reservation and Flexible Layout

There are considerable differences in the length of translations across languages, which may cause interface text to expand. To ensure that translated strings are not truncated in other languages, the best practice is to use flexible dynamic layouts—where UI controls dynamically adjust and reflow based on text length. If flexible layouts cannot be guaranteed during actual development, sufficient text space should be reserved. Based on English as the reference, the recommended space reservation ratios for translations relative to the original English strings are as follows:

English Character Count	Reserved Space Ratio
≤ 10	100%–200%
11–20	80%–100%
21–30	60%–80%
31–50	40%–60%
51–70	30%–40%
≥ 71	30%

Interface Mirroring

Different countries have varying text alignment and reading directions. For example, English follows a left-to-right (LTR) order, while Arabic and Hebrew use a right-to-left (RTL) order. To ensure that interface content aligns with local users' language habits, UI element layouts must support interface mirroring, as shown in Figures 1 and 2. Key design considerations for UI element mirroring include:

• UI Layout Mirroring: The interface arrangement should allow RTL content to display in its original layout, providing a bidirectional market experience. For example, "ABC" should appear as "ABC" in LTR but as "CBA" in RTL.

• UI Element Mirroring: Directional UI controls and icons should follow mirroring rules, as illustrated in Figures 3, 4, and 5. Icons without directional associations or those representing real-world objects (e.g., clock faces) do not require mirroring.

• Touch and Interaction: Ensure that touch or interaction sequences align with RTL reading order. For instance, swiping left typically navigates backward in LTR, whereas swiping right performs the same action in RTL.

• Mixed Text Support: Text direction support enables seamless mixed-text presentation (e.g., English text in bidirectional contexts and vice versa).

Figure 1 Standard Layout Example (English)

Figure 2 Mirrored Layout Example (Arabic)

Figure 3 Standard Icon Resources

Figure 4 Icon Resources for RTL Language Systems

Figure 5 Mirrored Controls for RTL Language Systems