2

What is the best way to denote which fields in a grid contain unsaved changes?

In the below example, a user has made changes to data in a spreadsheet-like matrix. The interface has highlighted the changes field with a yellow background, and the save button has been made (ahem) prominent.

enter image description here

Is there a better way to remind the user which fields they have edited (and not saved yet) in a grid?

These suggestions for a regular web form seem like they would be cumbersome in a large matrix.

  • Recent related question: What is the best UI for overwriting previously saved values? Might give you a place to start. – maxathousand Jun 14 '17 at 17:59
  • @maxathousand, that is a related issue, but with a grid you don't have the extra space around fields that the answers to that question utilized. – Tim Grant Jun 14 '17 at 18:04
  • 1
    What is wrong with what you have proposed? Seems functional. – dennislees Jun 14 '17 at 20:09
  • @dennislees, maybe nothing (besides the green button). But I like to do my due-diligence, and I can't find any studies, etc., to back up my seat-of-the-pants UI decisions. But if you are saying, "Looks pretty good to me," that's good to hear. – Tim Grant Jun 14 '17 at 20:18
  • The button is proof that good simple design is hard ; ) There is the potential that your highlights are interpreted as meaning "something is wrong here", as opposed to "these need to be saved". It's the kind of thing you could find out with a prototype and a small number of user tests to evaluate. I've got a more technically involved option which I'll add as an answer below. – dennislees Jun 14 '17 at 20:29
3

There's a risk that your highlights might be interpreted as "Something is wrong with this value", i.e. as an error.

Consider adding a warning icon to cells that have been edited, along with a tooltip that explains what it means.

Or, perhaps more efficiently, as in the second example below, as soon as any cell has a warning icon, show a 'key' that explains the meaning.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

1

Highlighting is a good start

But it could conflict with other cell colors if your app supports those (e.g. to differentiate collated calenders). Perhaps instead of using a flat color, use a pattern for unsaved cells? Or play with border thickness/color. Or you could use text formatting if that's not used in the cell design.

At any rate, try to avoid overlapping style types.


Adding an icon will help

Because it will probably fall outside of the style of other cells, which are likely only text-styled. I'd suggest something that relates to the task. E.G pencil (editing), floppy (saving), open/closed lock (solidifying changes).


Use the save button as both input and output.

The button is the way the user will interact a lot and it's pretty big and stands out (literally, in this case). So why not use that to your advantage and make this attention-grabbing piece of screen provide useful feedback?

Perhaps add a short text that explains how many unsaved buttons there are? Have the save button change color or text so it's obvious the context/use changed.

For example:

gray [ all cells saved ]

blue [ 2 unsaved cells ]

gray [ 2 cells saved ]


Tie the button to the cells

Use the icon both in the cells and on the button. And use the same color/hue/style on both the cells and the button.

Right now your cells are yellow and the save button is green. Probably just because you quickly made a mockup, but keep it in mind.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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