3

When a user makes some changes in a web app and tries to navigate away without saving them, a dialog appears as a confirmation/warning message.

There are two approaches to these dialogues. Sometimes they contain the options "Discard, Save, Cancel", and sometimes there's no Save option, and the buttons are just "Discard, Cancel" (whatever the exact phrasing may be, that's not the point).

With Save option (on desktop)

enter image description here

Without Save option enter image description here

The way I see it, the main advantage of the first approach is to not force the user to backtrack - it's reasonable that she might want to save the changes she'd made, so why not help her.

The main advantage of the second approach is probably to make sure that the user sees the changes she's committing. Also, to some extent it helps the user to learn to use the system properly (saving her work manually). Also, a dialog with two options is easier to process than one with three options.

Should this kind of dialog contain a Save option or not?

The setting is an enterprise app for IT management, so the changes impact a lot of things in the organization, it's not something for personal use.

(There are many related questions on the site but I couldn't find one dealing with this specific question).

  • I'm talking about our own dialogs, not those of browsers. This is just an illustration. – Vitaly Mijiritsky Nov 20 '16 at 14:20
2

I would say go for the second option. Giving only two options makes it easier to process.

Furthermore, if you label your ‘Yes/No’ buttons with a specific action, users will be able to see what action they’re about to do without reading the dialog box.

enter image description here

This approach lessens user errors and saves users’ time, especially when the dialog box message gets lengthy.

2

The actions available for the user are:

ActionA: exit | ActionB: save | ActionC: not save

In each case these are performed:

Case 1:

  • Confirm ActionA and also:

    • ActionB

    • ActionC (which is !ActionB)

  • Not confirm ActionA

Case 2:

  • Confirm ActionA

  • Not confirm ActionA

Each of the two has its own advantages and disadvantages.

Case 1:

  • Pro: is more handy as the user needs less steps to also perform ActionB or ActionC.

  • Con: is more complex as the user needs to perform an extra action (ActionB or ActionC) to accomplish ActionA.

Case 2:

  • Pro: is simplier as the user only focuses in one action. The dialog makes him confirm his action.

  • Con: in case he wants to perform ActionB he has to go through more steps than in Case 1.

Depending on the app, the pros and cons should be considered and the risk vs. simplicity.

I prefer Case 2 as it is simpler according to what the user wants to perform, and it adds some cognitive load strain to the save action.


In your case:

"The setting is an enterprise app for IT management, so the changes impact a lot of things in the organization, it's not something for personal use."

I would say:

  • Changes not saved are dangerous: go for Case 1.

  • Changes saved not well-thought are dangerous: go for Case 2.

1

In a table form:

A table showing user action for meant to leave (yes/no) vs. aware of changes (yes/no)

If the user didn't mean to leave, she is most likely to press cancel.

If the user did mean to leave, she:

  • won't save if she meant to discard the changes
  • save if aware of changes but forgot to save
  • cancel if meant to leave but unaware of changes and want to see what these are
  • save if unaware of changes, but still OK with saving these

So in at least two scenarios the user intention will be to save the changes, despite navigating away.

Personally, I don't see why you'd force 3 actions (cancel > save > leave) upon the user instead of one (save). Nor do I believe you should force users to see their changes, particularly when you provide them an option to do so.

-1

I would simply take the Desktop dialog with removing the "Cancel" option:

enter image description here

  • Yes: leave current editing page & save changes
  • No: leave current editing page & dismiss changes
  • Close (top right cross): go back to current edition

Simple approach which behavior should meet users expectations & still allowing 3 actions.

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.