A Check answers page gives people one last chance to review their inputs before they submit.
Why we have a design pattern for Check answers pages
We have a design pattern for Check answers pages so people are:
-
confident their information is complete and accurate before they submit it; and
-
to reduce the amount of time it takes for people to access government services. Less errors means less back and forth with staff and quicker access.
When to use a Check answers page
You should have a Check answers page for all transactional services and online forms.
When not to use a Check answers page
Do not use a Check answers page if the user is not completing a transactional service or online form.
How Check answers pages work
There are two main functions for Check answer pages. For the user to:
-
review their inputs and make corrections if needed; and
-
submit their application or form.
Placement
In most cases Check answers pages go before the Payment page or Confirmation page. In some instances the size and complexity of the form require a different approach.
The purpose of a Check answers page is to give people a chance to review and edit their inputs if needed. If the page is so long - people can't do this, you can prompt them to review their inputs throughout the transaction.
Remind users to review each page or section for accuracy before they Continue to next step.
This could be a checkbox with the text "I have reviewed my entries on this page."
Or you can include a checkbox and text. "To the best of my knowledge, the information I've provided in this application is accurate and true."
Language and style
Check answers pages have the following parts.
Page title
Page titles for Check answers pages must use a version of the following. "Review your application details before submitting."
Information alert
This reinforces a transaction isn't complete until the user confirms the information is correct.
The information alerts should appear below the page title. It should be a version of the following. "Your application isn't complete until you select the Finish and submit button below."
See Information alert styling.
Page number
The page or step number should appear after the Information alert.
Summary of form data inputs
Summary content should be easy for the user to scan and review. To do this, present the content in groups and only show users relevant fields.
Group content by each page of the service. You can frame each section with a box to make it easier for people to scan.
Only show the sections of the form that are relevant to the user. For example, if they’ve said they’re from the Yukon, don't show sections for questions they have not answered.
You can also rephrase questions. For example you:
-
do not need to label every individual line of an address; and
-
can rewrite long questions as shorter statements.
Edit button
Let users go back and edit their answers.
Each section should have an Edit button. Style this as a secondary button if possible. Place the button next to or at the bottom, left of each section if possible.
When a person selects the Edit button or link it should take them to the answers page. This page should look the same way they did when the user last used them. Their answers should be pre-populated.
Once a person selects the Continue to next step button, they should return to the Check answers page. They should not need to go through the rest of the transaction again.
In some cases a person's updated response may trigger more, or different questions. They should do this before returning to the Check answers page.
Go back a step button
The Go back a step button should appear at the bottom left of the page. Style it as a secondary button. Text on this button should always be "Go back a step."
Finish and submit button
The Finish and submit button should appear to the right of the Go back a step button. Style it as a primary button. Text on this button should always be "Finish and submit."
Example of a Check answers page
