Saving Changes

Buttons are the most common tool to confirm and save changes. Make sure they're highly visible.

Where should the Save Changes button be placed? As users scan the content, their eyes move from the top half of the screen toward the bottom. When the content ends, they look for a call to action — so place the CTA button at the end of the content.

For browsers, make sure that the button is above the fold. Another option is to place the button right below the end of all the editable content. In apps, you can make the button stick to the bottom of the screen so that it's always visible.^[1]

Users who understand what's going on in the system feel more confident and trust it more.^[2] This is especially important while they're making changes.

The state of the Save Changes button is a good way to communicate system feedback. Display the button as disabled before changes are applied. When information is modified, change the button state to active in order to bring it to users' attention. This will communicate to them that changes have been made and are waiting to be saved.

Keep users in the loop about what's going on in the system. After users change their information and press the Save Changes button, show that saving is in progress. This communicates that the interaction was successful, and users didn't waste their time.

A common way to show that changes are being saved is by using a loader — either as a CTA button state or a full-screen one. If the process takes a while, add a message stating so or some tips and fun facts to make the wait less boring.

Once the system has saved the changes, the page will reload or update. Informing users about this ensures that they know their work wasn't lost. Use a success toast notification or banner that disappears after a while to inform users that changes have been saved. These can include an Undo functionality which is great for reversible actions or actions with minor consequences.^[3]

Success messages should be visible but not intrusive. In the message, be sure to include a short description of what has happened.

If your product requires users to share sensitive information — like their credit card details — it most likely already has two-factor authentication. It's a security process in which users need to verify themselves twice, most commonly with:

• A login and password
• A security token (e.g., one-time passwords)
• A biometric factor (a fingerprint or facial scan)^[4]

Consider adding two-factor verification when changing important information, such as an email address, billing info, etc. This will ensure that users can avoid any unauthorized or accidental changes.

Autosave is now common in many products. When done right, it reduces effort and speeds things up. Autosave works best for simple settings that are easy to undo, such as toggles and checkboxes. Each change is a complete action. For example, in an email settings page, a checkbox like “Receive weekly summary emails” can be saved the moment the user checks or unchecks it. The action is complete in one click, the change takes effect immediately, and reversing it is just another click.

Users can switch something on or off without checking other fields. The result is immediate and clear. Because of this, instant saving feels normal. Users expect the change to apply as soon as they interact with the control.

Still, autosave should not remove user control. A Save Changes button gives users reassurance and a clear way to confirm updates, especially when they want to be deliberate.

Platform habits also matter. macOS users are familiar with autosave and expect changes to persist right away. Windows users are more used to explicit Save or Apply actions. Designing with these expectations in mind helps avoid confusion.

Allow users to leave without making changes. Most users expect the changes not to be saved when they close the window or press the Back button, so avoid tying autosaving to these functions.

You can use a confirmation dialogue when users modify important information such as an email address or phone number without saving it. Make sure that the dialogue is short and straightforward. The headline should ask, or inform, about one main action we'd like to reconfirm. Avoid generic headlines for confirmation dialogues like "Warning" or "Are you sure."

Use unambiguous CTA buttons. The word Cancel isn't great when related to deleting or removing, as it's not clear what is canceled — the action or the cancellation of the action. Better options include Back, Stay, No, Leave, Quit, or any other action word that is instinctively clear in context.