I'm designing a complex platform that will have lots of data tables and rows. Because the user is able to delete each row, I'm adding a red trash can icon to the right of the row. My colleagues are asking for the trash can icons to be gray and red only when hovering, since they find there is too much red. I'm hesitant about making them gray because I don't want users to think the icon is disabled. What's the best solution?
3
-
2Please share a screenshot of the icons. The shade of gray matters here. 50% gray or higher should not look disabled at all.– RenCommented Oct 4 at 4:21
-
Agreed. Dark grey, possibly with a slight slate hue, is pretty expected here. Harder to do on a dark background.– Luke SawczakCommented Oct 4 at 11:57
-
An alternative that you might want to consider: Don't put trash buttons on each row at all. Instead, put checkboxes on each row, and have one trash button next to the table (above/below/beside, whichever fits best, and inside an existing toolbar if there is one), so that users select the rows they want to delete, and then click the trash button. Then the (single) trash button can be red without being distracting, and users are less likely to accidentally delete something while also being able to do bulk deletions much more easily.– KeijiCommented Oct 4 at 13:06
Add a comment
|
2 Answers
I would agree with your colleagues that a screen full of red icons could be pretty distracting, possibly even distressing, and might make it harder to identify any field errors or other alerts elsewhere on the page.
I don't think you have to worry about them appearing disabled, for a couple of reasons. First, if you have a standard icon or text color you use, make the icon that color so that it looks as active as any other control on the screen; I would assume your "disabled" gray is different and probably lighter, so your user is not likely to get confused. If the raw icon doesn't stand out enough perhaps make it look more like a button to make it extra clear.
Second, even with a disabled control if a user is motivated to take the action they will try to interact with it. As soon as they do and it turns red, it should be clear they CAN interact with it (and presumably there's some kind of confirmation dialog or undo capability so they won't delete it by mistake).
Just my $0.02 - good luck!
Here is a good explanation about grayed icons by Material Design:
Icons and other elements don’t need to meet WCAG legibility standards, but should be as visible as possible to indicate function or communicate information.
For example, dark icons (#000000) or other elements on light backgrounds (#FFFFFF) could apply the following opacity levels:
- Active icons have an opacity of 87%
- Inactive icons have an opacity of 60%
- Disabled icons have an opacity of 38%
From which it follows that any color between 65%-90% black is viable to not appear inactive.
This is always based on a black #000000. But fortunately not all grays belong to this origin. A tinted gray offers the possibility of lowering this percentage of opacity or tint to approximately 50%. As an example; any of these grays are unlikely to pass for inactive:
Regarding the repetitive red icon, I agree that it is not a good choice. One of the characteristics of the colors red, orange and yellow is that the perception is influenced more by the color than by the shape, so the user will remember the thousands of red icons more than their functionality.
