Multi Language Name Input

Question

We are developing a Client Application that supports multiple languages. We have some MasterData that requires to have a localized Name (e.g a Product is named different in every location). When creating such MasterData the User should be given the possibility to enter localized Names for every languages but he has at least to enter the English translation.

How would you create such an input form?

I was thinking about creating some kind of small UserControl allowing to iterate through, show and allowing the input of different languages.

Answer 1

For record, we use in our own application something a bit like Ben Brocka, but without the pain of select list for the user.

^{download bmml source – Wireframes created with Balsamiq Mockups}

It's a tiny layout where all the existing translations are present with a button to remove it. Below are the other available languages through a list of buttons, and clicking on one of them adds a localization. Not really different so, but we found that it was more usable than a select.

The main default of this UI for your problem - and ours too - is than you cannot manage in one shot all the translations of all the fields, it's only field oriented.

Answer 2

A standard option is to have a required field and a button that adds a new input field for extra items like new localizations:

^{download bmml source – Wireframes created with Balsamiq Mockups}

I'd made English appear to be the default name as it sounds like this is how your app works, and each added Localization/name includes a language and an input field for the localized name.

Answer 3

There's a nice approach implemented by Prestashop (an open source multi-language e-commerce web platform). I'm pretty sure you can see it action in their online demo: http://www.prestashop.com/en/demo (enter the admin panel and edit a product, since product names can be localized).

Their approach is as follows:

Take the localizable edit box and just add a small flag after it (on the same line). The flag has the same height as the edit box, so it feels like a very natural extension of the edit box. You can show a tooltip with the language name when hovering over the flag for people who don't know their flags all that well.

When you click on the flag, you show a drop-down menu (or a hover menu) with all other languages. Once you select a language, the hover menu disappears and the content in the edit box refers to this language.

It's quite similar to Ben's suggestion, but much cleaner. There is almost no difference between the localizable edit box and the non-localizable so you can switch back and forth with minor layout changes.

Answer 4

Here is my final Solution atm:

Answer 5

Following the great suggestions of Ben and talkol, I would add by default the common translations the user would choose (another challenge is to predict those defaults as accurately as possible). Another important feature is the ability to delete added translations, perhaps by adding a little X to the left of each row.