Users used to update their data from time to time. Key outcome: remember to confirm a change.

Steps

  1. Display the “Save Changes” action somewhere. This action should be visible but disabled, where there are no changes.

    Frame 6.png

  2. Once the change is made, then activate the “Save Changes” action. For example, in a form, if users edit previously filled data enable button “Save Changes” when users make changes.

    Frame 7.png

  3. Show when changes are saved. When the changes are being saved (sometimes it takes a few seconds), you want to show that the action is in progress. Display loading spinner on the action button.

    Frame 9.png

  4. Confirm that changes are changes. Notify users about successfully saved changes. They can safely leave the page or move on with the next actions.

    Frame 8.png

Articles & materials

Saving and feedback

Does a form need a save button