Dangerous confirm modal best practices

[markov00]

We have multiple modals in Kibana that are used to ask for confirmation when you are leaving an usaved work in a page. For example, Lens uses the following

and Dashboard has a similar one with a different action and color:

Following EUI example for dangerous confirm modals: https://eui.elastic.co/#/layout/modal#confirm-modal Kibana Dashboard should align to the practice and use the dangerous color for the primary button.

But I have a doubt: is that a good practice? The difference with the simple Confirm Dialog is just the color of the button.
I know that the text of the button is also different, but to me it looks like it can be confusing.
WCAG says that we should not use the color alone and I believe that in this situation we should probably improve it by switching the buttons roles: the primary button should not be the destructive one, but the less destructive: like the Cancel, or something better named like Continue editing. Where the destructive button Dismiss/Discard/Delete/Destroy should be placed on the other side with less emphasis to avoid hasty interactions.

In this way we promote:

• a positive attitude and without throwing responsibility to the user (using a red color looks like an error done by the user, we instead want just to notify them about a dangerous thing)
• the primary action is a safe net in most situation, even without reading the message you can click it and nothing happen to your work
• this mechanism could be also used to teach the user on using the save button instead, as going back to editing stimulate them to find the save button next time, where instead discarding changes by error increase the frustration and the fear of use it.

Interested to hear your thoughts

cc @elastic/kibana-design

[1Copenut]

@markov00 Thank you for submitting this issue. I agree with you we should not be relying solely on color to identify destructive actions. Adding an icon to the primary (red) button could go a long way toward making the intent clearer.

I have mixed feelings about flipping the buttons' function. My unresearched take is users are fairly accustomed to the "something destructive will happen" pattern. Flipping that might create more confusion. We could alleviate this by making button text more explicit like "Leave and discard changes" instead of "Confirm" for instance. That's too wordy, but more clearly highlights what will happen.

[elizabetdev]

Thanks @markov00 for opening this issue.

According to our buttons guidelines, we shouldn't be using the word discard:

And I agree that we should improve our examples toward a more positive attitude.

I'll do research on the current practices in Kibana and I'll work with the technical writers' team to come up with better guidelines.

CC @florent-leborgne @gchaps

[florent-leborgne]

Those are good questions.
In terms of writing practices, this is the most commonly accepted and recommended pattern in most studies I know:

• Title: Question
• Description: Consequences or more details
• Main button: Main decision (confirming what is asked in the title) using a clear wording. Even if that's the destructive choice, it is the one aligned with the user's last action and assumed intent. The fact that it's a destructive action confirmation can, and should, be highlighted differently in addition to clear wording (red button instead of blue, or red border on the modal, bin icon...)
• Additional buttons: Ways out using a clear wording

I'm not sure why we don't recommend using discard, leaving without saving changes might be a good case for this.

Here's an example based on those I saw in the description:

Discard dashboard changes?
You will lose all unsaved changes made to this dashboard.
Keep editing Discard changes

@gchaps what do you think?

[florent-leborgne]

A way to make those messages more positive would be to offer to save in the initial question rather than discard, and the same pattern I shared above would apply.

Save dashboard changes?
Unsaved changes will be lost.
Discard changes Save and exit

[markov00]

Thanks everybody for sharing your thoughts and knowledge.
Florent actually wrote an interesting sentence:

it is the one aligned with the user's last action and assumed intent

I think this is the key!
If the intent is assumed, then I totally agree with synching the main button text with the main question. An example is clicking a close, exit, or remove button or clicking on a link in the page. But what is the assumption made by the user if that modal pops up when you click outside editing popover (this is what happens today when you edit a filter in Kibana, showin in a popover, and you click outside). Can we always assume that this kind of action, "click outside" is intended? I have doubts that this is always an intended behavior.
Probably we need to revisit completely the UX of that filter popover to solve it at the root.

[gchaps]

+1 to @florent-leborgne's suggestion:

Discard dashboard changes?
You will lose all unsaved changes made to this dashboard.
Keep editing | Discard changes

As we have found a reason to use "discard", we should remove that term from the "avoid" list.

[elizabetdev]

Thank you all,

Based on the discussion and feedback, I'm going to update the EUI docs:

• Remove the "avoid" from the list
• Update the confirm modal with the @florent-leborgne's suggestion.