Ask
22
@frontend_felix ·

Nobody can agree on the wording for the "you have unsaved changes" dialog and I have rewritten it six times

Simple situation. A modal with a form. The user has typed something and clicks cancel. We want to warn them the changes will be lost.

Every version I write is ambiguous in some way. The buttons end up being some pair of Cancel and OK, or Discard and Cancel, and in the second one there are now two things called cancel that mean opposite things. If I use Yes and No the question has to be phrased so that yes and no are unambiguous, and every phrasing I try has a reading where the user picks the wrong one.

What is the pattern that actually works here?

4 answers Share
Report

Answering anonymously — a moderator will review it first.

  • @research_rosa · 7d ago

    The rule that resolves almost all of this: label the buttons with the action they perform, never with yes, no, ok or cancel.

    A user in a hurry reads the buttons before the message, and often instead of it. If the buttons say "Discard changes" and "Keep editing", the dialog is comprehensible with the body text unread. If they say OK and Cancel, the body text is load-bearing and you have made a reading comprehension test out of a mis-click.

    So:

    • Discard changes — destructive, so give it the destructive styling and do not make it the default.
    • Keep editing — the safe option, and the one focus should land on.

    Note that neither button contains the word cancel, which dissolves your two-cancels problem entirely. The word is genuinely ambiguous in this context: cancel the edit, or cancel the closing? Removing it is the fix.

    28
    Share
    Reply

    Answering anonymously — a moderator will review it first.

    Report
  • @a11y_anneke · last wk.

    Whichever wording you land on: move focus into the dialog when it opens, put it on the safe button, trap focus inside while it is open, and return focus to where it was when it closes.

    A warning dialog that a keyboard user can tab behind is worse than no dialog, because it blocks the interface while being unreachable. This is the most common bug I find in exactly this pattern, and it is invisible unless you unplug the mouse.

    13
    Share
    Reply

    Answering anonymously — a moderator will review it first.

    Report
  • @wireframe_wren · last wk.

    The other half is that the message should say what will be lost, in the user's terms, rather than describing the software's state.

    "You have unsaved changes" is about your data model. "Your edits to this invoice will be lost" is about the thing the person cares about. The second version makes the buttons easier to choose between because the stakes are concrete.

    And if you can name the quantity, do: "3 unsaved changes" or "Your draft reply will be lost". People are far more decisive when the warning is specific, and much more likely to dismiss a generic one out of habit.

    Worth also checking that the dialog's title is not just "Warning" or the name of the screen behind it. Two dialogs on screen with related titles is one of the main reasons these get misread.

    23
    Share
    Reply

    Answering anonymously — a moderator will review it first.

    Report
  • @form_field_farid · last wk.

    Consider whether you need the dialog at all, because the best version of this problem is the one you deleted.

    Two alternatives that remove it:

    • Autosave the draft. Closing then loses nothing; reopening restores what they typed. This is strictly better whenever it is feasible, and it turns an interruption into a non-event.
    • Make closing undoable. Close immediately, show a brief "Draft discarded — Undo" notice. The user is not blocked, the mistake is recoverable, and the common case, where they genuinely meant to close, costs them nothing.

    Confirmation dialogs are a tax on every correct action to protect against an occasional incorrect one. When the incorrect one can be made recoverable instead, that is nearly always the better trade.

    20
    Share
    Reply

    Answering anonymously — a moderator will review it first.

    Report