Does and don’ts for designing form review pages
Anyone who had the pleasure of filling out a long and complex form has likely encountered them: the last step in the process, the final chance to correct your answers before the point of no return. This seemingly common UX pattern comes with a bunch of design challenges, so let’s unpack.
What is it?
The final step in a form flow that plays back all the information gathered thus far, offering the opportunity to review and edit it before submitting.
When is it needed?
This step is most relevant for long and complex forms where the user may have forgotten what information they provided at the start by the time they reach the finish line.
There is no hard and fast rule for the minimum number of steps that warrant a review, and the decision typically depends on:
- Length: the number of steps in the process
- Complexity: how straight-forward are the questions
- Correlation: is information in the later parts of the form likely to make users reconsider their previous answers
- Significance: is it crucial for users to provide accurate information at this stage
For example, a relatively short checkout flow might benefit from a review step to ensure the user gets charged the right amount and the goods are shipped to the correct address. On the other hand, users who voluntarily fill out a lengthy survey are a lot less likely to want to reread it at the end.
What should it be called?
So what is the correct title for this step? Well, it depends. If you are taking a more descriptive approach, this page is a Summary. This title neatly reflects its purpose but lacks in giving the user a clear guidance on what’s expected of them at this stage. For this reason, many forms opt to use action words like Check / Review or Confirm (the later has more confidence), followed by an object, such as your details / information / answers.
What should it include?
This is a summary of the form, and as such, it should reflect it’s structure and content as closely as possible. While it might be tempting to shorten this page by skipping some questions and sections that are less likely to need editing, less content doesn’t necessarily equal better usability. There is a cognitive load associated with poor recognition and recall, so these decisions shouldn’t be made lightly. Some of the changes you might want to consider:
- Swapping the full questions for a shorter label, so “When did you move into this address?” becomes “Move-in date”. Here are some common changes:
- Merging multiple input fields into single answers, such as the day, month and year displayed as a date or multiple lines of address combined into a single entry.
- Skipping the “parent” question that has additional “children” questions that are revealed conditionally. For instance, if you are asking someone if they have a second nationality, and if they say ‘yes’, revealing an additional questions: “What is your second nationality?”, you may choose to summarise this as “Another nationality: British” or “Another nationality: None” instead of showing both questions.
These changes should be reviewed on the case-by-case basis, but the general rule of thumb is: if you want to change something because it looks confusing in the summary, you should probably change it in the form itself instead.
How can users update their details?
There is little value in playing back the answers if the user can’t edit them. Here are some options:
- By far the easiest solution is in-line editing. Each item is the summary has it’s own ✏️ button that makes the content editable.
This works great for simple forms, but does throw some curveballs for flows with conditionally revealed question. In the example above, changing the answers to “Do you have a second nationality?” question from “Yes” to “No” should also erase the next line that states what this nationality is, which can be a confusing experience.
- For the more complex forms, the edit button should take the user back to the relevant field / section, so they can make all the necessary changes there.
Note that the editing journey should be different from filling in the form in the first place. The page should appear pre-populated and the original “Continue” (or similar) button should change to “Save” and return straight to the review page instead of forcing the user to go through the entire form again.
