Where do you put the delete button if you have delete, cancel and submit?

Question

I have a web app which currently uses the following interface.

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

Here's what the actions do:

• Delete will delete this group and redirect the user to a list of all groups. Before deletion, a modal confirms whether he is sure he wants to delete.

• Submit save the changes made to the group.

• Cancel allows the user to discard the changes he has made. This is because the application allows multitasking: If the user makes a change and navigates away, the page will be added to a pane containing screens with unsaved changes.

The delete group button deletes the group and is styled as a link with an icon. I am unsure whether that is the right location for the delete group button. One alternative would be to do:

^{download bmml source}

I have only ever seen forms with 2 actions, for example:

^{download bmml source}

Or:

^{download bmml source}

How should I deal with positioning these 3 icons, keeping in mind that Delete this group should be distinct and isn't something we want users to accidentally click?

---

Update:

For the positioning of the buttons, I am following Luke Wroblewski's recommendations from eye tracking research for web forms (basically, the best positioning is to have the actions aligned left with the primary action on the left). I do believe that right aligned actions would be more suitable in modals and dialogues.

However, Facebook places the primary action on the right:

As for why having a delete action on the edit page, I feel that it is still quite useful, especially if the user determines the group to be useless after seeing its contents. Wordpress also has something similiar on the edit page:

I appologize for not mentioning my intial rationale for placing the delete button the top right:

• If there are lots of form fields and the page scrolls, it is easy for the user to see at a glance, that the Delete this group button does exist (rather than hunting around the page for it). Does this benefit outweight placing it on the bottom along with the other actions?

Answer 1

Apart from putting the {Submit - Cancel} buttons separated from the {Delete}, given that delete is an irreversible action and you want the user to be really sure when clicking it. Having the three buttons inline at the bottom makes it more clear where user can find all the options for the current window. There are a lot of programs that use the {Don't Save ---- Cancel - Save} pattern in dialog boxes. Check this.

You should also put the "Submit" as the right-most item and align it to the right. You can read more about it in this article. {Delete ---- Cancel - Submit}

Answer 2

Personally, I put the primary, positive action bottom right - so in a process, "Next" and "Submit" go here. Cancel would appear to the left of Submit as a link - it's not a primary action, so we call less attention to it. "Delete" would appear to the left of cancel, but with more spacing. I'd also put a confirmation messagebox up onClick to ensure the user is making an informed choice!

Answer 3

I definitely prefer to have all the action "buttons" at the bottom right, especially if the form requires scrolling, so that it follows the logical workflow of the user. The problem with that in your case is that your users may know they want to delete the group before they even enter the page in question, so making them scroll to the bottom of a long form may add insult to injury.

A pattern I have used with success would offer the delete option on the page where they select the group to edit (previous to what you are showing in your question) as well as inside of it. I have found that when my users want to remove a category, most often they do not need to go into the details page to make that decision, so I offer the option sooner. This relegates the delete option on the group detail page to secondary, and now it does make sense to place it in the lower right corner with the other actions.

Answer 4

I've seen the situation you describe before, with the delete link on the lower-right. That's how I prefer it, grouped together with your other actions. I think it carries less weight down there because users will be focused on the submit button.

You've got a confirmation for the delete, which is good. I might remove the X icon if you'd like to draw even less attention to the action.

Depending on what the screen looks like that contains all the groups, you could consider moving the delete function to that page instead and not list it here at all. Probably not a preferred option, but I thought I'd through it out there.