User Friendly Error Messages

It is a truth universally acknowledged that “if it ain’t broke, don’t fix it”. Hence why it is important when creating web forms to let your users know if something isn’t quite right.

Whether it’s requiring a space between postcode sections, not allowing certain characters in an address, or a required field being left blank, users need to know when something is wrong. If they don’t, how do you expect them to fix it?

Ideally, the best way to get around user input error is to have the user type in a little information as possible. Let them fill in their address using only their postcode and a drop-down menu, only letting them type it in manually if it doesn’t match up to your list. That way you know it’s all valid and everybody leaves happy…. right?

WRONG. Not if you manage to cock it up anyway.

Enter our friend TK MAXX, one of my all time favourite shops. This freezing cold, icy morning, I realised I needed new boots. 10 minutes later I was ready to order my new lovelies from the TK MAXX website only, I was stumped. Every box I could see in the billing address form had green ticks, there were no visible error messages and yet, I couldn’t continue with my purchase. Every time I clicked “Accept and Continue” – nothing happened.

I tried using guest checkout instead of registering, I tried entering a full birthday instead of just the year (even though it appeared to have passed the validation) I tried everything I could. Becoming swiftly bored and beginning to contemplate just going into town at lunch, I tried to enter my address manually. Surely it was fine, I had selected it from the drop-down TK MAXX had provided me.

tk broken

Nope. I was missing a country and the form didn’t like the / in my flat number. The / which came from their dropdown. Due to the inline error messages, these had all been hidden from me as all the address fields were also hidden.

hidden errors

With e-commerce cart abandonment rates at around  68.53%, this is a shockingly bad user experience which can only serve to increase abandonment rates for TK MAXX.

TL;DR

Error messages are only useful if people can see them. Also, don’t provide data which fails your own validation.