Multiple Save Buttons after Editing Information

Question

I keep going back and forth on this issue and wanted to get some other opinions.

We have a series of pages within a settings control panel. There are multiple modules within the pages, and each module can be saved independently.

Should the "SAVE" button on each module appear:

1. Always appear enabled (right side of image)
2. Only appear enabled when a change has been made (left + right images)
3. Some other variant, such as not appearing until there is a change made (walked away from this idea)

Answer 1

Consider just getting rid of save button. Whenever user makes a change, just remember that change and update it. And then give user a non-modal receipt like a toast. It's a common modern way of GUI implementation for Settings changes, especially for web based products.

If you really want to have the save button, having one button makes more sense in your case, but make sure it's discoverable to users.

Also since your settings have multiple pages(sections), you can consider adding a navigation, most likely based on your section titles. So users can get an overview of settings and can easily drill down to a specific section at the same time.

Answer 2

A different approach is to display the content plainly on the page as non-editable content (no dropdowns and textfields, just text) and add an 'edit' button to each section. If the user clicks this button you show all the textareas, dropdowns etc along with the 'Save' button and a 'Cancel' button.

This whole approach makes the user feel more at ease, you can view the page without being afraid of changing something accidentally. You only work on one section at a time and can even decide not to apply the changes.

I actually like the fact that you have little chunks of information, it's easier to digest that way.

Answer 3

If you want a user to get a perception that only one block will be saved, I would suggest Option 2. Keep "Save" button disabled unless a change is made.

If you keep all buttons active (Option 1), a user may make changes to both sections, 1 and 2, then expect to click "Save" inside one of the sections to save changes in both areas. If you choose to go the route of Option 1 then you need to make sure "Save" buttons save changes on the entire page, rather within only one section.

Additional UX improvements:

1. Right now your design pattern for an actionable item looks identical to the group block heading, you may want to consider using an alternate design pattern for your CTA
2. I've seen a few tools do auto-save when a user leaves a field. Such approach will allow you to eliminate the need of a "Save" button

Answer 4

I would suggest using multiple tabs per group and target each group while clicking on each tab. Thus, your updated details can be saved in one go, SAVE button appears only if you change or update something.