There are many bad forms out there! Now that you know all about forms, it will be easy for you to spot bad form design. For this task, you will be redesigning a form used to make appointments at a vet.
Part 1
Apply what you’ve learnt as you critically analyze this form from the Paw Paws Vet Clinic and list out what you think is wrong with it. You only need to look at the first two steps:
Online booking 1/3
Online booking 2/3
Part 2
Use the software of your choice for this part e.g., Figma. Screenshot the website and then redesign the form section (both steps 1 and 2). To help guide you, here is the list of tips we covered in today’s lesson:
Keep it simple
Mark optional or required fields
Use visual design strategically
Use persistent labels
Consider the context within the user flow
Use verbs for the submission button text
Programmatically set the right keyboard for touchscreens
Make use of inline form validation when possible
Part 3
Choose three components anywhere in the form that will show error states i.e., what happens if the user submits the form and there is a problem? Remember that a good designer will try to help users with the use of error messages. Error messages are not there to make users feel bad if they’ve made a mistake filling out the form.
Original website form:
What I chose to change:
The original form is too long and requires information that also as stated above it can be filled in the clinic. I decided to include only the most important fields that are needed by the clinic.
The calendar in the original form takes too much space and it's hard to navigate. I changed it to a calendar under a button that appears only when clicked.
New Appointment form:
コメント