2

I am currently struggling with an edit mode user scenario inside a web application.

Context

  1. The web application will be used also on mobile, so we can't use “on hover” comportment.
  2. 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.

The problem

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 ?

enter image description here

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. enter image description here

2 Answers 2

1

A solution would be to automatically start editing mode, when the user adds a new row. So confirming a row would always return into the table in editing mode - and everything always has to be saved by pressing "SAVE" in the editing mode.

Although this will be an extra click for the user it has several benefits. If for example a table has a validation across multiple rows (like the total sum of the table has to be positive) one may need to add multiple rows at once to fulfill the criteria. In this case validation after adding each single row would fail.

This way also provides consistency to the user experience - data is only ever persisted when pressing the "global" SAVE button. So the user can always add multiple rows, review and edit the rows until everything is right and then save everything with a single click.

2
  • I was thinking about this solution. I edit the question to show what it is looking like, but I see two problems. The extra click here is annoying, as you mention. Secondly, the layout-shift, the new buttons could be surprising for the user.
    – Funkit
    Jan 18, 2022 at 18:50
  • Layout shift can be mitigated by using stable layouts, so nothing shifts when the new buttons appear. And the extra click is only annoying if you edit a single row and want to save it. If you change/add multiple rows, it is just a single click for all changes together, not for each individual one.
    – Falco
    Jan 20, 2022 at 10:00
1

I think the second option is the valid one, since the Save button of the second window is linked to the Save or Cancel buttons of the first one. Maybe a possible solution is to differentiate the name of each Cancel button.


There are several examples, but you have one in front of you that may be able to help you.

To post a question or an answer in UXSE

  1. Start editing the text
  2. Adding an image clicking the image icon → there are two options Add or Cancel. I clicked Add to insert the image below.

Image

When the answer is ready, there are two possibilities with two buttons:

  1. Post your answer → all changes are saved and placed in the answer (Save modifications)
  2. Discard (in red) → Edited text and previously added image are removed

Post answer


UXSE differentiates cancel a local action from a global one with two elements:

  • Different name → Cancel / Discard
  • Different button text color → Blue / Red

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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