Design Challenge - Milosz Matyaszczyk
Opened this issue · 0 comments
UX wise:
Information about data encryption should be more visible - it is very important to make user feels safe at the very beginning.
I would create multistep form consisted of 3 parts: basic information, health history and current habits. Smaller chunks of data would provide less intimidating experience and user friendly process. It is especially important while working with product dedicated for medical/health related things. Multistep forms require progress bar that will navigate user through the process and show where she/he is at the moment - no one likes to feel lost, right? What is more, it makes users more motivated to fill out the form.
All elements on each page should be vertically placed - they are easier to read/scan/navigate through. It makes whole process faster and more natural as reading pattern looks like “I”, not like “Z”.
Another important aspect are input fields - those with related data (ex. name and surname, date of birth) should be closer to each other. They create one piece of information so why so far away from each other?
Other issue with them is the fact, that their length is not adjusted to size of input (5 digit Zipcode or weight are way shorter than email address, not mentioning “YES/NO” answers or numbers of meals per day).
Square with “lbs” in “current weight” suggests that other metrics can be chosen. Is that right? If not, it should be similar to “height” metrics (ft. and in.). If yes, that it should have arrow indicating this possibility.
We need to be sure, that input methods are adjusted to questions and potential answers. For example “Do you have the support of your family in making lifestyle change?” isn’t it more “YES/NO” question than the open one?
Consistency in description of dropdown fields is another aspect worth focusing on - few are described as “select” while another as “select length” or “select monthly travel count”. Yes, it is important to inform user what she/he is going to select, however it should be more standardised and fields descriptions should be shorter. What is more, in “health history” section dropdown fields don’t have arrows which would indicate that they are not dropdown fields.
What happens when user press “save info” button at the bottom of the application form? Will she/he apply? It suggests that nothing more happen than saving patient info in the system.
When it comes to handling error states, there is nothing more frustrating than finding out, that there is an error back at the top of the page. What about red frame around input field with message “enter valid email, ex. name@example.com” when email verification fail? It is easy to implement and user friendly solution.
Mobile version:
Dividing whole form into 3 parts make adaptation easier. All elements should be positioned vertically, in single column. In order to make our user life easier, we should implement few rules:
- minimum hight of question fields and buttons should be 48px while labels and placeholders should be 16px,
- let’s enable autofill of basic data that already are in mobile device,
- avoid drop-down menus,
- keypads should be adjusted to data type.
UI wise:
Not all dropdown fields have the same colours (those in “health history” are white, other are green). Design has to be coherent as different colours can indicate on different functionalities.
When it comes to font size, bigger should be used in field labels/questions. It is hard to read what makes whole process less user friendly and more time consuming.
As stated above, all elements should be vertically placed, one under another.
When it comes to used colours, I would recommend “less clinical”, more subtle colour palette.
Accessibility wise:
Are colours, navigation and generally whole form adjusted to users with special needs? For example can it be filled out by user without physical keyboard or mouse? What about colourblind users? Will they be comfortable filling out the form?
Action plan:
- I do a ux review and a brush up based on what I’ve got from the developer and my knowledge about the project. According to good ux practices I produce the list of changes and maybe few hand drawings of the flow.
- Sit down with our developer. We’re going through suggested changes. By the end of this meeting we have an approximate effort estimate for design and development.
- Effort estimate is take to the project manager in order to make sure we’re within the budget and deadline.
- If we have a green light, developer could start on ground work like backend integration. While ux is preparing a mockup for testing.
- Determine KPIs for the test - how do we know that the test is successful?
- Validation test and possible amendments.
- Visual design, developer handover and support.
Later, if we’re maintaining the solution, make sure that analytics for agreed KPIs are in place. If KPIs are not met we make changes.
Sketches
