How to design destructive actions (e.g. delete, turn off)

How to design destructive actions (e.g. delete, turn off)

If the action is reversible

Just complete the action immediately and let the users undo it somehow.

image

Examples:

  • Undo shortcut in MacOS - Cmd+Z
  • Shake device to undo gesture in iOS
  • Undo text link in toast in web apps
  • Undo action in Snackbars in Android

If the action is NOT reversible

Is it VERY serious and will have a major impact? Then throw an alert asking for confirmation in a very explicit way.

image

Is it less serious and won't have a major impact?

Throw a basic alert asking them to confirm.

image

Or make confirmation part of the UI interaction

Example #1: Turning off an iPhone - Slide to turn off

image

Example #2: Removing an app from MacOS dock - Hold for 2 seconds and release to remove

image

Example #3: Deleting an item from a list in iOS - Swipe all the way to delete

image

That’s all folks

If you want to get even better at UX, I create tweet-sized UX tips and examples on Twitter! Feel free to say hi @jimzarkadas 👋

You can also join me on my newsletter and get notified when new posts get published!

🤩

Get better at UX every single month Every couple of weeks I share a new tutorial, case study or UX playbook in my newsletter. It’s short, sweet, and practical. You'll never receive ads, or annoying product promotions. My newsletter is my way to keep in touch with you. It's my way to bring more knowledge into your inbox. 150 makers have joined me already. I’d love you to join us as well! ✨ Subscribe to my newsletter