Bad error message for required field: "Please enter value"

Question

I just watched someone struggle with a form.

The form was part of a normal online shop. It had reloaded after submitting, annotating the required field for the phone number with a red text above, reading "Please enter value" (translated from German "Bitte Wert eingeben", matched well by the English variant).

It was clear enough that it was about the required field, although it was scrolled out of sight (which is to blame on Microsoft's netbook screen specification, mostly).

But the irritating part was: The person understood the word "value" in "Please enter value" as "amount of money" - being unfamiliar with the computer science term "value of a variable", and nervous about not doing anything wrong, it caused a strong unsettledness.

Now, this text was obviously not good.

Ignoring other ways of notification except a label:

How to find a good text for it?
Possibly varying texts for different fields?

Answer 1

This is known as "microcopy" in the UX world. A couple of good resources include

• http://www.smashingmagazine.com/2013/06/17/five-ways-prevent-bad-microcopy/
• Nielsen-Norman group has a number of articles and training conferences on writing for the web: http://www.nngroup.com/topic/writing-web/

One of the big problems with form fields and validation, especially, is that engineers tend to write the error messages. They're the ones who write the code and know how it can go wrong — it's not usually up to a designer to figure this out, and the error codes get added at the last minute. For an engineer it's absolutely logical to say "Please provide a value," or even "Invalid value" (Personally I have banned our engineers from ever using the word "invalid" because it's so negative to people who see it). But as you noticed, most other people don't understand these words in the same way.

• Unique error messages for each form field — you're right about that, it is helpful.
• Use simple terms. ("Fill out your phone number" rather than "Field cannot be null")
• Use concrete language. ("Please add your phone number – it's required.")
• If you have the budget, hire a copywriter to write your UI text and labels. This may not always be an option, so watching users will help you understand where your language doesn't make sense to them.
• Do usability studies! This will let you know whether people understand what your fields mean.
• Finally, you can also see how similar sites of big companies label their fields. If you're doing a shopping cart, you might look at Amazon.com. So many people are familiar with Amazon that they are used to how Amazon does it, and if you use similar words and terms, they are more likely to understand those on your site too.

Good luck!

Answer 2

Just make them clear. Like "Please enter a phone number" for a missing required. Or "Please enter a valid phone number. The phone number you have entered is too short."

Tell the user exactly what is required. It is also best to validate before submission with JavaScript and give them instant feedback.

Show the error message right near the input field, and also do something to highlight the invalid input such as a very light pink background and a red outline.

When the user does try to submit scroll them to the first error and animate the error message so they are aware of it and focus the field.