In-page actions in an enterprise with general Save button

Question

we are building an enterprise where the user can register/edit customers. Each customer has a lot of information which is separated in multiple tabs (up to 10).

The enterprise has a general save/create button - the user can edit fields from different tabs and he needs to press the save button(visible from all tabs) for ALL of the changes to take place.

One of the tab is the document management tab. Here the user can upload customers' documents - an ID, Certificate, Due diligence etc.

^{download bmml source – Wireframes created with Balsamiq Mockups}

In the document tab the user has the possibility to replace or archive a document. Throughout the enterprise so far we have a confirmation screen popping out to confirm actions such as - replace, delete, archive, lock etc.

The problem that we are facing is that even if the user confirms in the pop up window he needs to click save, or he would lose all of the changes he has made (not only to the documents tab)

Should we:

• leave the confirmation screen along with the general save.

• remove the confirmation screen.

Have you encountered some similar case or know about any relevant information (best/bad practices)?

Thanks in advance

Answer 1

Your description is bit unclear in the following part:

if the user confirms in the pop up window he needs to click save

If I understand it correctly - the user uploads a new document or updates an existing one, and still clicking on general "Save" button is required.

Such a message saying "click something or you'll lose all your changes" is scary and will confuse/drive your users off. I'd rather place a balloon saying "don't forget to save your changes" right after the document is uploaded and also mark the tabs where changes were made if you'd like to keep the "Save" button. Just add some extra check on leaving the window and alert the user if unsaved changes exist.

I'd rather abandon the general "Save" button and save every change the user makes. If you're afraid of accidental changes, then you can allow the editing of the fields only after explicitly clicking e.g. on ✎ icon in the text field.

Still, for additional actions (uploading/updating a document) I'd go for "no save click required" - if the document is uploaded, it's there. My experience says that if the users took a lot of effort to update/insert some data and forgot to press "save", they get frustrated.

Nevertheless, if you abandon "Save", you should drop "Cancel" button as well - all changes done in place are stored immediately.

tl;dr

• keep Save and Cancel, add extra check on leaving the dialog - extra clicks required but cancelling is available
• use neither Save nor Cancel - less clicks required but cancelling unavailable.

Answer 2

One way around this is to have a Undo /Save dedicated to each tab. No access to other tabs unless changes are saved or undone. The user will get to grips with this very quickly and prevent mass change loss. Just an idea.

Answer 3

It is hard to determining some case studies. How many people would make edits on several tabs at the same time ? How many changes would they make in average and how frequent ? What do you show on the tabs ? Mostly inputs ? Files ? Evaluate the content shown.

It would work great if you would remove the save button from every page and use autosave feature where possible.

For example in the documents tab if a user wants to delete ( replace a document ) prompt him to confirm the replacement and autosave. If there is a contact info tab with forms use a edit / save like below. Click the pencil to edit, once you click it you have the option to edit and save.

If they have a tab with forms

Answer 4

Should we:
leave the confirmation screen along with the general save.
remove the confirmation screen.

The only real way to know this is to perform A/B testing

Personally I would remove the screen and implement the following instead:

• As long as the user has made some change, highlight the Save button somehow, perhaps displaying 'You have unsaved changes!' next to it
• When the user navigates away from the page without saving changes, give them a warning to Save or Discard changes.