6

I'm creating an editable html table with alternate row color with a focused row highlighting .

When a cell is clicked, the user can modify its content.

Considering all of these, I need to indicate to the user that specific cells are desactivated and so not clickable.

I tried the basic "grey" background-color, but it cumulates 3 different shades of greys :

  • the alternative row grey color
  • the highlighting grey color
  • the disabled cell grey color

and the result, is a little bit disappointing : enter image description here

I tried another way, with stripped cell background : enter image description here

None of them convince me enough, so what is the best way to represent disabled cells into a table using alternate row color ?

EDIT

Following the comments on the first answer, I'm trying the icon solution too enter image description here

Improve this question
2

1 Answer 1

Reset to default
2

The best way would be not to use colour. In fact colour is not necessarily the best way to do it as it relies a lot on good eyesight (which designers usually have, don't forget).

Here are some alternate ideas and ways of emphasising disabled state without using colour - these are suggestions, doing all would probably be overkill and observing users interacting with prototypes would be a good way of assessing different ideas (Hallway Testing is a good thing for this):

Change the hover state. Don't use a cursor: pointer hover style for example, leave the icon as a standard mouse cursor so nothing happens to it on hovering over the cell. Consider adding an edit icon that appears on hover of an editable cell too. Then a 'not editable' icon could appear on hover of a disabled cell.

Don't style links the links either - if you cells are interactive any text may (or should) have a typical link style. This can be removed, along with any hover state, for the inactive cells.

Consider a tool tip explanation. This would give the user feedback if they attempted to interact (which users will do to find out why). This could be on click, and should be on tap to help with touch screens without hover state.

You could use borders and font weight / style too. These would provide contrast between enabled and disabled. This is a bit like the link styling.

Also, provide a key outside the table, two cells, one styled enabled and one disabled with the works inside to help the user. These could be the point at which you explain why if the reason is common across the table.

Improve this answer
8
  • in my special case, disabled cells must remain empty. so I cannot use font-weight / decoration for disabled content. And I'm not sure about the cursor trick, cause it lets the user discovering which cells are disabled by travelling hover all the cells
    – PEC
    Mar 18, 2016 at 8:50
  • 2
    @PEC If they are empty, does that mean you can put anything in the contents? In that case, you could fill them with some short explanatory text (something like "(not editable)" or whatever suits your precise application), written in a distinguishable font.
    – yo'
    Mar 18, 2016 at 10:04
  • @yo' I agree, I'm just afraid about the overload of unnecessary text on my table, maybe a small icon or something similar.
    – PEC
    Mar 18, 2016 at 10:10
  • @PEC If a small icon, I would make it either "forbidden icon" (O slash) or a slashed pencil (which incidentally looks almost like an X mark)
    – yo'
    Mar 18, 2016 at 10:12
  • @yo' I add an icon proposal inside the question
    – PEC
    Mar 18, 2016 at 11:45

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.