The end of flow confirmation appears as a modal at the end of a flow to let users know they completed a task and can move on to the next.
- This messaging lets users know they successfully completed a complex and/or important flow.
- This confirmation is especially helpful at the end of a flow with lots of steps.
Appearance and behavior
This end of flow confirmation modal appears after the user completes the last step in a flow or takes an important action.
- Use the modals component. You can find modals guidelines here.
- The confirmation messaging appears on the refreshed page.
- If you need to, guide users to recommended next steps or actions they should take. You might also include some additional information that can help users.
Getting through a complex flow or task is cause for a little celebration. Messages at the end of a flow are an opportunity to make users happy with a friendly high five. Don’t overdo it. We don’t want to make it seem like we’re rewarding them for surviving our complicated interface.
At the end of some flows, we might need to alert them about final steps, as in “Your changes haven’t been saved.” In such cases, follow the three-part structure for alert and error messages:
- Tell users what’s happening or what is about to happen. Example: “Your changes haven’t been saved.”
- State the consequences or give more details. Example: “If you continue, you’ll lose your changes. Do you want to leave without saving?”
- Offer calls to action. Example: Yes, No
These three steps help us present copy that is conversational and gives users the right level of guidance. Try to avoid copy that states, “Are you sure?” followed by Yes and No buttons. “Are you sure?” tends to sound accusatory, as if we’re questioning the intelligence of our users.
End-of-flow success validation with next steps
End-of-flow success validation with next steps option 1
End-of-flow success validation with next steps option 2
For end of flow confirmation of step flow, please refer to step flow page.