Hello @Johnsalzarulo ,
Well, In cases like this, long forms are essential and unavoidable.
We all know long forms cause all kinds of frustration, the most infamous of which is when a user enters data and accidentally reloads the page, losing his progress.
Long forms like that also intimidate users—and cause them to leave the webpage without finishing the form—because long forms look like they require a lot of effort to complete (and they do).
Well, let’s see how this humdrum form can be made more intuitive, effortless for the users and nicer for everybody.
The project manager already confirmed the client requires every field on this form. We can't cut down the questions at all.
No problem with that, We will not remove any field, We just need to have more logic in the form, splitting up sections, allowing users to fill it out in any order, autosave. Anything we can do to make them work less is good. To avoid loss of progress, we get the Full Name and Email at the start, so we can follow-up in case of abandoning users.
I am attempting to adapt this to mobile and it's unusable.
Forms are the linchpin of all mobile interactions; it stands between the person and what they're looking for. We need to show to the user a really really simple form. A form that will require only few minutes to complete. Perception plays a crucial role in the process of estimation. The more complex a form looks, the more likely users will abandon the process. I played a bit with Input fields, Structure, Action Buttons to make it look easier to finish.
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?
The distance between the erroneous field and error message influences the efficiency of error correction. Top of form and bottom of form validation result in the longest amount of time to initiate correction (it also puts a high cognitive load on user memory), while inline validation results in the shortest.
For Mobile devices is better to place the error messages below the field.
What about aesthetics? How do you think this form looks? Is there anything we can do to make it feel more complete and polished?
It looks good if we prioritize the critical function of the form over all other functions. Balance is key. I've also designed using the Fibonacci sequence.
Can you outline an action plan to improve this form?
Phase 1: Gather Information: purpose, goals, Target Audience,
Phase 2: Planning
Phase 3: Design Prototypes and Mockups
Phase 4: Development
Phase 5 : Testing and Delivery
Hello @Johnsalzarulo , Well, In cases like this, long forms are essential and unavoidable. We all know long forms cause all kinds of frustration, the most infamous of which is when a user enters data and accidentally reloads the page, losing his progress.
Long forms like that also intimidate users—and cause them to leave the webpage without finishing the form—because long forms look like they require a lot of effort to complete (and they do).
Well, let’s see how this humdrum form can be made more intuitive, effortless for the users and nicer for everybody.
No problem with that, We will not remove any field, We just need to have more logic in the form, splitting up sections, allowing users to fill it out in any order, autosave. Anything we can do to make them work less is good. To avoid loss of progress, we get the Full Name and Email at the start, so we can follow-up in case of abandoning users.
Forms are the linchpin of all mobile interactions; it stands between the person and what they're looking for. We need to show to the user a really really simple form. A form that will require only few minutes to complete. Perception plays a crucial role in the process of estimation. The more complex a form looks, the more likely users will abandon the process. I played a bit with Input fields, Structure, Action Buttons to make it look easier to finish.
The distance between the erroneous field and error message influences the efficiency of error correction. Top of form and bottom of form validation result in the longest amount of time to initiate correction (it also puts a high cognitive load on user memory), while inline validation results in the shortest. For Mobile devices is better to place the error messages below the field.
It looks good if we prioritize the critical function of the form over all other functions. Balance is key. I've also designed using the Fibonacci sequence.
Phase 1: Gather Information: purpose, goals, Target Audience, Phase 2: Planning Phase 3: Design Prototypes and Mockups Phase 4: Development Phase 5 : Testing and Delivery