The project manager already confirmed the client requires every field on this form. We can't cut down the questions at all.
I would consider going for a full internal page design for a desktop/tablet view on this form since there are a lot of fields. The full page would include a left side navigation panel (anchoring to each of the 3 sections), a proper page title, breadcrumb and back button, the user will know where he is. I'd rather do this than a 3 steps form or collapsible sections, having all fields at hand is something valuable to desktop users giving them the freedom to fill in any order they want and skip items temporarily.
It is also very frustrating to lose your work on unfortunate events, like session timeout or browser crash, big forms demand time, users will need more time to fill it, maybe even step out of the keyboard to check some information, I would consider doing a quick authentication first to be able to save users progress or even a draft of the form.
I am attempting to adapt this to mobile and it's unusable.
A step by step form looks like the most reasonable approach for a mobile view in this case, using the sections already provided. I would also consider a chatbot approach, the user would be giving information as needed one by one.
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?
On the desktop/tablet view, I would validate field by field when out of focus, displaying the error message below, highlighting the field border and also highlighting the section title as a secondary hint of errors.
On the mobile view, the chatbot sounds like a better approach being able to validate the information one by one and having more space for a valuable and more explanatory error message. But if we decide to go with the sections step by step approach, I would highlight the fields and prevent the user from going to the next step until all errors are fixed.
What about aesthetics? How do you think this form looks? Is there anything we can do to make it feel more complete and polished?
I like the bootstrap form panel approach for an MVP it makes development lightning fast. But for a second release, as I have mentioned I would make this a full internal page layout, more robust, adding navigation features doing a better use of the space but still using bootstrap components, they work like a charm, I suppose we don't need to reinvent the wheel for this form.
Can you outline an action plan to improve this form?
Discovery (Get more context and requirements details)
Wireframing (Designing screens, flows and scenarios)
Approval (Getting approval or if not approved reiterate 1 and 2)
UX to DEV (Handing over the designs and doing a presentation if needed)
DEV Tasks Breakdown (Assist the DEV team to break it down into tasks)
Development (Support for any clarifications needed)
QA Testing (Support for any clarifications needed)
Merge to production (Could be implemented as AB to analyze metrics)
Bonus points if there's sample mockups or sketches although not required.
If you get interested in one of the approaches I described please let me know so I can provide sketches and we can make progress on it =)
Finally, I think the challenge seems simple at first glance, but there is a lot that can be discussed.
Good choice! Thank you!
Hello, here are my design challenge insights:
I would consider going for a full internal page design for a desktop/tablet view on this form since there are a lot of fields. The full page would include a left side navigation panel (anchoring to each of the 3 sections), a proper page title, breadcrumb and back button, the user will know where he is. I'd rather do this than a 3 steps form or collapsible sections, having all fields at hand is something valuable to desktop users giving them the freedom to fill in any order they want and skip items temporarily. It is also very frustrating to lose your work on unfortunate events, like session timeout or browser crash, big forms demand time, users will need more time to fill it, maybe even step out of the keyboard to check some information, I would consider doing a quick authentication first to be able to save users progress or even a draft of the form.
A step by step form looks like the most reasonable approach for a mobile view in this case, using the sections already provided. I would also consider a chatbot approach, the user would be giving information as needed one by one.
On the desktop/tablet view, I would validate field by field when out of focus, displaying the error message below, highlighting the field border and also highlighting the section title as a secondary hint of errors. On the mobile view, the chatbot sounds like a better approach being able to validate the information one by one and having more space for a valuable and more explanatory error message. But if we decide to go with the sections step by step approach, I would highlight the fields and prevent the user from going to the next step until all errors are fixed.
I like the bootstrap form panel approach for an MVP it makes development lightning fast. But for a second release, as I have mentioned I would make this a full internal page layout, more robust, adding navigation features doing a better use of the space but still using bootstrap components, they work like a charm, I suppose we don't need to reinvent the wheel for this form.
If you get interested in one of the approaches I described please let me know so I can provide sketches and we can make progress on it =)
Finally, I think the challenge seems simple at first glance, but there is a lot that can be discussed. Good choice! Thank you!