Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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.

share|improve this question
3  
Yes - please see my answer to this question Design recommendation for a button regarding feedback to the user after clicking a button which as no other immediate user-visible action. –  Roger Attrill Oct 24 '11 at 18:02
    
I agree with Roger - even down to the use of the 'Sunflower' 'working' icon. –  PhillipW Oct 26 '11 at 9:29
    
I liked Roger's answer as well. But he didn't post it as an answer so, I went with Assaf's answer, which has some of the ideas that I ultimately went with....but I did +1 Roger's answer on the question he linked. –  Yetti Oct 26 '11 at 14:02

4 Answers 4

up vote 12 down vote accepted

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

share|improve this answer

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.

status blip, a la google

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.

enter image description here

share|improve this answer

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.

share|improve this answer

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.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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