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...
-
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
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.
-
3I 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
-
2Or 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
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!
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.
Another example taken straight from Red Hat:
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.
