Best way to show Readonly and Writable cells in a grid?

Question

I am designing a data grid on a web application that will display a mix of writable and readonly data.

A bit of background: we're migrating a desktop application that identifies readonly vs writable data by text color (blue = readonly, black = writable).

I'm struggling to figure out a design solution to identify what is writable/readonly. Should the approach be to identify it by cell color/border? By text?

Right now, a proposed design solution is this:

Answer 1

By default, people will assume that a cell is writable, so your task is really just to show that a cell is read only.

I think that the best way to convey this is through the cell's background color and the cursor's state when hovering over it. People tend to associate the style of text to what the text represents (e.g. red text = something is wrong with the value). Coloring the table cell, on the other hand, conveys information about the state of the cell (read only) instead of the cell's value. Aside from the missing column dividers, I think your example is fine.

Answer 2

The general principle is that you need to design the visual presentation of data based on what information you want to highlight or make easier for people to understand. In your question the problem seems to be trying to make it easy to identify read or write only cells, which means that you are not highlighting one or the other, but merely providing a convenient way to distinguish between the two. So your core strategy is to use design methods to create the greatest contrast between the two types of values.

Another general principle is that you should use more than one method to identify data because different people perceived information in more than one way, and people often have different preferences depending on their sensitivity to different forms and styles of presentation.

Therefore, think about how you can create the greatest amount of contrast in areas like:

• Text: if the words are similar length then it is hard to differentiate when you are looking at a large number of cells at the same time versus comparing one cell to its neighbouring cells. I would be weary about changing font types or font style (e.g. bold, italics) because it doesn't necessarily work as well as other strategies for very large sets of data.
• Colour: using colours that contrast with each other allows you to distinguish between the two easily. You need to be aware of things like colour blindness when picking colours as well.
• Icon: pick shapes or symbols that have different physical characteristics, such as a circular or smooth shape versus an angular shape.

Try a combination of these strategies and others to see what works best visually, both when you look at a small number of cells versus a large number of cells. Think of additional scenarios and use cases to see if your design strategy will work well, and iterate on the designs to get the optimal results for your users.