Getting the point across: adding context for translation quality

Techniques you can use to help translators deliver high-quality translations

Michael Overmeyer
Shopify UX
7 min readMay 2, 2023

--

Illustration by Alek Mackie.

Providing context to translators

Producing quality translations is tricky. Beyond knowing the source and target languages intimately, translators also need to understand the context of where and how the strings they are translating are going to be used.

Without this information, translators are left to guess the meaning of strings, leading to reduced translation quality and, ultimately, eroding the trust of the users who see the translations.

An extreme example of a low-quality translation due to missing context. Instead of the intended “Place order”, the translation became “Create ranking”. Would you trust this website with your credit card information?

Beyond user frustration, translators will take longer to produce translations for things that they don’t understand, and there will be more back-and-forth needed in order to get the faulty translations corrected. Both increase the cost of the translation process.

This blog post will discuss the techniques you can use to help translators deliver high-quality translations. We’ll cover both when and how to add context to translations, so we can ensure that all users are getting the same quality experience, regardless of their preferred language.

Common cases when additional context is needed

A “string” is a collection of characters, words, or sentences that you want to display together. Casually, you can think of them as sentences, but strings can be single words (for example, the word “Save” on a button), or several sentences together.

Some strings are trickier than others for translators to understand and therefore they are much harder to translate correctly.

For translators, if they don’t understand the context, they are left making a best guess. This will harm both the quality of the translations and the speed at which translations can be done (since they’ll have to spend extra time to think it through).

Let’s walk through some common cases where more context is needed.

Short strings

Shorter strings inherently contain less context. At Shopify, our guidance is that any string with fewer than four words should also have explanatory context added.

Translators will need to know what function the string plays in the interface:

  • Is it a button?
  • A label in a menu?
  • Placeholder text in a text input?
  • A link?
{
// This is a button which takes the merchant to a new page
// to start the process of adding a sales channel.
"add_channel": "Add channel"
}

Missing subject

Strings that are missing the subject are especially difficult to translate.

For example, English uses the verb “Save” in a number of cases that other languages have separate verbs for:

Similar ambiguities (polysemy for those linguistically inclined) can happen with nouns (for example: “file”; document or rasp?), adjectives (for example: “hot”; temperature, spice or popularity?) and even across multiple parts of speech.

Beyond ambiguities, the spelling of the words might depend on the grammatical gender of the subject:

Providing the subjects of your strings as context is necessary to avoid ambiguity and have correct spellings.

Technical terms and “Do Not Translate”

Translators are unlikely to understand all the nuances of the technical terms of your business.

Proactively provide explanations of technical terms (e.g. like your tech stack), and their use within the context of the source string.

Beyond technical terms, there are also words or phrases that you’ll want to mark as “Do Not Translate”.

Often, these are trademarks or brand names which often do not have translated versions. If translators are not familiar with the brands, they might attempt to translate them literally.

Provide context, a glossary or term base, and possibly even training for your translators in your business’ domain.

Interpolations

Translation strings that use interpolations should have context to explain what will be injected into each interpolation.

{
// ❌ Generic key name and vague interpolation
"message": "A reminder was sent on {{wd}}"
}

Without context, the translator is stuck guessing what will be injected into the {{wd}} placeholder. Make sure to add context to explain interpolations.

Even better, Concatenate strings mindfully discusses how interpolations should be avoided and the ways to reduce the use of interpolations entirely.

Adding context

Which context mechanisms are available to you will depend on the tooling you are using for translation. Written context is often easy to add and is well supported, but visual context (images, videos, etc.) can often convey more complex understanding at a glance.

Written context

Written context is the simplest form of context, but also the easiest to add. Written context is typically added directly within the translation files and:

  • lives alongside your source strings, so it is easier to manage and keep up to date
  • has nearly universal support without any additional tooling

Start by making sure the key names and interpolations in your translation files are explicit and meaningful:

// ❌ Generic key name and vague interpolation
"message": "A reminder was sent on {{wd}}"


// ✅ Better
"reminder_banner_message": "A reminder was sent on
{{week_day_or_full_date}}"

Screenshots and videos

It is said that “a picture is worth a thousand words”. Providing a screenshot or video of the string as it will appear in the context of the UI can be a low-effort way to provide the needed context.

Visual context also has an implicit benefit of showing the approximate size of the UI element being translated. Translation into some languages (especially German) can be expected to increase the string length by as much as 50% relative to English, so showing the element visually gives translators a sense for the amount of space they have to work with.

Screenshots can be provided from the UI mockups, or from the final developed feature. At Shopify, we’ve developed a simple UI that allows developers to submit screenshots or videos alongside the strings when they request translations.

The context upload dialog that allows image and video context to be added to translation requests.

We’ve found that developers are happy to upload visual context of the features they are working on. They can opt out of uploading visual context, and if they do, they are prompted to fill out a feedback form to tell us why.

After uploading the visual context, some translation management systems will run Optical Character Recognition (OCR) on the images or videos to highlight the specific strings for translators in their translation UIs.

The translation management system has used OCR to find the changed strings in the image context and can highlight them during translation.

In-context editors

Some translation management systems provide their own APIs and tooling for capturing context.

Instead of a flat screenshot, these can create HTML captures that translators can then edit in-place, changing each source string in the capture as part of a WYSIWYG editor experience.

Screenshot of an in-context editor. Translators are able to edit the strings in a rendered version of the page and see their changes in the context of the page.

Integrating with these tools requires some custom integration work with your development environments, and for those requesting translations to understand how to use the capture tooling.

While these integrations can provide high fidelity context, they can also be complicated to set up and maintain.

Staging environments

An even more context-rich experience is allowing translators to interact with the application directly.

You could deploy a staging environment where translators can interact with your UI. However, you need to be mindful of the following:

  • Forcing a string to appear in your UI (for example, an error string that only happens in niche situations) can be difficult even for someone who knows the product intimately. Translators won’t have time nor context to find the string.
  • If you’re translating strings from several features concurrently, you will want multiple staging environments.
  • Populating the staging environment with realistic enough data to expose a string takes planning effort.
  • There is overhead in managing the staging environment. Making sure that it is always up to date and available to translators takes maintenance.

Shopify will sometimes deploy to staging environments for translators, especially when performing a general translation quality audit of the entire application.

Context is key to high-quality translations

Without context, translators are left guessing the meanings of strings. Guessing damages the quality of the translations they produce, and costs more since more time is spent correcting incorrect translations.

By providing the necessary information, you ensure that translators have the context they need to be able to provide high-quality translations. The mechanisms for supplying context vary in complexity and can be adopted and honed over time as your organization matures.

Ultimately, high-quality translations are foundational to providing a great user experience for all your users.

--

--