Best UI/UX for Multilanguage data inputs in forms

Question

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.

Answer 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

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.

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.

Answer 2

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.

Answer 3

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.