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 1% better at UX every month Every month I share a new tutorial or case study with my newsletter community. It’s short, sweet, and practical. You'll never receive ads, or annoying product promotions. My newsletter is just my way to empower you to build a better product and bring more knowledge into your inbox. 650 designers and founders have joined already - We would me more than happy to have you onboard! ✨ Subscribe for free P.S. Here is one of the articles I wrote and shared in the past.