What are the best UI patterns for editing multilingual content?

I'm asking about situations where user needs to fill same information (product name, description), in several languages.

Updated: My original ideas:

variant 1 variant1 http://img39.imageshack.us/img39/6817/multilingual1.png

variant 2 variant2 http://img59.imageshack.us/img59/2815/multilingual2.png

  • 2
    Good question! Could you describe a little more detailed, and maybe supply a drawing of your thoughts so far - the chance to get good answers increase. Here is a related, but not duplicate question: ux.stackexchange.com/questions/7951/… Apr 21, 2012 at 6:08
  • It looks like your images have since been removed by ImageShack and replaced with banner ads. Do you happen to have original copies of the images lying around?
    – user59879
    Aug 25, 2015 at 6:35

1 Answer 1

  1. User will need to compare with specimen. Show both English and non-english versions simultaneously, on one page/in one window.
  2. Help user to understand overall task by using form recognition. Make translated form look absolutely the same as original one.
  3. Help user to work with form by highlighting corresponding field in the second form. When he’s working on Author (ru), highlight Author (en) too.
  4. In bigger text forms, help user not to lose his attention focus. Highlight corresponding sentence/paragraph in another form. When he’s working on the second sentence in Comment (ru), highlight second sentence in Comment (en).

Here I painted an example demonstrating the set of recommendations I have: UI Example

  • 1
    Hi Nikita, thanks for answering. I really like your answer, althought I'm a bit afraid that it will work only for two languages. I agree that this situation is more common than situation with 3+ languages, but I would like to support 3+ as well. Apr 21, 2012 at 16:33
  • Why can’t you scale horizontally, add more columns? Forms are usually vertical, and they are easier to fill in this way: static.lukew.com/EventApart_WebForms_120809.pdf Apr 21, 2012 at 16:37
  • Some of controls (especially HTML editors) are really wide. It is hard to fit more than two editors without horizontal scrolling. Apr 21, 2012 at 16:43
  • 1
    You could select a language with a drop-down above the second column; I suggest the power of this approach comes from having the two languages next to each other allowing for (near) instant comparisons.
    – Bevan
    Apr 21, 2012 at 22:42
  • 2
    I think it is essential for such interface to have ability to quickly grasp current state. Which translations are filled and which are empty or incomplete. If I will use a drop-down I will see state of only two languages. Apr 22, 2012 at 9:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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