In a sign-up wizard, how can I let a user enter the same fields for different languages on every step?

Question

I need to design a signup wizard for a web app that is going to be used only inside a firm.

The app can be accessed from desktops and mobiles.
The average end-user is not very technical, so the process should be friendly as possible.

All the users are first created in the back-end with their full name, email, and job title.
Then they will get an email with a link to complete the rest of the data on their own using the wizard.

In addition to the details mentioned, each user can be assigned with additional languages (5 max). He have to enter the details again for different languages.

Here are the current fields that are going to be in the wizard and their validation methods:

1. First Name - a simple text input.
   Validation: Required (Not empty), Min Length: 2 chars

2. Last Name - a simple text input.
   Validation: Required (Not empty), Min Length: 2 chars

3. Job Title - a simple text input.
   Validation: Required (Not empty), Min Length: 2 chars

4. My description - a simple text editor
   Validation: (Optional), MAX Words (TBD)

5. Profile image crop & upload
   Validation: Required. The cropping will force the user to use the right image size.

6. 3 fields for phones (mobile, office, etc..) - A multilingual phone field, forcing the correct format.
   Validation: At least one of the phones should be filled.

It's important to note that more fields will be added in the far future.

First, I grouped the fields into steps:

1. A Welcome screen - a static text
2. first name, last name, job title, and description as "About Me"
3. Profile image as "My Picture"
4. Phones as "Contact details"

I decided to use material design fields, and show step progress with a number and a label. Each completed step will be green and marked with "V". The current step will be colored with the company logo, and disabled steps are grayed out.

There are Next and prev buttons so the user can go back and fix something (the progress step are also clickable)

Here's a demo sketch:

As I said in the intro, some (or even all) of the users should fill in the details again for all the languages defined for them in the back-end. For those without language assigned will get the simple wizard above.

All the textual fields will need to be translated, and a user can have different \ more data for his contact details in other languages.

My problem is how should I handle multilingual content that will be easy for a novice computer user to use and understand?

Here are some solutions that I came up with:

1. Just do the process again from the beginning for each language.

2. Show the fields for all the languages with language indicator:
   

3. Splitting the fields,and when a user click on a flag the text will expand:
   

4.Using this solution:
Multi Language Name Input

5. Doing multiple step iterations: First, we enter the data in English. After that for each language the user will get a message telling him to fill the info for the next language.

In that stage, the color palette of the wizard will be changed to that of the flag, and maybe even show the country's flag in opacity:

6. Group all the fields for each language in accordion or tabs:

7. Just create a new step for each language

All the solutions seem cumbersome, especially when more then 2 languages are involved, and when used in a mobile phone.

Anyone can suggest a nicer solutions?

Answer 1

Before thinking about the solution, I would try to understand the type of element chosen for the action to be carried out. The interface is divided into three parts:

• Progress stepper
• Working area
• Navigation

And a new option is needed: a conditioner to the work area. This conditioning factor can be in each of the areas, with its pros and cons.

Inserting the condition in the Progress Stepper means including substeps within each step, which would imply dirtying each step until it prevents the user from truly understanding whether the step is complete or not. Or breaking the basic meaning of a Progress Step:

Steppers display progress through a sequence of logical and numbered steps.

Placing the condition in the work area would imply redoing a different interface not only for each level but also for each item within this level. I don't think it's the most polished option.

My option would be a condition within the navigation, if necessary with a clarifying text of the need for it to be completed in each language:

Answer 2

As per my understanding from your question, users need to fill the same fields in other languages too and the languages will be mandatory not optional:

In addition to the details mentioned, each user can be assigned with additional languages (5 max). He have to enter the details again for different languages.

and

As I said in the intro, some (or even all) of the users should fill in the details again for all the languages defined for them in the back-end. For those without language assigned will get the simple wizard above.

So giving the user and impression or hint that the different languages are mandatory, I will preferer a sub/secondary step in each main step for each language just below the main steps.

Keep the status of progress same like that of the main steps.