Adding a state to a control that indicates a row hasn't been saved yet

Question

I'm working on a web application that users use to approve a bunch of items from a list. Imagine, say, an expense report that someone has to approve every item that's listed.

Currently, the system features a button with a checkbox on each row. The checkbox is unchecked when it hasn't been approved yet, and clicking the button checks the checkbox, marking that row approved.

For various legacy reasons (performance being one), the whole page has a save button at the bottom. So here's the problem - there isn't any visual difference between a row that has been saved and a row that hasn't been saved. This has resulted in a lot of users who have pressed "approve" and never get around to saving the page.

And finally my question: how would you change a control like this to indicate that it still needs to be saved? Or, is there another method that's less weird than a checkbox-in-a-button that might work here?

^{download bmml source – Wireframes created with Balsamiq Mockups}

I know there are similar questions already around showing data needs to be saved in a row, but I think this is a different case as you aren't really editing the content of each row - it's the approve control that's being changed.

Answer 1

I would use multiple visual cues to make it very clear what the current state of the data is.

Giving meaningful and immediate feedback is key to creating a positive user experience where there is no ambiguity about what has or has not been saved.

I would use a combination of an enabled/disabled save button, styled check boxes, icons, and color to represent the state.

Default State

Disable the save button until the user makes a change that could be saved. If the save button is disabled, it is clear to the user that nothing has been changed. Additionally, style the check box elements so that they are not emphasized.

Changes Pending

When a user clicks a check box, highlight the row by using color, an icon, and a label indicating that the current value on that row has changed but has not been saved. Enable the save button.

Changes Saved

When the user clicks the save button, the table should revert to it's "default state" behavior with the exception of highlighting the rows that were saved.

^{download bmml source – Wireframes created with Balsamiq Mockups}

Answer 2

I think indeed it may be the Approve button that throws off your users. The push-button style suggests an action already taken once you click the button. What is the problem of just using a normal checkbox instead? A check box does not carry the idea that an action will immediately happen if you check it. If you want to prevent users from unchecking them, you might want to keep items checked in this session (so, before saving) so users can indeed uncheck (to correct mistakes), but make the check boxes disabled once saved.

Also, you could highlight the Save button when there are any changes to save, including approvals made.

Answer 3

1. One save button = one entity to be saved

You want to highlight specific rows that are changed, while still having only one save button. When you edit a Word Document there is also only one save button for the document, and there is no need to highlight exactly which pages or rows that have not been saved yet. The user will ask herself "are my changes saved?", not "which rows are not saved?"

There is one way to save, so there is one entity to be saved. It is the page that needs the "unsaved indicator", not the rows.

2. Review

I can think of one reason for you to highlight specific unsaved rows: Review. When the user has made important changes, she might want to review all of it before it takes effect. Here, you can help her by providing visual clues.

If this isn't it, I would like to know what you are trying to achieve with your unsaved row indicators?

3. Standard unsaved indicators

Per row:

1. Asterisk on the row title, for example: Item #1*
2. Bold the title, for example: Item #1*
3. Highlight the entire row, for example in light yellow color.

Per page:

1. Asterisk on the page title.
2. Enable/Disable the Save and Cancel buttons if there currently are unsaved changes or not.
3. An infotext, for example "There are unsaved changes", near the page title.
4. Poll upon navigating away from the page, or closing it, if there are unsaved changes.

Answer 4

So, assuming that this list has three potential responses the user can apply to each row (Approve, Reject, Ignore), then I would recommend changing the paradigm from "select response and save" to "select and respond."

Allow the user to select one or more rows (checkbox for each, or if you want to get fancy, just let them click on each row to highlight it), then have the buttons at the bottom be "Approve" "Reject" and "Cancel" - get rid of save altogether. Then it is clear that the user should select a bunch of items and then approve or reject them, it saves automatically.

This is fundamentally the same as, say, your email inbox where you can select one or more messages from the list and delete, star, move to a folder, etc.