In a sign-up wizard, how can I let a user enter the same fields for different languages on every step?
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:
First Name - a simple text input.
Validation: Required (Not empty), Min Length: 2 charsLast Name - a simple text input.
Validation: Required (Not empty), Min Length: 2 charsJob Title - a simple text input.
Validation: Required (Not empty), Min Length: 2 charsMy description - a simple text editor
Validation: (Optional), MAX Words (TBD)Profile image crop & upload
Validation: Required. The cropping will force the user to use the right image size.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:
- A Welcome screen - a static text
- first name, last name, job title, and description as "About Me"
- Profile image as "My Picture"
- 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:
Just do the process again from the beginning for each language.
Show the fields for all the languages with language indicator:
Splitting the fields,and when a user click on a flag the text will expand:
4.Using this solution:
Multi Language Name Input
- 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:
Group all the fields for each language in accordion or tabs:
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?