Here are my proposed solutions to the highlighted problems:
1) I am attempting to adapt this to mobile and it's unusable.
To make this usable on mobile:
I would advise that each Heading – Basic Information, Health History and Current Habits be made an expansible panel centered on the screen (so there’ll be three panels). When a user clicks on the Basic Information panel for instance, the First Name text and its input field would be the only elements that would show. When the user has typed his name and presses enter, the Last Name text and its input field can then show up. This should continue till all fields have been filled. While the Basic Information panel is active, all other panels should be disabled.
Note: All fields that appear should be on a single column. That is, First Name text on one row, First Name input field, on another row beneath it, Last Name on the next row beneath the First Name input field, etc. This would prevent horizontal scrolling and make for a better user experience on mobile phones.
For fields with drop-downs, for instance, Date of Birth, when a user clicks on the month, a new window containing all the months of the year can pop up while the form stays grayed out in the background. This would make for easy scrolling.
The Save Info button should also be centered on the screen and be disabled till the form has been completely filled.
2) 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 desktop:
Users should be allowed to toggle the panels, one at a time, to view their content. But once, a user has started filling the form, he mustn’t be allowed to proceed to the next panel until all validation errors have been cleared. For instance, when a user clicks on the Basic Information panel, all the fields for the panel should show while other panels stay collapsed. The user should not be allowed to proceed to, say, the Health History panel if there are validation issues.
On mobile:
Validation can be done as a user fills the form and fields appear. If for instance, a user enters an email address that already exists, a validation error should come up pointing to the Email address field, and the Date of Birth field would not appear until the error is fixed.
3) What about aesthetics? How do you think this form looks? Is there anything we can do to make it feel more complete and polished?
On desktop:
I agree with the idea given in the sample submission - the split screen, but I think that the background image in this current prototype can be left there since it shows happy faces and therefore depicts health and wellness which is what the app is about. The split screen (though I would choose a different picture or no picture at all) can be centered on the background image.
For Mobile:
I feel a split screen would be unnecessary here. You can just have the heading (Application) as shown in the prototype and the ‘This program is customized for each individual’…………………… in a smaller font underneath it.
You can then have 3 panels stacked on top of each other, well-spaced and centered on the screen and the Save Info button also centered and placed beneath the panels.
The Terms of Use text would also be in a very small font beneath the Save Info button.
Here are my proposed solutions to the highlighted problems: 1) I am attempting to adapt this to mobile and it's unusable.
To make this usable on mobile: I would advise that each Heading – Basic Information, Health History and Current Habits be made an expansible panel centered on the screen (so there’ll be three panels). When a user clicks on the Basic Information panel for instance, the First Name text and its input field would be the only elements that would show. When the user has typed his name and presses enter, the Last Name text and its input field can then show up. This should continue till all fields have been filled. While the Basic Information panel is active, all other panels should be disabled. Note: All fields that appear should be on a single column. That is, First Name text on one row, First Name input field, on another row beneath it, Last Name on the next row beneath the First Name input field, etc. This would prevent horizontal scrolling and make for a better user experience on mobile phones. For fields with drop-downs, for instance, Date of Birth, when a user clicks on the month, a new window containing all the months of the year can pop up while the form stays grayed out in the background. This would make for easy scrolling. The Save Info button should also be centered on the screen and be disabled till the form has been completely filled. 2) 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 desktop: Users should be allowed to toggle the panels, one at a time, to view their content. But once, a user has started filling the form, he mustn’t be allowed to proceed to the next panel until all validation errors have been cleared. For instance, when a user clicks on the Basic Information panel, all the fields for the panel should show while other panels stay collapsed. The user should not be allowed to proceed to, say, the Health History panel if there are validation issues.
On mobile: Validation can be done as a user fills the form and fields appear. If for instance, a user enters an email address that already exists, a validation error should come up pointing to the Email address field, and the Date of Birth field would not appear until the error is fixed.
3) What about aesthetics? How do you think this form looks? Is there anything we can do to make it feel more complete and polished?
On desktop: I agree with the idea given in the sample submission - the split screen, but I think that the background image in this current prototype can be left there since it shows happy faces and therefore depicts health and wellness which is what the app is about. The split screen (though I would choose a different picture or no picture at all) can be centered on the background image.
For Mobile: I feel a split screen would be unnecessary here. You can just have the heading (Application) as shown in the prototype and the ‘This program is customized for each individual’…………………… in a smaller font underneath it. You can then have 3 panels stacked on top of each other, well-spaced and centered on the screen and the Save Info button also centered and placed beneath the panels. The Terms of Use text would also be in a very small font beneath the Save Info button.