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.

modal options


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

| improve this answer | |
  • 2
    +1 OMG how did I forget that? I want to -1 my answer now. – Gildas Frémont May 13 '13 at 14:47
  • Are you suggesting something like gmail where I can select my emails delete them and then the notification pops up with an undo button? – Jason Frade May 13 '13 at 15:20
  • You got it. It is the reference. – Gildas Frémont May 13 '13 at 16:31
  • Yes, exactly. I've used that same pattern myself succesfuly in the past as well. Dangerous actions are all of a sudden not that dangerous anymore if you make undo a central part of your application. – André May 13 '13 at 18:36
  • 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

| improve this answer | |

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.

enter image description here

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

| improve this answer | |

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.
| improve this answer | |

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

| improve this answer | |

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.

| improve this answer | |

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.

| 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.