The other day I was attempting to book an airport transfer and came across a terrible form. It took me quite some time to work out how to actually book the transfer I needed and even then I wasn't convinced I was going to get to the airport on time.
The hotel I was staying at sent me a link to book the transfer. Opening the page, the form looked like this:
Before even touching the form, all fields are marked in red, suggesting errors. It's not great to start off with your form already in an error state before being touched.
Also, these errors are indicated with colour alone which means that anyone that doesn't perceive colours would have difficulty knowing there's supposedly anything wrong with these inputs.
The form does not have any error messages that show if a field is incorrectly filled in. They rely on changing the border of the input from grey to red. If there is an error with an input it should have a written error message close to the input field. An error icon next to the text would also help to indicate that it was an error text and not just supporting information.
Once you fill in the inputs, each one turns from red to grey. There doesn't seem to be any validation aside from the inputs not being empty. But then another problem:
I've filled in all the required fields, all the red is gone but the "Go Forward" button is still disabled. So now I'm sat staring at this form with no idea what is wrong and wondering if I will ever get to the airport in time to catch my flight. Can you work out how to fill in the rest of the form?
I did work it out eventually. There are three icons in circles at the top of the page labelled "Info", "Arlanda" (the name of the airport) and "To the hotel". The Info icon was coloured as that was the step I was on but the other two were greyed out. Turns out, greyed out in this case did not mean disabled, unlike the button at the bottom of the form. Clicking on the Arlanda icon took me to the second part of the form where I could enter the rest of the details needed to make the booking.
I finally got a confirmation, although after the state of this form I did not really trust it and had to double check with the hotel on arrival that it had indeed worked. I'm guessing they never did any user testing before releasing this into the wild!
So how do you make your forms better than this?
- Don't start off in error mode
- Indicate errors with more than just colour alone
- Have clear written error messages for each input field
- Avoid using disabled buttons wherever possible. It's better to let users press the button and see an error for why the form didn't submit than have to guess what they need to do to make the button not disabled
- If something is clickable don't make it look disabled
- Do some user testing! Surely one user test would have picked up how terrible this form is before ever going live in production?!
Top comments (1)
And forms which can't simply remove spaces from phone numbers, which reject emails with + or - or other RFC822-legal characters in the username.
Biggest unrelated bugbear: pop-up windows which steal focus or appear under my pointer milliseconds before I hit the return key or mouse button, and I agree to something I didn't have time to read: windowing systems should ignore user input for 1/2 second after the effective focus changes.