20

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:

enter image description here

enter image description here

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

enter image description here

enter image description here

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

9
  • If you close? Isn't saving closing? I think you mean if you cancel -- or, better yet, discard. Jan 16 at 13:59
  • @LukeSawczak Good point about the copy. I'll try to tune it to use the same phrases that the dialog uses (might be tricky because the wording on the cancel button is customizable, but I'll figure out something).
    – panta82
    Jan 16 at 16:17
  • Since you have the x button in the top right for "Don't close" already, could you make the current "Don't close" button a "save and close" button instead?
    – lucidbrot
    Jan 16 at 22:22
  • 1
    You should check Twitter they have new tweet option in pop-up and while closing ask the user for simply to save or discard. The overly BG and confirmation pop-up etc. are well balanced. Please check once it may help you.
    – Alam Khan
    Jan 17 at 10:26
  • 1
    I believe Apple solved this problem about 35 years ago, and published their solution in a document called "Human Interface Guidelines". Even today, it makes for pretty good reading.
    – Mark
    Jan 17 at 23:55

7 Answers 7

19

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

graphics

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?

enter image description here


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:

Velo

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.

1
  • 2
    Thank you for the fantastic comment! Regarding #1: In case that isn't clear, dotted lines are focus rects. But I agree that it somehow makes buttons look a different size. Regarding #2: Excellent sugestion. I'll definitely try to change the shading, so that it's clearer that submodal is tied to previous modal, not the entire app.
    – panta82
    Jan 16 at 16:15
33

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.

6
  • 21
    I wouldn't use "cancel" at all in the popup. It's just too confusing whether you're going to cancel the ongoing cancellation, or proceed with it. Instead the options could be "Continue editing" and "Discard changes". Jan 16 at 22:30
  • 7
    You can omit "content", the options "Continue editing" and "Discard changes" are sufficient.
    – dbkk
    Jan 17 at 16:47
  • @dbkk Rejected edit. I prefer to include "content" (or other relative specific term). Jan 17 at 19:34
  • 2
    You can also use a trashcan Icon for "discard changes" and a little pencil for "keep editing" - which makes it even easier to grasp the meaning of the buttons
    – Falco
    Jan 18 at 11:05
  • 1
    @manassehkatz-Moving2Codidact why do you prefer to to include "content" in the button text?" Jan 19 at 2:04
8

enter image description here

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.

enter image description here

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

enter image description here

7
  • 2
    Your "Edit content" window still has a little X in the top-right corner. What should happen when a user clicks on it?
    – Heinzi
    Jan 18 at 9:29
  • 2
    @Heinzi That's not good, its cover came off and I didn't even notice it was back, thanks
    – moot
    Jan 18 at 17:33
  • 1
    Problem is that user can close the dialog in several ways: pressing ESC, clicking outside of it, clicking X in the upper right. It feels wrong to remove all these options just because I can't figure out a good "are you sure" mechanism.
    – panta82
    Feb 1 at 19:27
  • Agree with @panta82. The material modal element should be dismissed by clicking the X, outside and cancel. this wordy option for cancel is too long. Also the destructive button CANCEL is a pattern that you can apply to any other modal. I posted a new answer, Slack has a clever solution.
    – Henry R.
    Feb 4 at 12:04
  • @panta82 they all act on the modal so the modal should display whatever messages, popping a dialog doesn't make sense, that's why you're having trouble explaining it
    – moot
    Feb 5 at 3:44
5

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.

3
  • 1
    Good idea, but maybe have the button caption change to "Discard changes" after the first click. A button caption with a question makes no sense.
    – dbkk
    Jan 17 at 16:52
  • 2
    Agreed! Stacking modals on top of each other can get confusing quickly, having the "Are you sure?" appearing inline makes it much more clear what's happening. Jan 17 at 22:10
  • I do use this UI in different places, and it is MUCH better. Unfortunately, there are ways to close the modal that don't involve the button (ESC, click outside modal, click X). So the mechanism can't be tied to the Cancel button.
    – panta82
    Feb 1 at 19:28
2

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

2
  • The hover info (e.g. "Discards all changes!") sounds like a very good idea. Perhaps someone can post about some user testing confirming (or not) it can replace confirmation dialogs (and perhaps undo).
    – Pablo H
    Jan 18 at 14:51
  • Mentioned it in a few other replies, but this won't work since there are other ways to trigger close, it's not just the Cancel button.
    – panta82
    Feb 1 at 19:29
2

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.

2
  • 1
    Ah... this would be good. Very tempting. But feels kind of difficult to pull off as a generic mechanism (imagine these dialogs appearing all over). And then there is the pressure of a timer, of user reloading/exiting the page...
    – panta82
    Feb 1 at 19:31
  • This is UX-Design, we are trying to find the best possible solution for the user. - The business decision if it is worth the effort comes afterwards. - We are using this method in a fairly complex application - we have a central component providing toast-notifications. The user will only have one editor with unsaved changes at a time, so there will only be one of these notifications at a time.
    – Falco
    Feb 4 at 8:59
1

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?!?

Slack modal

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.