4

Working on a form with multiple small grids for information display and adding a new grid. (Grid is the right display here.) The business unit wants the legacy grids to remain editable with a pop-up Add/Edit forms, but wants the new grid to be editable, since the fields are simple numeric entry.

My question is: what is the best way to indicate that the grid is editable? The existing grids have Add/Edit/Delete buttons above them.

  1. Should the editable grid have an Edit button, enabling the grid editability? (editable cells look editable, once the user tabs/ clicks into the grid, but how do I invite them in?)
  2. If yes to above, does the Edit button turn to a Save button? Or enable a Save and a Cancel button?
  3. If an editable state is not pervasive, how does it look different from non-editable state?
  4. Does it matter if the form of data entry is different between the three grids? (one edit button turns the grid into an editable state, another launches an add/edit pop-up)

Also, fwiw, each new record is shown at the row level, with the columns respective attributes of that row. Per request, here is a visual enter image description here

Three grid options with invitation to edit

Improve this question
2
  • The answer likely depends on the user scenario. Will users be editing one cell at a time, one row at a time, one column at a time, or the entire grid?
    – Andrew
    Oct 16, 2012 at 19:04
  • Could you please include a visual for this? I'm not sure what we're working with here... what do these "grids" look like?
    – Tim
    Oct 16, 2012 at 20:29

2 Answers 2

Reset to default
4

If you can avoid buttons, please do.

Today’s users are more familiar with editing tools than when the web was new (and hard to edit through the browser).

To let users know what to do – and how – you could add a simple highlighted text, such as editable, on the grid as you have shown on the second grid. This could be a hyperlink or have a yellow background to more highlight the feature. When the user clicks a cell – the informative text link can disappear, and you could add your text instead (editing).

When the users leave the cell, you can silently save the value to a persistent state (database). Also – highlight the cell your user is currently editing, making it easy to understand where the user is in editing mode. When the user leaves focus of the grid – remove the text (editing) and leave it without the editable text visible, since the user now know it can be edited. Also enable keyboard functions, such as tabbing between cells.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Improve this answer
4
  • 1
    Is there a reason not to give the top-left cell visual focus right away?
    – Kit Grose
    Oct 17, 2012 at 12:53
  • 1
    @KitGrose If you have more than 1 grid on the page or if you just want to view the grids and not edit.
    – Benny Skogberg
    Oct 17, 2012 at 13:02
  • 1
    Interesting response, @BennySkogberg. Thank you for that detail. I am working on putting standards around the types of grids (and data) that work well for editable grids (complex validations and free-form text in long lengths work less well for us). I have mocked up three examples for different grids we use with an invitation to edit (pencil icon)- more subtle than the text, but works better based on where our grids are located. Appreciate the help and inspiration.
    – Leslie M
    Oct 17, 2012 at 21:57
  • @LeslieM Glad I could help. A pencil work very well. The most important thing is that the user must have some recognition of what you can do. The reason for me chosing text is probably my own bias towards Windows 8 style (formaly known as Metro) :-)
    – Benny Skogberg
    Oct 18, 2012 at 6:17
2

Inline editing right in the grid is normally done on the per row basis.
On hover system shows the pencil icon - to suggest that a row is editable. On click system shows the editable feilds with buttons to save or discard.

Google ad words as example:

grid inline editing

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.