Effective Interface Localization - Practical Guidelines

In the current digital world, reaching a global audience is essential. Translations break language barriers and make users feel at home. However, managing translations isn't easy. It's not just about changing words; it's about making sense culturally and technically. How can projects handle this challenge? This article covers technical aspects of interface localization. 

‍
For developers and project managers, these insights can be invaluable. They offer a roadmap through the complexities of translation, ensuring projects stand out in various languages.

Static interface translations

When it comes to translating interfaces the preferred approach by SKM Group is handling everything on the front-end side. 

If you're working with Angular, here's a helpful library called the ngx-translate. But how does it work? You have a separate JSON file for each language, neatly containing all the translations needed for your interface elements. This separation ensures clarity and ease of maintenance. In the source code, you use a unique label for each translation. When a visitor loads the page, these labels are substituted with accurate translations sourced from a JSON file. Consequently, irrespective of the preferred language, the website can display all content correctly.

Dynamic interface translations

Panel for adding and editing translations

The front-end seamlessly collaborates with API endpoints to facilitate the addition and modification of translations. Each translation is assigned a distinct label, akin to static translations, ensuring unambiguous reference.

Database

A well-designed structure of the database is pivotal for managing translations seamlessly. 

Effortlessly, the backend incorporates translations into the specified database structure, enabling seamless retrieval.

 For a basic approach, in a relational database you can use a table with 4 essential columns:

• id, 
• label_translation,
• code_language, 
• translation

Loading translations by the front-end

At project initiation, the front-end fetches translations from a dedicated API endpoint. For Angular-based projects, the ngx-translate plugin emerges as the preferred solution. Depending on the chosen approach, translations in JSON format are either retrieved from static files or provided through an API interface from a database.

Making errors understandable

In the event of issues in an app or website, the backend should act as a messenger, relaying error codes and additional information. When developing an application, focus should solely be on conveying error codes and supplementary metadata, ideally adhering to the standards set by https://www.rfc-editor.org/rfc/rfc7807.

On the front-end, error codes should  be transformed into language-specific explanations. This entails mapping error codes to fitting translation labels or even employing the codes as labels themselves.

Content translations

If we need dynamic interface translations in addition to content translations, the components discussed in the previous section must be implemented.
The edit/add content view in the application (e.g., a new product with a description) must have additional components (e.g., a separate text box for each language) to enable defined translations of that content.

When your app requests content from the server, it needs to specify the desired language. This language code can be sent for example as part of the route or in the HTTP request header.

Again, fora basic approach, in a relational database you can use a table with 5 essential columns:

• EntityType -  an enum value of object type - in the case of complex content (e.g., when the product has a general description and a detailed description), an additional identifier detailing the content to which the translation applies.
• LanguageCode or LanguageId - a code defining the language of the translation or FK to language if it is in separate table
• Value- the content of the translation

‍

Summary

Ensuring successful localization involves frontend techniques, API integration, structured databases, and error clarity. By implementing these strategies, projects can stand out across languages, providing a user-friendly experience to a diverse global audience. At SKM Group, this approach is meticulously executed to achieve optimal results.