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

7 Answers 7


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

  • 2
    +1 OMG how did I forget that? I want to -1 my answer now. Commented May 13, 2013 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? Commented May 13, 2013 at 15:20
  • You got it. It is the reference. Commented May 13, 2013 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é
    Commented May 13, 2013 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


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


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.

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


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.


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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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