I have a grid that has a bunch of data. Some of the fields are editable and cause a postback updating the data. What are the best ways to show that to the user? i.e. Is there a best practice for how to make a distinction between editable and non-editable from a UI perspective?
Add a comment
|
8 Answers
I usually keep my editable fields white and non-editable fields grey (or monochromatic colors if not white fields, light-color: editable and dark-color: non-editable).
-
-
This option will not pass accessibility tests. If another option is available (like box vs. text as Charles proposes), do not rely on color only. Oct 19, 2016 at 6:48
Yeah, there is a best practice - make editable fields look like text boxes and non-editable fields look like text. There's a reason that those two UI elements have distinct looks.
answered Feb 10, 2011 at 15:36
-
3I like that idea (for text boxes) but how does that work for a grid. Does this mean that your grid must use a border for those cells that are editable? I'm thinking of grids where there borders are off and rows are indicated using an alternate row color.– richardMar 20, 2011 at 7:11
I opted for adding a text-muted fa-pencil icon floated to the right of field.
Typically I have a grey background and white editable field. When the field is not editable I set it's background to the same grey (which technically is the same as transparent,, but the user doesn't care about that.. They just see that it is the same).
Text boxes are great in simpler layouts, where the primary use of the element is editing. In a grid where the control is repeated indefinitely, they (like buttons or other controls) will increase visual clutter. This is a problem since one of the reasons we use grids is to provide us with overview.
I really like designs where editable fields are very neutral-looking, like any interface text, but upon hovering they switch to a state that shows they can be edited. This could be achieved using a color, or an icon, that is only visible upon hovering. Upon clicking, you enter the actual edit mode. Jira's web app is an excellent example of this approach.
-
2You need to keep in mind that anything relying on hover won't work if someone is using a touch device– JohnGB ♦May 12, 2014 at 11:02
-
Also, if you are moving the mouse to keep track of where your attention is, the hover effect will cause flickering. Not a great deal if few cells are affected, but then you could use the text box approach as well. Oct 19, 2016 at 6:50
Best practice is generally using inputs for editable content and plain text for non-editable content. You can make the inputs subtle, so they don't create so much clutter even in somewhat heavily populated grid.
If the clutter caused by the exposed inputs is too high, you have option of using controls shown on hover (edit action icon) or transform the plain text to input field on hover (works for one line content, with caution even for multi line content).
However, in terms of providing editable clue only on hover, you should ask yourself what is the primary context of use. If it's mobile touch devices, then you can't rely on hover and you have to expose the edibility right away (again, either using icon for edit action, or exposing input field).
This may reveal a personal bias but I also tend to prefer some kind of "focus visual" that indicates to a user which field they are on. A soft background or border are ways to accomplish this.
-
1You are more talking about indicating current focus, whereas the question is about showing which fields are editable on the whole form. Feb 10, 2011 at 19:05
Text box for the web. Users will be able to distinguish that the field is for text input. Focusing on the first text field is preferred, if possible. This field may be bordered with a thin blue with a cursor in the field or simply highlighted with a border.
For mobile bring up a keyboard. If you can have the first item selected with a blinking cursor do so. Graying out remaining fields is okay.