1

Are there any IU/UX patterns or examples for translation of user content.

I'll elaborate:

This is a mobile app in which the interface is localized (translated) but the user may submit content (comments, etc...) and that content is going to be translatable.

My inicial ideia is to inject the users country flag after every text that is not in his language, but I'm not sure if this is the best way to do this.

By the way I'm a developer not a designer, but in this case I need to wear this hat :-)

2
  • 1
    Hi Ricardo - What are you trying to achieve for your user by inserting the flags?
    – 80gm2
    Jan 15 '15 at 19:11
  • @AEJBUG the idea is that say a english user sees a portuguese piece of content (for example a comment on something), in that case he would see an english flag after the content that when clicked would translate the text. But like I said in response to Jon Story the Facebook approach is cool, and probably a better choice than a flag in terms of UI Jan 15 '15 at 22:39
1

There are many options, depending on what you're trying to achieve. All fit certain situations, so you'll need to think about what you're trying to achieve, and how your content fits your design.

1. The Facebook Comment method is fairly neat

The comment is shown in the original language, with a small, unobtrusive "Translate" underneath it (similar to the share/edit/flag options under a SE question or answer)

Clicking this replaces the "Translate" word with the translated variant.

This tends to work well where the majority of content is in your native language, and where content is nicely "chunked"

2. Another option is to highlight the word/sentence in some way - your flag suggestion being one. When the user clicks/hovers on the flag/word/sentence, it is either replaced by a translation, or something like a tool tip box appears with the translation.

This tends to work well with inline snippets where the majority of the content is native or easily understandable, but a small proportion/word/phrase isn't common enough that you can be confident everyone will understand it

One might, in fact, say he's lost his joie de vivre

Make joie de vivre hoverable, et voila, the translated text could appear. Okay, I can't reproduce it on SE, but you get the idea.

3. Alternately, display the translated version in line, with a "view original" using a technique like the above. This would make sense when you're fairly confident your reader won't understand the foreign language version, and is well aware that the text has been translated.

4. And a final suggestion, provide whole page translation options at the top, ie a bar across the top/bottom of the page saying something like

This page has content in other languages. Click here to translate it to [native language name]

1
  • thanks I didn't even remember Facebooks case. but that is exactly our use case, small pieces of content (mostly comment, but also entity descriptions) that can be inserted in multiple languages, and that we want to provide a way for users from another language to be able to translate on the fly Jan 15 '15 at 22:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.