Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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

share|improve this question
add comment

4 Answers

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

share|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
add comment
  • 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.

mockup

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.

mockup

download bmml source

share|improve this answer
add comment

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

share|improve this answer
add comment

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

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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