The best approach for multilingual user interface

Question

I am working on a multilingual web application. I'm wondering how do i design the best user interface that the user can localize data for various languages? for instance, in making a page which its title is different in every lang, do i put a textbox for every one? it's not a suitable way to do(in case of 10 lang, the user has 10 textbox!!! too silly) what is your idea about this?

Edit: i have no problem with globalization in my system. in fact, i'm looking for a good way for my interface design which user can enter his data to my forms in various langs.

thanks in advance

Answer 1

What about only one textfield and a dropdown containing the languages. After selecting the language and filling out the textfield the field gets submitted and the chosen language disappears from the dropdown list. the entered value and language then appears beneath the dropdown and textbox with a way to edit/delete it. this way it's always clear to the user which languages are already covered and which values are assigned to them. furthermore it's a nicer way if not all 10 languages have to be mandatorily filled in, if the user e.g. just knows english and french.

Hope you know what I mean, otherwise I'll have to create an example screenshot :-)

Answer 2

You could have 3 text boxes, and that's fine...get to 10, and it starts getting a bit crazy. Beyond that it starts looking pretty bad.

Maybe you could put up to say 5 text boxes up...but if it goes beyond 5 (because the user desires localization for more than 5 places) it places a single textbox with a dropdown next to it, and the dropdown would contain the current language.

Textbox would auto-populate with the current value for the language selected in the dropdown. Should work well in asp.net, and it can be done both client side, or server side on a post back pretty easily, so you don't need to do anything crazy for people not running javascript.

Answer 3

You have one text box. On load you populate the text box depending on language.

The content will be populated from some kind of resource file. If there isn't much text it could even go in your config file.

Be aware of the following:

1. Different content length depending on language.
2. Right to Left alphabets screwing up your alignment

This is a classic project for using NUNIT or similar to promve that things work after new translations are added!

Answer 4

What language do you use in development? If this is something like PHP, then you definitely should use templates and load text strings into them from configuration files for every language. In Smarty, for example, I use configuration files for that.

Text strings for error messages or something like that could be put to files like .ini and loaded from there.

Answer 5

The Google Web Toolkit (GWT) demo shows the same page with versions available in English, French, Arabic and Chinese.

The GWT docs have a thorough discussion of internationalization. You could emulate their implementation.

• Constants: Useful for localizing typed constant values
• Messages: Useful for localizing messages requiring arguments
• ConstantsWithLookup: Like Constants but with extra lookup flexibility for highly data-driven applications
• Dictionary: Useful when adding a GWT module to existing localized web pages

Remember that dates and times are represented differently in different locales, if your forms use them.

The W3C also discusses Internationalization Best Practices in HTML content.

Answer 6

Normally, a user navigating a website will have a preference specifying the language of the whole site. I think it would be confusing to break this pattern.

So, in an intro page, or a user preferences page, allow the user to select a language; then, on the other pages, display a consistent set of controls to be able to edit the content on each page.

Answer 7

Are you making an administration page that allows users to change the text used in other pages in the application?

If so, you could use grid like in Zeta Resource Editor:

thumbnail http://img202.imageshack.us/img202/7813/zetaresourceeditor02.th.png

Or you could make a per-language list like in nopCommerce:

thumbnail http://img249.imageshack.us/img249/9079/nopcommerce.th.png

Answer 8

You can use javascipts as a resource file for your language like. language_arabic.js, language_english.js,etc.So when a use wants to see his preference language he/she has select the available languages from drop down list. Regarding this the user has to change the language settings from his/her computer. This is what I did while I was working a GIS project to customize a Geocortex IMF( http://demos.geocortex.net/imf-5.2.2/sites/demo_geocortex/jsp/launch.jsp ) site for an Arabic client.