5

I'd like to know what is the best UI/UX to support editing multilanguage data inputs for forms in an web-application?

By multilanguage data inputs I meant, I want the user to be able to input ie. [Item Title] for EN like "Apple" and "Pomme" for FR. Not the language for the form labels/application itself.

I've already looked at various CRM,E-commerce, and the likes that support this, and they all have different implementation, which for me has its own pros and cons.

Problems:

  • Some forms can be very long with only one or two field need to be translated to other language OR short forms with a lot of field to translate, and combination of both.
  • Design must be able to support for 2+ languages and responsive to at least mobile phone.
  • Fields needed to be translated not always able to be grouped separately as it would break the flow.
  • It'd be nice if user can compare with the original version (in EN) when translating.

What I thought:

  • Make the language into tabs so user can easily see other language for comparison

  • Disable global fields (fields that is shared between language, not a language-specific) on translation tabs (meaning, any language other than EN)

Some of roughly design of the application I'm currently making PS: Top right Language is to change the application language, while the Language in the body is to change the data language.

enter image description here enter image description here

1

If I understood your question correctly, the objective of your project is :

  1. Develop an application that will have custom-forms.
  2. The application will have multiple languages including rtl ( Arabic,etc).

In this case, I would recommend your solution

Make the language into tabs so user can easily see other language for comparison enter image description here

All you need to do is create a table in your database. I believe you are using php, you can pass the string of each dynamic word to be parsed in the database.There's many libraries that will help you to do all of that in few minutes.

The user/customer will edit the language at their convenience. enter image description here

In case you want to have rtl, you need to have an additional rtl stylesheet of your application. When the user chooses arabic, the application will switch to the rtl-stylesheet.

  • Thank you for answering! However, what I want is to support the multilanguage for the input data not the form text. ie. User input the item title for EN like "Apple", while in FR that would be "Pomme". I'll edit my question to make it more clearer :) – margie Jul 29 '16 at 7:23
1

What I understand for your design is you want the user save first the data in English, then duplicate the product and edit it for other languages.

Also, I understand you want to add options that offer an automatic translation. In this case, I like your solutions with tabs, because you offer a small number of choices.

I don't really see why you think you need a better solution. I think the user need just an informative subtitle/ description.

I also think you must make more visible the select for the language who will insert the value in the database to let user see easier the role of the tabs.

If you have differences in the form for each language, you can disable that field.

Hope this helps.

  • Thanks for the response! I'm leaning towards the tabs too, but I wonder if that will confuse the user? I'm trying to make the user only able to change one language at a time, while other language act as a comparison (w/ all fields disabled). And for non-language specific fields, if user changes the data, it'll also be reflected on the other language to show that they are not exclusive to a language. Only after a user cancel/save the changes on the edited language, the other languages will be open for edit. Do you think the UX is good enough like this or should i consider other option? – margie Jul 29 '16 at 10:43
0

The second version with the blue buttons is much more clear because of the "Translation" label before the language selection for the form. Otherwise, I might wonder why the language for the form wasn't in the same language I chose for the application.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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