i18N and form design

Question

I'm trying to design a web form supporting internationalization (i18n). The form will be part of a large event management software. Users login, create events (like conferences, roadshows, and so forth). Several text input fields must support i18n in order to present the event in different languages. For instance the event title may be presented in English, French, German, etc, as well as the agenda, the summary, etc. There will be a primary or default language (depending on the client's location) and two or (many) more additional languages to choose from.

I can think of two strategies or scenarios that might work:

1. The client opens the form and finds the preselected default language. Let's assume she decides to go from french to german. Instantly this could trigger a form reload. From then on any text that she might enter is bound to the corresponding, that is the selected locale. If she selects another language this again triggers a form reload (all text fields are emptied). The idea is to edit the complete form for each selected language at a time.

2. This approach "enhances" each i18n text input form field (by using JS/jQuery). Again the client opens the form and selects one or more languages (using checkboxes). This will automatically add additional input text fields below the input field that represents the primary language. Now the clients enters some content into each form field. If the client unchecks "French" all corresponding form fields are removed. There's no form reload, just adding and removing additional text input form fields (jQuery magic:)

Is there a better way to reduce the complexity and lead to a better user experience when entering i18n forms?

Answer 1

The issue I have with the second approach is that it adds a number of additional fields (if I understand your question correctly it literally doubles the number of fields). This can cause some issues to the user as he has to carefully pick and choose which field he is entering the data in. Also if he is not careful he might enter the data for the agenda field in the event title field like this

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

Another interesting issue I noticed (while playing with google translate) is that languages use the same word to denote something, for example the word for Agenda in dutch is the same as that of English i.e. Agenda. Hence seeing two agenda's on the form might confuse the user (assuming he has selected the Dutch as the language of translation from English).

I would recommend going with approach one but if possible, on selecting a new language,if the user has already entered existing content,ensure the entered content is already entered into the form on form reload. If that is not possible due to the difficulty in determining when to save the data, you can go with an approach where the user has to select the language first and then only he shown the form fields. This will ensure he is presented with his language of choice of upfront.So it would look something like this:

^{download bmml source}

If you plan to go with this approach I would recommend setting the default value in the dropdown equal to the value determined by the person's locale

Answer 2

Use a user preferences page, where there's a choice of language. Use PHP and MySQL to store the preference. The rest is even easier. For example " If (Lang=="de") { Include (de.inc); } Else { Include (en.inc); }"