buttons - Should a delete action's "undo" be underneath the "delete"?

Take for example this button:

                 _________
                /         \

               |   Trash   |
                \_________/

Which when clicked, becomes this:

   _________     _________
  /         \   /         \
 |  Restore  | |  Destroy  |
  \_________/   \_________/

Which means that when clicking on the delete button, your mouse is already on the confirm button, which allows a quick double click to delete. This is good for deleting many items quickly. But a naive user might accidentally double click on the button, resulting in a permanent delete rather than a prompt to confirm.

The action I'm implementing is a Trash / Restore / Destroy pattern, where you have the option to either restore or destory an item that has been trashed.

What's better - protecting the user from an accidental destroy or allow faster deletes by having the confirm to destory action "underneath" the trash button?

Answer

This is one of the most common design patterns.

A lot of research has gone into delete confirmations, so it's impossible to cover all the variants in one answer: the best solution for you will depend on the degree of confirmation, warning, speed, and likely user intent.

That said, here's one approach which represents the 'state of the art' in delete confirmations:

• For most applications, the majority of users who click on Delete actually want to delete an item. For example, let's say >85% of delete clicks for your app are well-intended and <15% are unintentional for various reasons (accidental click, user changed mind, user didn't understand the button, etc.)


• Therefore, for >85% of cases, an extra confirmation or click is an unnecessary impediment for users.


• Therefore, the best solution that works for the vast majority of cases is just a Delete button with no added confirmation step.



• Now, we still have to deal with the <15% of users who delete unintentionally. Since this is a minority case, an Undo button that allows users to fully unwind the deletion works best.


• Here, the Undo button should not be placed near the Delete button, to avoid accidental undos. It should be clearly placed somewhere close by so that the unintentional user can rewind the transaction.


• The Undo button should be visible for long enough for the user to reasonable reconsider an unintentional delete, but not so long that it sticks around intrusively after the user has gone on to do other tasks.

This is just one of many approaches, but I like it because it incorporates a proper prioritization of usage, and creates cognitive flow and friction at the right time. Your needs may be different so you may require a different approach with more/less confirmation and more/less eager deletion.

The 'no-confirmation' approach is used in apps like Gmail, which provide a single button for delete, and then use a visible snackbar or toast that appears for a period of time after the deletion to allow the user to undo the delete.

Since back-end implementation is not part of the UX design, I'll add a comment below with a note on that.