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