๐Ÿ“

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.