Intuitive dialog for choosing whether to close and lose changes or keep editing

Question

It's a pretty simple use case.

I have a modal with an editable form. If the user enters something into the form and then tries to cancel, we want to warn them they have unsaved changes, which they'll lose if they proceed.

For some reason, this dead-simple UX has proven tricky to execute. Whichever combination of colors and text I try, it feels confusing. Even I, as the developer, have to stop every time and carefully consider the options.

Here's how it looks currently:

• Color is yellow, which is branded as "warning" in the UI. It also has a warning icon.
• The title says: "You have unsaved changes"
• The question is "Are you sure you wish to close?"
• To the left is a neutral-looking "Don't close" button.
• To the right is a "Close" button with a warning icon, with "secondary action" color that matches the original "Cancel" button.
• "Don't close" is the default focused option

Note that this needs to be somewhat generic, as it's used all over the place.

Does anyone have any ideas how this can be improved?

---

Update February 2022

Since there is no way to post a followup on Stack Exchange (as far as I know), and people have given me a lot of great advice, I'll put a little update here.

I finally had the time to put in the first round of redesign. Here's where I am at now.

The changes I've made:

• Removed the always visible focus rects from buttons (the dotted line). They will now show up only on keyboard navigation.
• Texts modeled a bit on Twitter's modal, as someone suggested. The main question is in header. The explanation (that no one reads) is in the body.
• Better button labels, describing what will happen more clearly.
• Icons are changed, so that the same icon you saw when you clicked "Cancel" is now on the "Lose Changes" button. Along with the matching color, it should hopefully help users associate the two buttons together.
• Prompt is now centered over the bottom modal, so it's clearer what it relates to.
• I also changed the way backdrop works according to Danielillo's answer. It's no longer another layer over the entire screen, but the original backdrop subsumes the bottom modal. TBH I am not sure if this is a win, but I'll try it out for a bit.

I already feel better about how the modal feels. We'll see how will the users react.

Thanks to all those who posted non-snarky comments (and to some of the others as well 😅).

Answer 1

Actually, the content of the question should be understandable just by looking at the two images and without any explanation. But, personally, it took me a while to understand the images were related and then I understood their content. Why?

---

In the first instance there is too much visual information in just two windows:

• Highly saturated colors
• Too many colors
• Icons
• Size variations on similar items
• Wide variety of graphics

Ten colors, four buttons with four different sizes (not to mention the separation between each one that is also different), more than ten different graphics, including a solid line frame, a dashed line frame, bevels, vertical field partitions, horizontal field partitions, fields with an inner frame, three icons and a same icon repeated in two different actions, inner frames with figure/ground contrast...

Well, my first suggestion is look for a good graphic designer, if this is not possible try to make a good adjustment in terms of general graphic cleanliness. If what you are looking for is a good perception, it's not so difficult. Which of these two images is a living room?

---

My second observation, perhaps a little more subtle but evident in terms of perception, is that both windows use the same level of transparency as background, so the first one has a dark background veil and the second one duplicates it in the whole screen:

This is perceptually confusing, the alert of one window further obscures the entire application, leading to the understanding that it's an alert for the entire application. I would decrease the transparency of the background of the alert related to a window or simply remove it as a test.

Answer 2

All the information in the other answer about colors, contrast, etc. is valid from a general design perspective. But words matter a lot. In particular, users may get very confused about "this dialog". The original "Edit content" box is a dialog. But so is the popup "You have unsaved changes" box. The popup needs to be clear what "close" means (closing the original box, not the popup itself) and what is at risk. Something like:

If you close the "Edit content" box, you will lose all changes that you have made.

Are you sure you want to close the "Edit content" box?

and then for buttons, don't use the very ambiguous "Don't close" and "Close", instead use:

• Continue editing content

• Discard content changes

A little wordier on the buttons, but makes it 100% clear.

This is actually quite a common problem. I have seen it with web sites and with interactions between various utilities/security systems/etc. in Windows.

Answer 3

The dialog isn't using proper wording. When the dialog has text saying "close this dialog" in it, it's referring to the dialog, not the Edit Content screen. The buttons say "don't close" and "close" which sound like window controls. The dialog asks about closing while the Edit Content window says cancel. The buttons on the dialog look like dialog window controls.

If the button text is a full phrase and explains the button's function, it shouldn't need a warning dialog.

Any "are you sure" check should simply be displayed in the editor modal.

Answer 4

Another option here is to modify the original cancel button in some way (I’ve had success in the past with turning it red, and replacing the text with “Are you sure?”), and requiring a second click for confirmation. You’d probably also want a timeout so a double click doesn’t accidentally trigger the confirmation.

Answer 5

Try to work with a single window. Have the buttons say:

• Save edited content
• Discard changed content

Or something like that. Much less thought required.

You could add additional hover info on the button if someone can't figure it out, stating "You will discard all changed made on the content" and "You will save the changes to the content".

Answer 6

Try to minimize unexpected popups

Since a Popup will stop the user in their tracks and breaks their train of thought, you can try to minimize these dialogs. Alternatively you could immediately close the editor, but diplay a small notification:

Your changes will be discarded.
[Reopen Editor]

So the user has a way to get back to the editor if he closed the screen by accident. But if he deliberately closes the screen he can ignore the notification and does not need to decide which button to press. The notification can automatically disappear after a few seconds.

This is the way gmail handles deleting or sending e-mails. Instead of asking for confimration, provide a way to undo the action if it was accidental.

Answer 7

Check out how Slack handles this UX situation. You avoid having a second modal which is always good. Plus no new elements are introduced so it is less heavy on the eye, user attention and cursor are already in this area. The only thing is to keep copy text super short, have the warning within the first three words. Very cleaver

On a side note, I am not sure the two buttons are in the right order, I would be curious to know others opinion.. I found myself mis-clicking Cancel and then, clicking Leave without even thinking. perhaps the action of Leaving should always be secondary?!?