3

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:

enter image description here

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

enter image description here

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.

Improve this question
3
  • 1
    If the intention of the second example is to prevent accidental clicks, the obvious problem is that an accidental double click will defeat it, since the mouse will be over the new button. Possibly you could change track and consider, for example, Deletion: Confirm or Undo? Which is the better option and why?. One advantage of going with an "undo" way of working is that someone who does know what they are doing can work faster without having to confirm everything. – TripeHound May 16 '18 at 8:26
  • That is true. Do you think a button that pops up next to the cancel button might be a good alternative to a modal screen? – pinkdroyd May 16 '18 at 9:09
  • Probably depends on the nature of what you're "protecting". If it's a cancel-the-whole-form (as your original question talks of), then a pop-up dialog might be better (you'd want more positive confirmation). If it's deleting item(s) (as the image you used seems to imply, and was more the focus of my response), then I'd probably go with Undo if feasible (so someone wanting to delete several items can do so without confirming each one), or if that's not appropriate/possible, a button that appears near (but not in the same place) as the original cancel/delete button (needs some movement). – TripeHound May 16 '18 at 10:24
2

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.

Improve this answer
1
  • 1
    Thank you for your detailed response! For now I kept the modals since the dialogs can be lenghty and require some effort to finish. The modal seems to fit and no batch operations are needed. I might rethink that in a future redesign with your list in mind. – pinkdroyd Jun 26 '18 at 11:01
2

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". Example Figure 1 & 2

Improve this answer
0

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:

enter image description here

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

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.