13

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

Sergey Kirillov
  • 131
  • 5
  • 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: http://ux.stackexchange.com/questions/7951/how-to-design-a-multi-language-website – Benny Skogberg Apr 21 '12 at 06: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? –  Aug 25 '15 at 06:35

1 Answers1

7
  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

Niki Tonsky
  • 2,759
  • 18
  • 20
  • 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. – Sergey Kirillov Apr 21 '12 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: http://static.lukew.com/EventApart_WebForms_120809.pdf – Niki Tonsky Apr 21 '12 at 16:37
  • Some of controls (especially HTML editors) are really wide. It is hard to fit more than two editors without horizontal scrolling. – Sergey Kirillov Apr 21 '12 at 16:43
  • But I think maybe I can implement some kind of accordeon to show only one additional language at time. – Sergey Kirillov Apr 21 '12 at 16:44
  • 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 '12 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. – Sergey Kirillov Apr 22 '12 at 09:11