14

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.

Mock-up from flight 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?

3
  • The design may also benefit from variable length fields to additionally differentiate each line. Mar 2, 2013 at 23:32
  • 3
    What am I deleting here, the data I just entered (but haven't yet saved)? A record that was previously created (that I'm now viewing in edit mode)? If the latter, what if I made changes in edit mode, am I deleting my changes, or the entire record?) In either case, you've made DELETE the most prominent button here...is that going to be the primary action? If not, this is a bad idea.
    – DA01
    Mar 2, 2013 at 23:42
  • Thanks for the insights. You are in fact deleting the entire record you are editing. While it is rare to be editing the actual data after it has been saved, I cannot substantiate what percentage opens the edit form to actually edit or delete.
    – Laurens
    Mar 7, 2013 at 19:21

3 Answers 3

17

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:

Example of delete confirmation modal in MailChimp

1
  • 1
    Thank you very much for the valuable insights. You raised a good point concerning the save buttons and I have changed the color to make sure it is the most visible, and de-emphasized the delete action by making it a link. The the MailChimp example is especially valuable in a related case where the user was able to cascade-delete a potentially large number of records and found this speedbump to be quite effective in preventing accidential deletions.
    – Laurens
    Mar 7, 2013 at 19:24
9

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:
enter image description here
enter image description here

5

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.

Your Answer

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

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