Renaming duplicated 'Save' button



  • This is a form for student registration.

    Context:

    1. The form contains standard fields for student details (name, D.O.B, etc) and editable data grid for students' previous school's details.
    2. User can add multiple schools details by clicking add new.
    3. When all the fields are complete, user needs to click a 'Save' button at the very bottom to save the whole form.

    enter image description here

    Issue:

    1. Due to the framework that we are using ( https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/FormEditing/jQuery/Light/ ), when user add new/ edit row in data grid, it will expand to display the editable fields.

    enter image description here

    1. There will be a 'Save' button for row edit that doesn't actually save so it needs to be renamed. The issue happens when user made changes and click row 'Save' button, without saving the form. So changes are not recorded.

    Resolution

    1. What is the most suitable term to substitute 'Save' row data grid. The term needs to fit both use case; add new row and edit row. I was thinking 'Apply' or 'Update'.
    2. How to make clear to user that any changes need to click 'Save' button at the bottom of the page to save the whole form.

    Any feedback is appreciated.



  • To answer the first part of your question, I feel that either "Apply" or "Update" would work in this case.

    As for the second part, I have two suggestions:

    1. The "Save" button can be greyed out until a change has been made on the form.

    no change -> change

    1. If the user made a change but has not clicked the "Save" button before navigating away from this page, you can prompt them to save.

    enter image description here




Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2