Building for an international audience is an essential step in building out a successful product. In this documentation, you’ll find general recommendations when designing UIs for ServiceTitan.
Building UIs so they can be used in different locales. Internationalization enables localization.
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.
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:
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:
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.
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.