Confirmation of user input: inline button or popup/modal?

Question

I have a few instances, where users can cancel filling out web forms. In the current design the web site will open a modal in the center of the screen (which is mostly not, where the original cancel button is located) with a confirmation dialog after the user has clicked "cancel" to prevent errors. But there is also the possibility to use "inline buttons" to catch accidental clicks. These button are or like this example here:

after the "x" is clicked, the button changes to a confirmation button:

In my opinion, both modal and the changing button have pros and cons. I am hesitant to use "changing buttons", but they imply minimal movement by the user and they do not need to change focus to another part of the screen which increases efficiency.

I could not find any discussion on this topic or the differences between the two methods and would like to hear some opinions.

Example images were taken from here.

Answer 1

It depends on a few factors:

• Consequences of a mistaken deletion. Is the data to be deleted something that the user can easily recover from, like filter values in a form, or is it something that needed considerable investment?
• Need for batch-operations. Is it necessary for the user to be able to delete several (but not all) items from a list?
• Cost on other features of the page. How much do you want to prioritize this safety compared with other aspects of your page, such as speed?

Here are a few patterns:

Confirmation toast with undo button. This is really a great pattern for changes that you can be relatively confident that the user intended to do. It adds no cost to the deletion operation. It doesn't get in the way of batch operation. The only caveat is that it doesn't support a great undo depth — you can potentially stack them up but not indefinitely, so if it's important to allow the user to go back an infinite amount this wouldn't be the right pattern.

Confirmation modal dialog. This is very expensive in user terms and hampers batch operations, so should be reserved for cases where the consequences are bad and there is no need to support batch deletions.

Save/Cancel state for the page instead of save-as-you-change. When making changes on the page, the changes aren't saved but a "Save" button appears along with a "Cancel" button. This supports batch operations but it means the changes, even the completely riskless ones such as ticking a checkbox (which is just as easily unticked), aren't applied until the user hits "Save" on the page. It also requires the "Save" button to be very visible or the user might lose data another way, by forgetting to save their changes.

Complicate the dangerous gesture. Instead of a click, make it two clicks to delete something, preferably on elements not in the same spot to avoid losing the safety for compulsive double-clickers (many users always double-click). This kind of works but it adds a lot of user cost to the base case (deleting is now twice as hard always) which is really cumbersome for batch operations. For many situations, I've found it better to use a confirmation toast with undo rather than complicating the gesture.

Answer 2

Such confirmation can be implemented the other way around. Instead, a required confirmation, a facility of undoing an (unintended or undesired) action can be provided to a user. It can be implemented as a temporary notification that arises after a certain substantial action and allows to revert it.

For an instance, the scenario described above is exactly what happens in Gmail when an email has just been sent:

The presented notification appears at the very bottom of the screen indicating that the action is about to become irretrievable.

Answer 3

Popups or side-panels are usually used when you need to take the user through a complex sub-flow. Think of it as when you are Alt-tabbing between applications to do stuff.

An "inline" solution is best when you have a sequential flow of tasks the user needs to complete in a specific order.

In your situation, I think the "inline" solution would be preferred if you have a list of items where the items can be removed one by one and the user MUST confirm each action.

Example: CTA button labeled with "X". Clicking the button will somehow highlight the item and present the new button with cable "Delete". In addition to this new button, you will also need a secondary CTA allowing the user to back out if they clicked accidentally. The secondary CTA can be "Cancel".