i need to let users know a simple way how an item from a list can be deleted. Is the best way to put a delete icon next to each item? It looks a little cluttered...

enter image description here

  • once the user clicks on any of those trash icons, they will get a dialog box asking them to confirm deletion. That is the way i have it set up right now.
    – Sam Rao
    Jul 18, 2017 at 3:00
  • Perhaps make the trash icons very lightly colored, or only show when the book name is hovered? Or lightly colored but darker on hover? Though, this would direct attention away from the book name, which is perhaps not good.
    – Quelklef
    Jul 18, 2017 at 3:03
  • thanks!!! Yes- i was thinking that too, but I would think that the user would already have read the book title by the time they hover which is not so bad...??
    – Sam Rao
    Jul 18, 2017 at 3:06
  • Hm. Maybe. It just concerns me that you'd be animating something auxiliary.
    – Quelklef
    Jul 18, 2017 at 3:06
  • These comments happened while I was typing my answer. We use this type of interaction (reveal secondary actions on hover) in our CRUD tables when there's a lot of repetition and it works well - users seem to get it.
    – dennislees
    Jul 18, 2017 at 3:09

3 Answers 3


Show a trash can icon, but only reveal on hover

Use the icons you have, but place them in the more conventional location to the right of the text, and only reveal on hover.

Users trying to interact with the items will mouseover and see the obvious delete/remove icon.

Ensure the target area is the entire row and not just the area around the icon.

If relevant, bear in mind the ramifications for mobile/touch users i.e. click-to-hover effects in CSS, and possible increased target areas for smaller screen sizes.

  • 3
    I am not sure that's good in terms of usability. What about in case of touch-input devices? Jul 18, 2017 at 4:25
  • 2
    Or motor disabilities, that is a tiny space to keep hovering onto. Jul 18, 2017 at 7:44
  • These points are well taken, though relatively easily dealt with. Updated the answer accordingly.
    – dennislees
    Jul 18, 2017 at 13:53

I completely agree with dennislees and here's my suggestion to reduce the cluttered feeling-

1)You can reduce the size of the trash icon

2) just use a - not a delete bucket.

Hope this helps!

  • thanks @neophyte but how would a "-" signal the ability to delete to the user?
    – Sam Rao
    Jul 18, 2017 at 3:14
  • It's a minus/subtraction symbol, this will indicate the user that it can be used to delete the document.
    – neophyte
    Jul 18, 2017 at 3:17

Have you considered the option of checkboxes?

I am not sure how long these lists can get in your app. But perhaps, instead of forcing the user to delete items one by one how about offering checkboxes next to each item.

Then a delete option somewhere nearby and the user can delete a single or multiple items at a time.

The checkboxes will also come in handy if in the future you decide to add extra actions such as "Edit", "Copy", "Share" etc. and they are not as intrusive/attention grabbing as a trashcan icon.

Here is an example that shows what I'm suggesting (taken from http://www.androiduipatterns.com/).

Of course you can choose where you want the actions "Delete" etc to be placed. They don't necessarily need to be fixed at the bottom.

enter image description here

Another example taken straight from Red Hat: enter image description here

Lastly, another option would be to just add an "X" icon at the end of each entry. Even if a user doesn't know that "X" means delete (unlikely) they still get the confirmation window that teaches them and allows them to retract back from.

Your Answer

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

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