UX modal window: Cancel / Save / Close vs Cancel / Save & Exit

Question

I am working on an application where the user needs to complete their preferences which open in a modal window. There has been a big discussion about what are the best practices in this situation.

Some argue, that the right way is to have:

• Cancel and Update & Exit buttons
• Include a feedback on the Save & Exit button
• Display a confirmation dialogue on the main page

I'm not sure if that's the best solution since there is lot of information to be inputted and the process takes lot of time so I'd want to be able to save my work from time to time and be able to stay on the modal window to continue.

I believe we need Cancel Save and Close.

What happens if ...
The user enters some information,
Clicks Close without saving?
"Are you sure you want to leave without saving" modal in a modal?
That doesn't sound right.

What are the best practices in this scenario?

Answer 1

Ideally, for this scenario, having a Save, Clear and Close button should be good enough.

If you wish to save your work form time to time then I don't think you will ever run into the issue of the user closing the window without saving the data(if you use AJAX).

If you are not saving the data say asynchronously, then instead of showing up a modal within a modal(not good), just highlight the questions which were not answered and guide the user to those areas of the form(with like a common error message on top of the current modal).

Answer 2

Autosave is your friend

there is lot of information to be inputted and the process takes lot of time

Consider your three options ...

1. Save on form completion / submit

Obviously this is a risky move with a long form. If possible, people may exit prior to completion just to be safe, but then they have to go back to complete and that's a miserable experience. 😫

2. Provide a dedicated Save button

Separating save from submit allows incremental manual saving. That works, but the user is occupied with something else at the moment: filling out the form! Now they have to think about how much progress they've made and when was the last time they saved. 😞

3. Save it for them!

There are some considerations here, but generally speaking you save as progress is made (on-blur, perhaps). The user can focus on the task at hand while a handy little indicator reassures them that everything is safe. 😎

Autosave in critical environments

In some workflows where data integrity and form completeness are critical, save-as-you-go can have undesired side-effects. In these scenarios, it's useful to implement a "draft" state. The form is saved as changes are made, but the actual records aren't updated until the user confirms submission. The draft updates can be saved locally or on the server, depending on the needs of the usual workflow (where is it likely to be completed).

Answer 3

Got similar issue. We've got probably less information to be inputted by the user so we will probably choose the 2 buttons solution: Cancel (cancel changes and close modal) and Save (save changes and close modal)

For me, the three buttons alternative is the best choice in your context. This is also perfectly adapted for applying and checking visual modifications before closing.

However, for the three buttons alternative. I would vote for a Cancel (cancel changes and stay on the modal), Apply (save changes and stay on the modal) and Save and Quit (save changes if not cancelled and close modal). Replacing the Close button by a more detailed text will help the user to know exactly what will happen when pressing the close button.