I am currently struggling with an edit mode user scenario inside a web application.
- The web application will be used also on mobile, so we can't use “on hover” comportment.
- 99% of the time, users will read and not edit information, so we want a clean and safe layout. We don't want direct modification of the page without a first click on edit or a validation. This is why we choose to have an edit mode.
There is inside the app an edit mode but also direct actions buttons.
On a page with a data table, I could have the “edit” button to bring the edit mode and the “add” button to add a new data with a side panel. There are two scenarios to add a new data that show my issue.
Scenario 1 : I had a new data with the “add” button and the side panel. There is a validation in the side panel.
Scenario 2 : I am in edit mode. Some fields are now editable. I can “cancel” or “save modifications” in a global “edit mode” bottom bar.
I had a new data with the “add” button and the side panel. There is a validation in the side panel.
Now I click on the global “cancel” of the edit mode. I could either :
A. Doesn’t cancel the new data. It was validated in the side panel.
B. Cancel the new data. The validation of side panel is not consistent through the app. Edit mode force a double validation.
Which comportment is better, A or B ?
C. As mention by user "Falco", one solution could be to force the edit mode after adding a row. However, that mean an extra click and, in my case, could surprise the user. In fact, the edit mode include new buttons and sometimes layout-shift.