Inline edit: Should input fields be Editable by default, or force users to click Edit then Save?

Question

I have a Settings page with various input fields, radio buttons, checkboxes etc.

Currently, all the inputs are editable by default. There are three self-explanatory buttons at the top, RESET DISCARD SAVE
If the user did not make any changes, the buttons are disabled

I think this flow is slightly problematic for a few reasons:

1. The user makes an edit, doesn't click SAVE and navigates to another page. Changes are not made
2. Its not immediate to the user what RESET & DISCARD does
3. The user might think the SAVE is for text fields only, and fail to save changes made to radio buttons & checkbox inputs

I proposed the following flow instead:

• User needs to click EDIT before the fields become editable
• EDIT button disappears, there is now DISCARD SAVE
• If user navigates away while EDIT mode is active, show a popup "You have unsaved changes. Are you sure you want to navigate away from this page?"

Questions:

• How should I deal with non-text input fields? e.g. radio buttons, checkboxes. Should I show them disabled until user clicks Edit? Should I reserve Edit for text field inputs only?
• Is it worth letting the user go through an extra click to Edit Settings? What is the convention for this type of Settings page flow?
• Should each field be edited individually rather than a single Edit button for all fields?
• Should I not use inline-editing altogether and do a Edit Settings modal instead?

Answer 1

My question is this: If this is not a modal, what is the difference between Reset and Discard? If this were a modal I would expect "Reset" to take back all the changes and not close the modal, and "Discard" to close the modal with no changes saved.

I don't think making the user click an "Edit" button is a good idea, if you want that to be able to track any changes made, you can also track any clicks made on the inputs to the same effect.

You can also make minor UI changes to highlight unsaved changes (Bold texts, highlighted input boxes/checkboxes etc.

The main problem I see here is that the user may be confused with what to expect from an action / what they should do next. I would minimize the required decisions and make sure the buttons are always visible and use slight animations to guide and remind the user to save the changes when you detect any.