To help our users in data entry, we provide them with

  • Warnings (User's data MAY BE correct so we allow them to save)
  • Errors (User's data IS NOT correct; cannot be saved without fixing first.)

How should these errors and warnings be displayed when rolled up?

  1. "Multiple Errors and Warnings" in one banner
  2. "2 Errors" and "2 Warnings" in two banners

Since these fields can get very complex, we want to let our users if they can move on, what is wrong, and how to fix the warnings/errors. enter image description here

  • You could start by looking at this question and answer on message/notification classification: ux.stackexchange.com/questions/36783/…
    – Michael Lai
    Jun 19 '17 at 23:18
  • Do you really need to show the error and warning count? And even if it's a hard yes, why not just say. "Some fields need to be reviewed to continue" Jun 20 '17 at 6:09
  • When do the warnings appear and when do they go away? I can see some confusion coming up regarding the warnings. E.g. when I review the form after being given warnings, how do I know if I fixed the form it without causing another warning? Will I need to confirm once more? What if I did changes unrelated to the warnings during review that triggered new warnings? Etc Jun 20 '17 at 9:15
  • "According to Student's Birth Date, Scheduling Team should be Yellow", is it possible to have exceptions? If not, why asking it? Why not automatically? Jun 20 '17 at 9:47

Your banner messages are going to be used in conjunction with validating form submission and marking fields that are missing or fail validation etc. There is little value in just pointing out there are Errors or Warnings in the form, when the user can clearly see them marked on the actual fields (unless your form is a really long one, or has multiple tabs, where the problematic fields may not be visible at all).

Errors prevent form submission :

For most errors (missing data, failed validations) just having that splash of red on the page is good enough for feedback. You do want to also add a prompt that all required fields are not filled in, if the Submit button is left enabled and clicked by the user.

A grayed out Submit button, or a prompt on clicking it, clearly indicates the need to update this data.

Missed Warnings lead to incorrect data :

Its more important to highlight these so that users don't overlook them by mistake. Do you really need to roll up multiple warnings, if there are only a few perhaps consider having an individual line for each that is dismissable by the user.

For e.g., in the example above -

[Warning icon] The Graduation Year (2010) for this birth date is outside the expected range [X]

[Warning icon] Please review the Scheduling Team (Yellow) and confirm that it is correct [X]

In the case of a multi-page or wizard type of form, don't have banners and just provide a list of all warnings in a final summary after data entry (i.e. the form would have a 'Review' button that leads to list of warnings, and 'Back' & 'Submit' buttons at the bottom of that warning page).

Also, I personally consider using HTML 5 validations (for web forms) or similar highlighting to be better than asterisks esp. when many of the fields are mandatory. This way, entire form won't have red asterisks (HTML fields shouldn't light up as invalid before user tabs to them once).

Click twice to actually Save is a bad idea :

Mentioning this as its suggested in your Warnings banner. Have a Review page instead as I suggested above, or else just save on first click. Another easy option is to have a checkbox for 'I have reviewed all N warnings' near the Save button if you want to avoid Review interstitial.


Conceptually, they're not the same, so mixing both is not a good idea on most cases. However, in your specific case, you could be a bit more generic. Take this for example:

There are problems.

Then you could list what the problems are and what to expect from user's input.

This being said, I think you're on the right track with the content of error messages. But you're also creating some huge cognitive overload. You have messages, colors, icons and bars. You should just focus on being clear and descriptive. And some minimalism wouldn't hurt at all. Quite honestly, I get dizzy and don't know where to look, everything is calling for my attention, which means NOTHING is calling my attention as expected.

On top of that, I think errors and warnings aren't correctly defined. If user's input is incorrect, then that's an error, not a warning. Thus, the easy way out for your form is... all of them are errors. Bam! You don't need to distinguish those pesky warnings, you can get rid of all those icons and colors and colored bars and stuff. Just focus on what matters: the user providing a correct input.

Something to note

See how I mentioned "they all are errors?". Well.... yes. But the user doesn't need to know that.

Instead of using the word error, you can be more positive. A good way is to use humor and blame the system instead of the user. Another way is to use a conversational approach and guide the user through the expected behavior (you have it quite right so far).

For example, instead of "The graduation year for this birth date is not within yadda yadda yadda", you could use something like "Are you sure? This date doesn't seem correct" or "Snap, I can't believe it took you 12 years to finish High School!" or something like that

One last note on IA

In terms of IA, are you sure you need all those fields? For example, do you REALLY need the birth date? If so, do you REALLY need the grade or graduation year?

For what I can see, you want to create teams based on age (absolute or relative). Unless there are very strong reasons to do it otherwise, you should use only one parameter: absolute age (based on birth date) or relative age (based on grade or graduation year). Once you define which one, then everything will be simpler. And of course, if you use teh graduation year approach, active checkbox is not needed, the graduation year field will define that.

  • 4
    "Snap, I can't believe it took you 12 years to finish High School!" ouch! Are we sure the user would appreciate that? Jun 20 '17 at 6:04
  • Be very careful with adding humor, do it only when you know it’s going to be understood and well received. And even then it often doesn’t add to a better UX.
    – jazZRo
    Jun 20 '17 at 11:30
  • Of course it has to be used when appropriate, and still thoroughly tested. For what I see, this app seems to be directed to students, and it seems appropriate. Either way, the use of humor has been demonstrated to ease the burden on user and lighten the moods. Nowadays, most modern companies use humor on error messages (or at least some of them). Slack is an amazing example of that.
    – Devin
    Jun 20 '17 at 13:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.