Warnings on a dialog

by May.Lavi   Last Updated October 11, 2018 10:16 AM

What will be the optional solution for the following use case: A dialog is opened on the screen, when clicking on an action button to send the dialog (after filling in details), in some cases a warning should appear. The user can either accept the warning and send the data or make changes in the dialog and send it again. Where, ideally, I will place the warnings? Should I have a toggle button?

Thanks, May



Answers 3


I think, when sending this with error is possible, then displaying it on the top of the div element with error color defined in design system(red, pink, orange) and text, which inform user about warning and how to fix it.

Piotr Żak
Piotr Żak
October 11, 2018 10:05 AM

I would suggest that such functionality is better implemented in-place, rather than opening an extra dialog.

If you present a subset of information in such dialog, it could be lacking some context. This would then require the user to have to remember what was on the previous screen, or they might click cancel to go back to the previous screen (to remind themselves of the context), and then need to remember which errors were listed in the dialog.

It would be better to show all the warnings in-place in the form, beside the relevant fields. A overall warning can be placed beside the submit button, and the button itself can be disabled until the issues with the data are fixed.

If you need to allow users to override the warnings, provide a checkbox to tick which re-enables the submit button.

Franchesca
Franchesca
October 11, 2018 11:19 AM

You have a couple of options:

  1. Warning Notice/Alert
  2. Waning Notice/Alert with confirmation
  3. Confirmation Dialog

example

Warning Notice/Alert

Alerts tend to attract the attention, yet require no further action from the user and could be ignored in some cases, and as @Franchesca has mentioned, this pattern can be placed directly where the issue stands.

Warning Notice/Alert with confirmation

Alerts with confirmation are similar to plain alerts, but they do require action from the user to ensure that they are aware of what is going on, the downside is that it's not recommended to place it with the field, but instead with the action, this means the user would still have to scan and find where the issue is.

Confirmation Dialog

Dialogs attract extra attention as they are stronger in terms of interruption, that's why many designers use it only when it is crucial, they can also generate disappointment, can you imagine a user filling the form for a long time, and just when they thought they are ready, they get this annoying message that notifies them with the bad news.

So let's look at how it goes from the user perspective:

Alerts example:

  1. Hmm i need to fill the date, i want the entire data in my report.
  2. Oh, this is some strange message, i'll ignore it.
  3. Green generate button, all looks good!
  4. Big Report downloaded, took some time but i'm happy.

Alerts with Dialogue

  1. Hmm i need to fill the date, i want the entire data in my report.
  2. Oh, what's this message, i cannot ignore it otherwise i cannot download.
  3. Ah okay, i'll modify the dates.
  4. Scanning for date, Date modified, all is set.
  5. Green generate button, all looks good!
  6. Small Report downloaded, i'm happy.

Confirmation Dialogue

  1. Hmm i need to fill the date, i want the entire data in my report.
  2. Green generate button, all looks good!
  3. Oh, what? now you're telling me? sigh.
  4. Screw it, big report so be it, i'm not going back now!
  5. Big Report Downloaded, Compromise made, Feels meh..
UX Labs
UX Labs
October 11, 2018 13:11 PM

Related Questions


Allow push notifications dialog in android

Updated May 27, 2015 23:07 PM

Are modal dialogs WCAG compliant?

Updated September 28, 2016 09:06 AM