How best to draw the users to a potential issue in the data they have entered

Question

I have a form where the user can update project information. A project is linked to an organisation, and an organisation has license(s) - which has an expiry date. When updating the project, if the organisation that was selected doesn't have a license with an expiry date greater than today, I need to alert them to that fact - but still allow them to save the data.

A simplified version of the form:

^{download bmml source – Wireframes created with Balsamiq Mockups}

Is there a good/effective way to bring the users attention to the field?

The only example I have seen is dell: http://configure.ap.dell.com/dellstore/config.aspx?oc=u421301au&model_id=poweredge-r320&c=au&l=en&s=bsd&cs=aubsd1&

When selecting an alternate raid configuration, a notice appears at the top of the page, with related errors with overall configuration. Is this a good example to go by?

Answer 1

As I understand it, your problem is not with managing their input of the data, but rather in giving them important information about their choices.

For that I would suggest avoiding any method that looks similar to a validity check of input data, as this will likely confuse a person.

As this seems to be important information with possibly serious consequences, I would present them with a modal popup informing them that they have selected an organisation without a current license. This message should also inform them of whatever the consequences of this choice may be (unless it would already be clear to them), and ask them whether they would like to proceed with this or change the organisation.

If the choose to go ahead, I would still use a warning sign next to the organisation and some text letting them know what it is about.

Answer 2

While what you have linked is good, it is no longer the norm these days. The standard is to highlight the data entered and place a message right below/beside the control in which the data was entered.

Take a look at the example here Enter an invalid email address and you will see the alert. as below:

Answer 3

As curious_cat pointed out, you should avoid anything that requires interaction for the user to continue (message boxes, overlays etc). To avoid having the user seek the field in the form, you could simply place the warning label next to it as others have pictured.

For warnings, I would use a yellow label and the universal warning symbol (triangle, exclamation mark). Most people can dissociate red errors from yellow warnings, although you should make sure color blind people can distinguish both.

A softer phrasing can also help the user distinguish between errors and messages. For instance, it is recommended that the user does something, because it might cause a problem, and it could affect the user.

As for errors, make sure you tell them exactly what is wrong. "The field is invalid" isn't as clear as "The date you have entered is smaller than today. Although it will work, it is recommended that..."

Answer 4

I've found that the vast majority of the time simple tried & true active form validation techniques, such as JohnGB and Vijay proposed above, bring the best results in grabbing the users attention to potential issues without much distraction.

What's nice about those techniques is that they can be subtle enough to not ruin the flow of a form, but stand out as users move from field to field.

That said, though, I'm not a fan of submission-based validation as the only line of defense. If you have a complex form or long form, making users go back to multiple fields after attempted submission is both annoying to the user and a poor use of time. Inline, active validation wherever possible leads to a better user experience overall.

Answer 5

A part of this will depend upon:

1. How often does a typical user come across this error in a typical day
2. How critical is the error or an event where the user does not notice it

A blocking pop-up Warning that needs an OK click would be safe but annoying if frequent.

A highlight (e.g. @Vijay above) brings attention more subtly but can be missed. Sometimes I've seen a squiggly line or text appear right next to the field too.

Lots of options.