Placement of delete button on form

Question

I have a form which edits a flight, and it should be possible to delete them. I have considered putting a delete button in the index page, which lists all the flights, but the table rows are clickable themselves and I did not wish to put a clickable element on another clickable element.

I created a quick mock-up to show what the position of the delete button would look like on the form.

I have identified two possible positions for the delete button:

1) Pulled right on the header. I fear users might not notice it, but it is positioned away from the save button and will prevent people from clicking it accidentally.

2) Next to the save button. Users will surely notice it but there is significant risk from clicking it accidentally.

Where would the delete button best be placed?

Answer 1

The problem with your current mock-up is that the 'Delete'-button is the most visible one. My immediate thought when I saw your mock-up was that the 'Delete'-button was the primary action. Although it's not flat enough for that your 'Save'-button looks disabled on first view. It doesn't jump out like the 'Delete'-button does.

Make sure your primary action is the most visible one. You could apply a green color to the 'Save'-button to make it clear to the user that that's the desired action.

Regarding the 'Delete'-button. Keep in mind that it's a secondary action, possibly has big consequences and won't be interacted with on every screen view (assuming the delete action is used far less often than the save action). Because of these reason I would not use a button at all, but a link instead.

Using a link instead of a button still makes it clear to the user that it's actionable, but at the same time you explain that the desired (and expected) action is to save rather than delete.

How to handle deletion

Keep in mind that users may accidentally delete a record, either by mis-clicking or by deleting a different record than intended. Therefor make sure to include Undo-functionality, or if that's not possible for some reason ask for a clear confirmation.

Don't over-do this do, lightboxes and similar modals break your user's mental flow and having to confirm every delete action, not matter how small the impact may be, is really annoying. Only require delete confirmation when the record is not easily restored (and when the Undo-functionality cannot be implemented)

When using a confirmation also consider the impact of the deletion. If the result of accidentally deleting a record is not easily restored you could implement a "speed bump" by asking the user to enter their password or a confirmation string when they are about to delete a record.

Take a look at how MailChimp does this:

Answer 2

Delete is an option that you don't want anyone to accidentally click, so you should de-emphasise delete as much as is reasonable.

If you make it red (as you did in your example), you will draw attention to it. Instead, you should draw attention to the normal action (save in this case). You should place the delete far enough away that an accidental selection is unlikely, but still make sure that it is readable if someone is looking for it.

Something along the likes of one of these options:

Answer 3

Firstly, I'm not sure if this is the right location for a delete function - my first instinct was that the 'delete' function might resemble a 'clear form' function of some sort - so it would probably be better to attach the delete button at a higher level of abstraction (e.g. the list of flights), or at least make the action less ambiguous.

As for position, you are right to imagine that a position on the far right could fail - sitting in peripheral vision, it could be hard to have users identify the element by its text. Locating the element next to the 'save' button is a stronger option (I would not worry about 'accidental clicks' providing the target sizes of the buttons are reasonable and there's some kind of undo function - I don't think I've ever seen an accidental click in a non-mobile usability test I've observed). However, it could imply that 'delete' somehow has kinship with 'save' - as though it's a kind of 'step back'or 'cancel changes' button. This is appropriate in a multi-step form where 'delete' exits the process, but not otherwise.

I would therefore look to expose 'delete' at a different stage, at the decision branch before this form.