Pages

Are you confused when to use "Close" or "Cancel" or "Dismiss" in your designs?

Oct 22, 2022 0 comments


Close or Cancel or Dismiss



Whenever I designed some pages, I always comes across and gets confused when to use the term "Close" or "Cancel" or "Dismiss". On top of that, english is my second language and that makes more harder to understand in details.

And one day, I finally decided to deep dive into which one works on what context of the designs.

So, here’s a breakdown of Close, Cancel, and Dismiss in UX writing.


Quick Summary


  • Close: For getting rid of an UI element (window, modal, panel) without making a decision. It's neutral.
  • Cancel: For backing out of a process or action that has not been finalized. It implies "revert to the previous state."
  • Dismiss: For getting rid of a temporary, non-critical message (like a toast or banner) without taking its main action.

In-Depth Breakdown


  • Close
    • Primary Use: To exit a view or container without implying any other action.
    • Context: Used on buttons or icons for modals, panels, drawers, and windows. It's the "X" in the corner.
    • Implication: The user is simply done looking at this thing and wants to put it away. No data is saved or lost; the user is just returning to where they were.

      Best For:

      The "X" icon in a modal dialog.

      A "Close" button on a help panel or settings drawer.

      Exiting a full-screen view.

      Example: A user opens a "Help" panel. When they are finished reading, they click Close. The panel goes away, and they are back on the main page. No process was interrupted.

  • Cancel
    • Primary Use: To abort an in-progress action or process and return to the previous state.
    • Context: Used in forms, wizards, multi-step processes, and any dialog that asks for user input.
    • Implication: "Stop what we're doing and go back. Do not save any of my changes." It's the explicit opposite of Save, Submit, or OK.

      Best For:

      A form where the user has started typing but wants to abandon their changes.

      A multi-step checkout process.

      A dialog box asking for confirmation before deleting a file.

      Example: A user clicks "Edit Profile," starts changing their name, but then decides not to. They click Cancel. The modal closes, and their original name remains unchanged.

  • Dismiss
    • Primary Use: To consciously remove a notification, alert, or message from view.
    • Context: Used for non-critical, transient UI elements like success/error toasts, info banners, or tooltips.
    • Implication: "I've seen this message, and I don't want it on my screen anymore." It does not undo the action that caused the message; it just removes the message itself.

      Best For:

      An "X" on a "Your settings have been saved" toast notification.

      A "Dismiss" link on a "We've updated our privacy policy" banner.

      A "Got it" button on a tooltip.

      Example: A banner appears at the top of the screen: "New feature available!" The user reads it and clicks Dismiss. The banner disappears. The user hasn't activated or canceled the feature; they've just acknowledged the message.

Side-by-Side Comparison & Common Pitfalls

Close-or-Cancel-or-Dismiss

Key Takeaway

The choice depends entirely on the user's mental model and the context of the UI element.

  • Is it a container? Use Close.
  • Is it a process? Use Cancel.
  • Is it a message? Use Dismiss.

Using these terms consistently across your product creates a predictable and trustworthy experience for your users.

And thank you for stopping by. :)







Comments

Related Posts

{{posts[0].title}}

{{posts[0].date}} {{posts[0].commentsNum}} {{messages_comments}}

{{posts[1].title}}

{{posts[1].date}} {{posts[1].commentsNum}} {{messages_comments}}

{{posts[2].title}}

{{posts[2].date}} {{posts[2].commentsNum}} {{messages_comments}}

{{posts[3].title}}

{{posts[3].date}} {{posts[3].commentsNum}} {{messages_comments}}

Search This Blog