International Design

Internationalization vs Localization

Internationalization (or i18n)

Building UIs so they can be used in different locales. Internationalization enables localization.

Localization (or L10n)

Adapting a product and UI for different locales to make them a good cultural fit.

Put in another way, Anvil is built for internationalization, with some guidance on how product designers can design for internationalization, with some specific localization recommendations for formatting.

Plan for text expansion

Localized interfaces tend to expand in length relative to English. Particularly with short words and phrases, UIs should be able to accommodate.

In this example, a translation wrapped the phrase, which may produce unintended visual regressions. A common way of handling this scenario is to give confined UIs their own rows of content.

When designing a UI, consider what would happen if the copy was significantly longer in length.
Some languages, such as German, create long, compounding words. This can make it a challenge to properly wrap words. For example, “acquisition cost” can be translated as “anschaffungskosten”.
Abbreviations do not always translate well. For example, “FAQ” can be translated into Spanish as “Preguntas frecuentes”.

One way of preparing for this can be summarized through the following table on text expansion:

Number of characters in English source

Average expansion

0–10

200–300%

11–20

180–200%

21–30

170–180%

31–50

140–160%

51–70

151–170%

70+

130%

Source: W3C

Plan for word reordering

Word reordering can be a challenge within inline forms. A phrase in English might be grammatically incorrect in other languages.

Two general ways of handling this issue include:

Not adding forms mid-sentence, producing an ordinary form.
If used as a sentence-like setup, treat the rest of the text like a typical form label. In this scenario, avoid fusing the title text and label text.

Plan for currency differences

In general, currency can be handled through a localizer to account for things such as symbol placement, comma vs periods, among other issues.

Similar to text expansion, some currencies are longer than US dollars. For example, $1,000 is roughly ¥114,000 Japanese Yen, or ₩1,182,000 Korean Won as of this writing.
In a UI where there are multiple currencies, the UI may need to consider adding an “explicit format” variation to currency. The explicit format is when the currency symbol, value, and ISO code (e.g. “USD”) is used. This additional information can help clarify ambiguous currency, e.g. many locales use the $ symbol.

Color consideration

In general, the status colors embedded in Anvil components translate their meaning across other countries. When using components, no additional action needs to be considered for international work.
Within the UI, avoid referring to UIs by their color. e.g. Click the red button to confirm.
When referring to positive and negative trends, the colors red and green are sometimes reversed in meaning.