2

I'm developing a web application and I need some advice on where to place the delete button

Users can create, modify or delete items arranged as a list of vertically aligned elements. Each element is a collapsible panel and it can be expanded to reveal the setting under it. Here my two ideas on how to design the item opener and the delete button:

enter image description here

I need to place the delete button (which deletes the item). First option (the arrow) looks more user friendly and familiar but then I don't know where to palace the delete button. Second option has the delete button but it has the same emphasis as the menu button. What's the best practice in this case?

Improve this question
2
  • The first option could contain the buttons in the expanded area, but where would the second option contain the "expand" button?
    – Alvaro
    Feb 5, 2017 at 12:22
  • In the second option the expand button is the "three dots button". But it could be the same as in the first option. I'm just experimenting with different icons
    – Gianluca Ghettini
    Feb 5, 2017 at 12:23

2 Answers 2

Reset to default
2

The expand button looks good to me where it is in your first option (the three dots icon is used for menus). Some ideas:

  • Depending on the amount of items there user might want to remove at once, you could use a checkbox to select the list items and the remove action button would appear in the top of the list.

(This last behaviour is explained in Material design - Data Tables)

Improve this answer
3
  • ok, CANCEL to me it's not clear. Does it delete the entire item? does it undo the changes on the fields and collapse the panel? Sounds more the latter
    – Gianluca Ghettini
    Feb 5, 2017 at 12:45
  • The image belongs to the link, it is not the same case. I just include it to illustrate that action buttons can be placed inside of the panel. This might be useful or not depending on the purpose of the panel and the importance of the action.
    – Alvaro
    Feb 5, 2017 at 12:47
  • Ok.. please have a look at my own answer, I used the concept you suggested me (footer + actions). The emphasis in on the SAVE rather than the DELETE
    – Gianluca Ghettini
    Feb 5, 2017 at 12:57
1

What about something like this?

enter image description here

Improve this answer
5
  • In this case, "Save" appears if changes were made. But "Remove" should be there in any case. Also the two actions are different. Normally those should be opposite, something like "Save" "Don't save" (/"Cancel").
    – Alvaro
    Feb 5, 2017 at 13:11
  • So where I could place the delete button?
    – Gianluca Ghettini
    Feb 5, 2017 at 13:13
  • Do you need to confirm or save the changes with a button (manually)?
    – Alvaro
    Feb 5, 2017 at 13:20
  • I need an extra "delete" button somewhere which will delete the entire item, the entire panel (which is an item). The "save" button is fine. Confirmation is only required of the "delete button"
    – Gianluca Ghettini
    Feb 5, 2017 at 13:22
  • Check this image. I would go for the Data table approach I commented in the answer. But probably someone will have a better suggestion.
    – Alvaro
    Feb 5, 2017 at 13:34

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.