Where to place a delete button in a modal

Question

Currently in our application we have tables of information that give you some of the most important data and them we have a view more link that pops open a modal dialog and gives the user all of the information for that row. This is also where we are placing the delete button for that row. The reason for storing the delete button in the modal is because the data is very important and we don't want the delete to be easily accessible.

The problem that I am having is I can not determine which location in the modal that would be the most usable for our users. I have come up with some of the different options that we have gone through and was hoping people could give me more of a professional opinion.

• Option 1 is what we have at the moment, just a simple trash can next to the title in the modal (trash can is much smaller but this is as small as balsamiq will let me make it).

• Option 2: Delete button in the bottom left corner of the modal.

• Option 3: Delete text in the bottom left corner.

• Option 4: Delete text in the header next to the title,

• Option 5: Delete button would only be available in the edit mode and would appear on the left side of the footer.

Answer 1

Instead of making delete hard, would it be an option to make delete easy, and make undo easy as well?

Answer 2

• Option 1, it seems the title is deletable.

• Option 2, quite good but the design does not make it clear whereas it is for deleting everything or just the last parameter (label ?)

• Option 3, same idea as opt 2

• Option 4, same as opt. 1 (but text is much more clear than icon)

• Option 5, maybe the best one but same idea as opt 2

In all options it is confusing whereas the X is for closing the modal or deleting something.

Therefore I propose you to rearrange your layout so it is more obvious what you can do.

^{download bmml source – Wireframes created with Balsamiq Mockups}

Another solution may be, as you advanced, Delete only on Edition mode.

It will definitly protect the data which is very important and we don't want the delete to be easily accessible.

^{download bmml source}

Answer 3

Summarizing some form building best practices (Luke Wroblewski has a great article, including eye tracking, about Primary & Secondary Actions in Web Forms):

• Make the primary action left-aligned.
• De-emphasize secondary and dangerous actions and put them after the primary action.

Just for fun, you might also consider putting labels above and to the left your fields. They tend to perform better. See Label Placement in Forms by Mateo Penzo and Web Application Form Design by Luke Wroblewski

Answer 4

I think your best option is to provide an alert/confirmation when user clicks "Delete".

1. This way, you get an opportunity to provide a warning.
2. It's the same number of click as if you provide "undo" on the popup.
3. It's also easier on development effort.

Answer 5

Option 5 seems the best.

Separating the main action from the "specials actions" will help avoiding mistakes

The "cancel button" tends to disappear in modal windows. The closing cross is enough.

^{download bmml source – Wireframes created with Balsamiq Mockups}

Answer 6

Option 5 from my side too. If we go by majority of the users cursor movement then it is right to left direction. So. it would be ideal way to present Primary action buttons should be on right side where user can click first.

Answer 7

None. Placing "Delete" in a model window is not intuitive.

Instead of placing delete in the popup, display it in the list. This is what the user would expect to see. Make sure that the user is either prompted to confirm a deletion, or is allowed to undo the action.

People commonly reference Gmail in situations like this.