In this lesson task we were asked to analyse and redesign a form used to make appointments on a vet clinic website.
WHAT’S WRONG WITH THE FORM
The main problem with the form I found to be that it was hard to understand. The labels didn’t make much sense to me. Above the form, there was a long text with some kind of explanation of how to pick a subject, or “Reason” for contacting the clinic. I think that this should be avoided, and the form and its labels should be more self-explanatory for the average user. Also, there’s two different fields for choosing subject called “Reason Group” and “Reason”. This makes the form more complicated than it needs to be. I think these could be renamed and merged into one single field.
Next, on the first form (Part 1/3), there is no way of telling the user if an input field is required or not. This should be included to avoid error messages. The calendar used to pick a date for the appointment is also much too big for its use.
Furthermore, the form has its own scrolling function (aside from the page itself), which I found annoying. Each time you click on a date on the calendar or a time of the day, you will be sent to the top of the form section.
At last, I think both part 1 and 2 of the form (which are now split into different pages) could be merged into one single form/page.
REDESIGN
I used Adobe XD to create a redesign of the form.
ERROR STATES
Lastly, we should create three examples of how different components in the form would show an error message.
