1

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

1

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?"

2

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?
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.

1
  • 'Reset' changes the field to its default values (I should have mentioned this in the question), 'Discard' removes the current changes
    – c143013
    Sep 24 at 2:39

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.