What is a good clean way of notifying the user their action was registered?

Question

I am developing an internal website for managing company resources. The user sees very few full page refreshes. Therefore, when they click "Save" to save their changes, they don't get a refreshed page to show them the button was clicked and some action was taken.

Right now, the user can make changes, click Save and not know if the click was successful because the page remains the same (except with a Changes Made listbox at the bottom). I anticipate this will lead to users just clicking save 4 or 5 times to make sure.

Does anyone have a good idea/example of a method (AJAX perhaps?) of conveying to the user "Yes, I see you clicked the 'Save' button and acted on it"? It doesn't need to show if it was successful or not (errors are displayed in other ways). I just need the user to know clearly and quickly that their button click registered.

Answer 1

You can disable the save button when there is nothing to be saved. You can also change its label from Save to Saved.

Answer 2

You can also use transitory status notification bars at the top of the screen. These would slide into view upon AJAX success, and then fade out after a very few seconds.

These would also be anchored to the top edge of the window, as distinct from the top of the actual page itself. This means they'd still be visible even if the user had scrolled down the page somewhat, and also would be visible even if the save button was no longer visible (and invoked via a hot-key).

This pattern is also extensible by facilitating undo, or for reporting errors with the action.

Answer 3

I have experienced a similar problem with an intranet site.

The best solution is to go for auto-saving. When a user makes changes to a field, you can make an AJAX call to the server with the new record.

The problem is that this solution cannot be used in all situations. Sometimes you have long or complicated forms with conditional logic, and implementing auto-saving may confuse users and developers.

The solution I chose was combination of Save button manipulations and animated confirmation messages.

1. Then the user clicks save, the button changes to a "pending" gif animation.
2. When the ajax call succeeds, i fade-out the button, and fade-in a green confirmation message in its place.
3. After 5 seconds the green confirmation fades-out, and the original save button reappears.

If the user makes changes to the form before the confirmation box has faded-out, i cancel the 5 second timeout, and show the Save button.

Answer 4

A very simple solution could be to disable the "Save" button after pressing and show a progress indicator (e.g. an roting animation) during the progress (at least 1 second). After progress the "Save" button will be enabled again. Place the indicator near to the button or to another recordnicable area.