Warnings on a dialog

Question

What will be the optimal 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?

Answer 1

You have a couple of options:

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

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..

Answer 2

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.

Answer 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.