When should input fields be cleared in modals, if at all?

Question

I have an invoice page with a button to make a payment. The payment button triggers a series of modals for collecting user payment info (credit card/check details, billing details, payment Confirmation).

Is there a standard or best-practice for clearing the fields in series of modals?

For example, should I be including a Cancel button on each modal that will clear all of the fields on all of the modals?

Should clicking the Close button in the upper-right of the modal, or clicking on the modal overlay also clear the fields? Or, should I be leaving the fields populated in case the user accidentally clicks on the overlay or just wants to look at the content behind the modal?

Right now I have a Cancel button on the first modal and a Back button on subsequent modals, but I am leaving the user information in the fields until the payment is processed or the user closes the tab/window.

Answer 1

Respect the user's time

There will be many reasons why a user wants to dismiss a modal dialog box—other content that they need to check, for reassurance, things they need to look up, interruptions they need to handle first.

Therefore, respect the user's effort and retain the data they entered, as long as only the current user will see this. (Don't confuse others by showing incomplete work that belongs to another user.)

If you think the user might be confused, you can cue them when they re-open the modal:

Do you want to continue your previous entry?

Obviously, don't ask this if there isn't any meaningful data in the previous entry, such as only the date.

Test your solution

Then test it with users to see whether they want to be prompted. You may decide to remove the prompt altogether, or give users the option to "Don't show this again".

I hope that helps you move forward.