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 I not use inline-editing altogether and do a Edit Settings modal instead?

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?