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.
Apply what you’ve learnt as you critically analyse 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
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
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.
The form looks confusing and overwhelming due to the amount of questions and the way they are asked. It also feels weird to start the form with these questions, instead of asking about personal information first. The form looks much longer and more advanced than it need to be.