Error-message to indicate invalid data has been entered?

Question

Sorry for the subjective question....

I'm working on the micro-copy that appears on a web-form when a user submits invalid data: eg: invalid date/time. We've used inline validation and date time pickers and masks to really try and minimise the risk of invalid data being submitted but we're pretty sure the user is still going to come up with some problems. The app is designed to be used by flight crew, so pilots and air stewardesses and is intentionally a little bit whimsical.... the text I have used so far is:

"Oops, there was a problem with some of the data you entered. Don't worry let's fix that right now"

This is proving a controversial choice as it doesn't seem to be authorative enough, but is in keeping with the micro-copy used in the rest of the app. Combined with this we are highlighting individual fields and telling the user how to fix the individual field istself - this is general alert text which is displayed in the page header Does anyone have any good suggestions or design patterns for better UX?

Answer 1

It sounds like you're showing an alert (I assumed so from the length of the text). How about displaying a much shorter, "inline" message under the date field, e.g. "Oops, 'Z' isn't valid text". This would happen immediately as the user is typing; it is also less disruptive to the user's workflow.

I would reserve displaying an alert for when the user clicks on the Submit button, but hopefully the inline alerts as-you-type will mean that you almost never need to show an alert.

Answer 2

It's of more help to the user to tell him just exactly what was incorrect about the previous input. For example, do you expect a 4-digit year and did the user only enter the last two? Then tell him what he did wrong and how to fix it, or he might make the same mistake again, causing you to throw the same message again, and irritation grows. Sure, tone plays a role but a message with information that is truly helpful is what it's really about.

Answer 3

I'd agree with both previous answers to some degree, but I'd also ask a question. When you say 'inline validation' are you just referring to messaging or how you're actually validating the data inputs? The actual validation of the data is one thing, the error messaging is another.

Generally, the best practice for validation is two-stage. Use client side validation to ensure that what is being entered passes the first sniff test and you can pretty easily provide inline feedback as a field is filled in to let the user know whether what they entered works properly. However, server validation is pretty important as a second step so that there aren't any surprises before the data is committed.

With regard to messaging, as I just said you can provide quick messages as fields are filled in, but I think the text you've suggested is too casual. It may be in keeping with the tone of other site copy, but as Max says, making it clear to the user what the mistake are, in context, is important. I don't really want a generic friendly message like yours nearly as much as I want something like, "Please correct your email address. The one you've provided doesn't appear to be valid."

If it's a normal form, one of the things I like doing after client-side validation is complete is to provide overall validation for the form input, server-side. That is then your opportunity (which hopefully shouldn't really be an issue most of the time, if client-side validation is accurate) to come back with specific messaging, but I'd display it in context if possible, so that the user knows exactly which fields still need attention.

I know why Hisham is suggesting an alert box on submit, but IMHO alert boxes are kind of clunky, especially when you can modify the form itself to provide greater granularity to your messages for your users.

Answer 4

Keep it short and sweet. Prescribing to Steve Krug's Don't Make Me Think, a message like "Oops, there was... blablabla...now" is way too much to think about.

Rather use the space to show a message that will help the user correct their error as quickly as possible.

For example:

If the user forgot to fill in their last name, show one of the following short messages in red and highlight all erroneous fields in red:

1. Enter your last name.
2. Last name required.
3. Please enter your last name.

Always give the first empty field caret focus so the user can immediately start typing and correct the error.