This application form as it stands could definitely be improved. Here are my thoughts. I will start with the most important area - the frustrating user experience...
I am trying to figure out how to best handle error states. Example: the email used to sign up must be unique. Handling this validation with the complexity of the form is difficult. This user experience is frustrating, do you have any thoughts on how to improve it?
Handling error states
First of all, I would recommend that, wherever possible, live in-line validation is used. By this, I mean, invalid (as well as valid) values are highlighted immediately with user input. A good example of what I mean can be seen here…
Unique email validation
Correct me if I’m wrong but the frustration is appearing because you’re trying to handle the email validation alongside the form with all its complexity. To take the pain out of this process I suggest that in order to join the program, a basic name/email/password form is used to onboard new users. Returning users can then access their account via an email/password form. This would make the sign up process a lot cleaner and allow the user to feel like they are part of the program within a few simple steps. Moreover, including social login buttons would enable an even quicker sign-up!
This approach would also open up a communication channel for users that start the form but don’t end up completing it - they could be prompted via email to complete the form or send them enticing content/offers. Perhaps we could use these benefits to convince the client that this is a worthwhile approach. Is there any reason why this is not being done at the moment?
If the client would be happy to pursue this avenue, I’m happy to draw up a user flow for the register and login process, please let me know.
The project manager already confirmed the client requires every field on this form. We can't cut down the questions at all.
I am attempting to adapt this to mobile and it's unusable.
Even if all the fields are required, we can still make this a pleasant user experience by breaking the form down into manageable chunks and gamifying the process a little bit with a progress bar. Breaking the content down into smaller chunks will also help with the mobile experience.
I would restructure the form into the following sections so that similar information is grouped together…
Account: first name, last name, email, password - already filled in when they register and available in a separate section
Section 0 - Preparation page: details on what the form will ask, info they may need to hand, how long it takes to complete, plus the benefits of signing up. Also include a big call to action button labelled ‘Join the programme!’ or something like that.
Section 1 - Basic info: zip code, weight, height, DOB
Section 2 - Habits/Lifestyle: smoker, pregnant and all questions in ‘current habits’
Section 3 - Health history: all questions in health history
Section 4 - Hooray page: this will be shown once the form is complete and will congratulate the user and inform them about what will happen next.
You should be able to navigate through the sections both backwards and forwards and see the completion state of each of the sections.
Since the form is so long and has many questions - once the user is logged in, the form should be autosaving or at least saving when a section has been completed through the use of a ‘Save and continue’ button. Users would not be pleased if they lost all the information they have entered.
What about aesthetics? How do you think this form looks? Is there anything we can do to make it feel more complete and polished?
Placeholder text in form fields is harmful. I would suggest changing all the text input boxes so that they have floating labels that move to the top of the form field when the user selects it to start typing.
Split date fields with drop-downs for month, day and year require a lot of unnecessary steps. This increases interaction cost by adding additional clicks and scrolling. It is advisable to avoid this design pattern. I would suggest changing these to input fields that only allow numbers - on mobile, the number pad can appear to aid users in completing the form correctly.
For the height/weight fields, you may want to give the option to change to metric units. If this is the case, I would add a toggle button to the right of these controls. For height, the toggle would change the 2 inputs to just one and ask the the user for their height in cm. For weight, you may want to consider turning the lbs box into 2 inputs (stones and pounds) to match the imperial height group of inputs (just for consistency’s sake). For the metric version, I would suggest using just one input and for the units to be kgs. One last thing to polish off these controls, I would consider unifying their presentation by making the units appear as input-group-appends (the lbs unit already appears in this way so it would look better if they all appear that way).
The answers requiring yes/no answers may be better displayed as radio buttons. Rather than leave them with default values (may result in users unintentionally leaving the default value selected), the user must positively select an option.
All the form fields definitely need some ‘breathing room’ so a bit more padding would help and a higher background-foreground contrast could speed up registration and reduce cognitive load.
In terms of additional aesthetics, it would be nice to know the target user persona so that we can tailor the feel of the form to them. For example, a nice animation on completion of the form would be a lovely visual treat for completing the long form and make the user feel like they already on the path to achievement! Knowing the exact target audience could help us style this animation and the visuals better.
Action plan
It would be nice to get answers to my queries above. I may also have some follow-up questions so if we could schedule a half-hour video call where we can share screens that would be beneficial. We could go through my sketches and make sure we’re in agreement as to the goals of the redesign.
From there, taking a mobile-first approach I’m happy to produce a wireframe mockup of all the different form factors - mobile, tablet and desktop. These can then be used to make sure all the stakeholders are happy with the layout and the general flow.
We can then adapt the wireframes to include colour, styling, fonts, graphics, etc - a hi-fidelity prototype that can be shared and tested by willing volunteers to obtain feedback - maybe including some people already on the programme in return for a small reward?
When everyone is happy with this mockup - we can then start to code the solution. If we have built the prototype well, using atomic design principles, then the components will be easy to build and assemble into a functional, good-looking form.
Once built, the fun doesn’t stop there. Testing the form for usability should be done by whatever means are available. It is vital to get feedback that we have achieved the goals we set out to achieve. That feedback should be used to inform the next iteration of design tweaks.
Thoughts
This application form as it stands could definitely be improved. Here are my thoughts. I will start with the most important area - the frustrating user experience...
Handling error states First of all, I would recommend that, wherever possible, live in-line validation is used. By this, I mean, invalid (as well as valid) values are highlighted immediately with user input. A good example of what I mean can be seen here…
Unique email validation Correct me if I’m wrong but the frustration is appearing because you’re trying to handle the email validation alongside the form with all its complexity. To take the pain out of this process I suggest that in order to join the program, a basic name/email/password form is used to onboard new users. Returning users can then access their account via an email/password form. This would make the sign up process a lot cleaner and allow the user to feel like they are part of the program within a few simple steps. Moreover, including social login buttons would enable an even quicker sign-up!
This approach would also open up a communication channel for users that start the form but don’t end up completing it - they could be prompted via email to complete the form or send them enticing content/offers. Perhaps we could use these benefits to convince the client that this is a worthwhile approach. Is there any reason why this is not being done at the moment?
If the client would be happy to pursue this avenue, I’m happy to draw up a user flow for the register and login process, please let me know.
Even if all the fields are required, we can still make this a pleasant user experience by breaking the form down into manageable chunks and gamifying the process a little bit with a progress bar. Breaking the content down into smaller chunks will also help with the mobile experience.
I would restructure the form into the following sections so that similar information is grouped together…
Account: first name, last name, email, password - already filled in when they register and available in a separate section
Section 0 - Preparation page: details on what the form will ask, info they may need to hand, how long it takes to complete, plus the benefits of signing up. Also include a big call to action button labelled ‘Join the programme!’ or something like that.
Section 1 - Basic info: zip code, weight, height, DOB Section 2 - Habits/Lifestyle: smoker, pregnant and all questions in ‘current habits’ Section 3 - Health history: all questions in health history
Section 4 - Hooray page: this will be shown once the form is complete and will congratulate the user and inform them about what will happen next.
You should be able to navigate through the sections both backwards and forwards and see the completion state of each of the sections.
Since the form is so long and has many questions - once the user is logged in, the form should be autosaving or at least saving when a section has been completed through the use of a ‘Save and continue’ button. Users would not be pleased if they lost all the information they have entered.
Placeholder text in form fields is harmful. I would suggest changing all the text input boxes so that they have floating labels that move to the top of the form field when the user selects it to start typing.
Split date fields with drop-downs for month, day and year require a lot of unnecessary steps. This increases interaction cost by adding additional clicks and scrolling. It is advisable to avoid this design pattern. I would suggest changing these to input fields that only allow numbers - on mobile, the number pad can appear to aid users in completing the form correctly.
For the height/weight fields, you may want to give the option to change to metric units. If this is the case, I would add a toggle button to the right of these controls. For height, the toggle would change the 2 inputs to just one and ask the the user for their height in cm. For weight, you may want to consider turning the lbs box into 2 inputs (stones and pounds) to match the imperial height group of inputs (just for consistency’s sake). For the metric version, I would suggest using just one input and for the units to be kgs. One last thing to polish off these controls, I would consider unifying their presentation by making the units appear as input-group-appends (the lbs unit already appears in this way so it would look better if they all appear that way).
The answers requiring yes/no answers may be better displayed as radio buttons. Rather than leave them with default values (may result in users unintentionally leaving the default value selected), the user must positively select an option.
All the form fields definitely need some ‘breathing room’ so a bit more padding would help and a higher background-foreground contrast could speed up registration and reduce cognitive load.
In terms of additional aesthetics, it would be nice to know the target user persona so that we can tailor the feel of the form to them. For example, a nice animation on completion of the form would be a lovely visual treat for completing the long form and make the user feel like they already on the path to achievement! Knowing the exact target audience could help us style this animation and the visuals better.
Action plan It would be nice to get answers to my queries above. I may also have some follow-up questions so if we could schedule a half-hour video call where we can share screens that would be beneficial. We could go through my sketches and make sure we’re in agreement as to the goals of the redesign.
From there, taking a mobile-first approach I’m happy to produce a wireframe mockup of all the different form factors - mobile, tablet and desktop. These can then be used to make sure all the stakeholders are happy with the layout and the general flow.
We can then adapt the wireframes to include colour, styling, fonts, graphics, etc - a hi-fidelity prototype that can be shared and tested by willing volunteers to obtain feedback - maybe including some people already on the programme in return for a small reward?
When everyone is happy with this mockup - we can then start to code the solution. If we have built the prototype well, using atomic design principles, then the components will be easy to build and assemble into a functional, good-looking form.
Once built, the fun doesn’t stop there. Testing the form for usability should be done by whatever means are available. It is vital to get feedback that we have achieved the goals we set out to achieve. That feedback should be used to inform the next iteration of design tweaks.
I look forward to your response.
Thank you