Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

I have a table with data, with several columns. This is a table used mostly for reading, with the possibility for a user to occasionally adjust some values. Most columns are informative only, and some can be edited (like amounts, quantities, dates, etc). I don't have control over the order, the size, or even the presence of these columns, as it can be customized by the user. The fact of being editable is mostly related to the column, however some rows have data that cannot be edited on some columns.

As it is, the table does its job on the purely functional stage. If you double-click on a cell which is editable, you will enter the editor for it. If you double-click on another one... nothing happens.

I miss a way to indicate that this cell is editable, other than clicking desperately.

What would be the best way to indicate that?


Constraints linked to my personal case: (it's better if the answer takes them into account, but not obligatory. The question doesn't have to be too specific)

  • Users have the possibility to customize the font (size, style), the text color, the alignment of cells for a given column. So I don't have control over these parameters.
  • My table is mostly a report, in which it is possible to adjust values occasionally. This is not the main way to edit them, just a quick shortcut.
  • Some columns have conditions on the editable state, so some rows (rare) cannot be edited, even if the column would normally allow it.

Current thoughts:

  • A different background color for editable cells would be the first thing to spring to mind. However, since there is no control over the order, size, or else, it's easily giving a very messy result. It's also not obvious on first sight that this is editable.
  • Adding an icon to the cell? It would be straightforward, but would easily add a lot of clutter to the table.
  • Another possibility would be to indicate the fact that a column is editable, directly in the header. It won't take into account the fact that some cells can't be edited, even in such columns, but since their occurrence is rather rare, this seems like the way to add the information with the least clutter.
share|improve this question
    
Note: for ease of reading, the rows in my table have an alternating background color. –  Gnoupi Feb 22 '12 at 13:55
2  
Change the cursor –  Roger Attrill Feb 22 '12 at 14:25
1  
@RogerAttrill why didn't you post this as an answer? You enlightened me! :D I was trying two other approaches, which was graying out the cells that were not editable or overlaying an edit icon within the cell to do it... but the cursor idea was great! –  edgarator Jul 23 '12 at 4:29

5 Answers 5

up vote 2 down vote accepted

I think an icon can be done in a way to not clutter so much. Try using vey low contrast (light gray) icons which are noticeable but not obnoxious. When the user hovers, the icons darken and/or color and a highlight appears around the cell. You say double-clicking activates the edit mode but can a single click do? Or maybe clicking on the icon? I think double click is always difficult to discover but more so on the web where it's not expected.

Also, maybe this is overkill but consider having a tool-tip that appears when hovering over read-only cells saying "This cell is not editable" or something. Conversely, "click to edit" over editable cells.

As always, test your designs, even if it's someone you pull off the street.

share|improve this answer

Another option would be to show an icon (or another indicator) only on mouse hover. There are a few pros and cons with that approach.

Pro

  • adds almost no clutter
  • the icon can be very descriptive (more so than a color)
  • it's a quite common approach

Con

  • it's not immediately visible which cells are editable

This may or may not be an issue though, depending on the workflow of your users.

share|improve this answer
    
Hmm, I haven't thought about that, indeed, interesting idea. I will give it a try and see how it goes. –  Gnoupi Feb 22 '12 at 14:26
    
Good idea if the users are going to be frequent users. If most of your users are going to be infrequent users then dont go for this. –  Viraj Feb 23 '12 at 2:13
    
It's going to be frequent users, something they will work on for a large part of their day, in my case, so it's quite good. –  Gnoupi Feb 23 '12 at 14:05

In this case, one should rely at the same time on the "non-editable" cells whereas, only informative cells will appear in regular font> black color : "Completed" and editable cells will appear in Italic> grey color "Enter Value" (Amounts). I think this is simple, because it does not add up any cul

share|improve this answer
    
My problem is that editing is secondary on this table. The main purpose is to have a sort of report. Editable cells mostly all have a value of their own before edition. And for the primary use, they actually serve a purpose of information. –  Gnoupi Feb 22 '12 at 14:21
    
Could you fix up your sentences a bit? If necessary, please use the visual styles to demarcate the workflow from your explanation. –  dnbrv Feb 27 '12 at 22:14

Which cell types do you have more? Editable or only readable?

Only readable cells in a form or table are usually marked with light grey font color. This way editable cells would have no special formatting, and editability could be marked by changing the cursor to enter image description here

share|improve this answer
    
I have more readable ones, in general. In fact, editable ones are also "readable" in their first purpose. The fact of being able to edit them is secondary. –  Gnoupi Feb 22 '12 at 14:28
    
About the cursor, I have to say that this is the first time I see it, though. Is that really something that most users would associate to editing? –  Gnoupi Feb 22 '12 at 14:33

two decisions of this problem are known to me:

1 use controls for changing values, such as Stepper control (Mac)/ Spin control (Win), input fields & others for hover mode on a row.

2 - use Edit in place mode

Ajax based

JQuerybased

Change the cursor for editable fields text cursor

& there is a small nuance in a switching mode to Edit in Place. Single click is in most cases used. Use of double click for those cases when user skills of mouse-possession aren't great is quite admissible also. In my practice I began with double click mode switch that reduced possibility casually to remove the data, for example at copying of values or selecting. The first model is now used.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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