12

I have many tables, actually data grids, where most of the cells will be editable, but some may not depending on the users permissions. I am thinking of using light gray backgrounds on the read-only cells.

Example

UPDATE (6.19.2015)

Since this topic has recent activity I thought I'd give an update. We considered many of the suggested option and went with simple light grey background. User interviews discovered this solution to be quite intuitive to our audience.

  • Adding icons, even subtle ones, added a great amount of visual complexity.
  • Graying the text made it more difficult to read and seems to indicate text that is in some state of transition.
  • Adding an indent to indicate editable cell is not possible as that is what we use to indicate focus.
Improve this question
2
  • That's a fine solution. FYI, you probably don't want zebra striping AND table borders. They're redundant and often clutter rather than clarify.
    – DA01
    Aug 14, 2013 at 20:38
  • 2
    I am not using zebra stripe, the yellow row is the selected row. In this app you can select one or more rows thereby facilitating bulk editing.
    – rdellara
    Aug 15, 2013 at 0:10

8 Answers 8

Reset to default
16

Background color is convention. This (hidden) rule will be learned by user soon. But I also recommend to show tooltip when user tries to edit (clicks) read-only cell. Such explicit message prevents guessing or abusing on imaginary non-working functionality.

Improve this answer
1
  • 1
    I'd also have the font color be a lighter shade than enabled text. Some sort of gray.
    – Josh Anderson
    Aug 21, 2013 at 15:44
7

You're on the right track as long as the shading doesn't interfere with reading the data. You could also forgo the background color (which emphasizes them to a certain extent) and lighten the type color.

A lock icon or pencil with a slash could reinforce your meaning. If an icon is used, I'd keep it fairly subtle and add contrast on hover so your page isn't littered with little icon bugs.

Doing something special with the editable cells seems problematic if it will be the majority.

Improve this answer
1

Personally, I like when a user clicks on a row and it reveals the entire row to be what is editable and what isn't editable. If a user clicks on a non-editable cell, all the cells that can be edited will switch to textfields and non-editable stay as is. You can infer that there will prob be edits on that row if they are clicking on one part even if a part that can't be edited.

Improve this answer
1

I'd recommend the opposite: mark the editable cells as that is the unusual behaviour for tables. You could easily do this by adding a darker internal border to the top and right to make those editable cells look more like text input fields (an accepted pattern for editable text areas).

However, if you are stuck on marking the field the user cannot interact with, you need to ensure that the solution you provide is not reliant on colour alone.

For both options you will need to provide a secondary way of identifying the difference between editable and non-editable cells - others here have already suggested several good suggestions including icons and tool-tips that would serve this purpose very well.

Improve this answer
0

In addition to the background shading, you could display a locked / no-edit icon when the cell is selected.

Consider the "normal flow" for editing a cell:

  1. User sees a cell
  2. User wants to edit the cell
  3. User selects the cell
  4. User makes edits
  5. User saves changes

By displaying a lock icon in step 3, the user gets immediate feedback that the cell is uneditable.

Background shading of course is useful also for immediately indicating which fields are read-only at a glance.

Improve this answer
0

If you are using zebra striping for your rows having yet another bg colour row for disabled might be a might too much on the eye.

In this instance you could change the font colour to be greyed out or a hightlight colour for the disabled rows.

You can also change the cursor to not allowed:

enter image description here

Improve this answer
1
  • sorry just read you are not using zebra stripe... the cursor still applies though
    – Gurnard
    Jun 19, 2015 at 7:22
0

I'd agree with most of the answers here and use a background colour and text colour change to indicate read only cells but from a web accessibility point of view you should also add additional non-colour based indicators such as an icon or text decoration to indicate which rows are read only.

Improve this answer
0

I second Sherwin's answer. Leaving as an answer instead of a comment so I can include an example.

enter image description here

Improve this answer

Your Answer

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

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