0

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

Improve this question
8
  • 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 '17 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 '17 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 '17 at 3:06
  • Hm. Maybe. It just concerns me that you'd be animating something auxiliary.
    – Quelklef
    Jul 18 '17 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 '17 at 3:09
4

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.

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

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!

Improve this answer
2
  • thanks @neophyte but how would a "-" signal the ability to delete to the user?
    – Sam Rao
    Jul 18 '17 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 '17 at 3:17
0

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.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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