How to design translation UI

Question

I'm designing a translation app which will be used to translate other apps. The app will be initially desktop based, but later on I want to make a mobile version as well. The difficulty that I'm facing is that the strings that need to be translated may be "templates" -- pieces of text that with placeholders that will be replaced at runtime with other text or code. For example:

{name} received an {1}award{/1}

We want the translators to translate this into something like

{name} recibió una {1}distinción{/1}

so that at runtime we can replace {name} with a particular name, and {1}{/1} will be converted into a hyperlink. In general there may be multiple placeholders in a piece of text (maybe up to a dozen), and the markup tags {1}{/1} can potentially be nested.

Now, my question is: how do I design the interface where the translators will be submitting their translations? I was thinking of several potential solutions, but each one seems to have its drawbacks:

1. Just present them with the raw string as it is stored internally. The obvious drawback is that it is potentially confusing to the translator; and in general doesn't look very nice.
2. Show the tokens as colored blobs (having distinct background color) and allow people to drag those blobs around, or enter text directly into them. The drawback is that sometimes the translation requires that those blobs be reordered -- and I want to have the interface be navigatable without the mouse.
3. Make the free text entry, and in the end require the translators to "color" the placeholder fragments (they can select text with keyboard and press a shortcut like Ctrl+B).

Which approach should I choose? Are there any better alternatives?

Answer 1

This is a difficult problem, I can give you that. I am thinking that the solution is something along the lines of your third option.

Here is how you would present the sentence:

John received an award.

The translator would type something like this:

John recibió una distinción.

Then the app would ask the user:

Please indicate the highlighted word in your translation:

John received an award.

Then the user can highlight distinción in their sentence and press enter.

As for the name, you can follow the same model.

Please indicate the highlighted word in your translation:

John received an award.

The translator might have

Juan recibió una distinción.

But in the back end you would treat "John" as a {name} placeholder. The only other alternative I can think of is making it absolutely clear to your users that anything in square brackets should be copied directly. "[NAME] received an award." Then, if "[NAME]" isn't found in the translation, the app would notify the user that it is missing.

Hope this helps!

Answer 2

This is a really interesting question, because there are so many nuances that would change depending on what is being translated (the original and new languages, in addition to the context).

If I'm understanding correctly, the user in your case is the translator, and the artifacts that the users will be translating are desktop applications?

I was originally thinking that if you have a certain set of languages that the translators will be using, you could find patterns that make sense for them (for example, certain grammatical equivalents might mean that certain chunks of a sentence would need to be translated together)... but that might be too complicated.

Therefore, I think you should allow maximum freedom for the translator to change the text in order to let them be as accurate as possible in the new language. I think it would be really interesting to just have "in-line" type of editing for them. For example, they open the application they need to translate (or a simulator that looks like the application), and then they can highlight sections of text and translate it directly. Maybe after they translate a section and click out of it, the original text would be highlighted with a new color and the new text would show up in place of the old text. The translator would be able to click in the highlighted section to see the original text again, so they reference the original to check their work and can make edits if they need to. You would also probably need to have functionality to have the translator easily discover areas left in the application that they haven't translated. Lastly, I think it would be super interesting to have an ongoing "progress" calculator for them to see how much of that application they've translated and how much they'd have left at any point in time.

In conclusion, I think having an interface where they can translate "in-line" with an application would be helpful so they have the full context of what the end user is going to see (again, because there could be nuances in how you translate depending on that context). Contrast that kind of interface with something like just listing out all the strings they need to translate... that might be more difficult and frustrating for the translator.

I hope this provides some food for thought! I think this sounds like a really interesting application to work on :)