Add example of summary list with missing information

[frankieroberto]

This shows how you can use the summary list when there is some missing information. There’s a few scenarios when this can occur:

• if a user returns to a partially-completed application
• if additional questions have been added since the user first completed the task (for example, in a case working system)
• optional questions
• where the summary list is shown before the user starts answering the questions. Digital Marketplace adopted this pattern, in order to make it clearer up-front what all the questions were, and because multiple users might collaborate on a single application.

One option for tackling this is to leave the value column blank, or with some placeholder text such as "Not entered", whilst keeping a "Change" link in the actions column. However "Change" makes sense sense when there’s no existing value to change. The link could be renamed to "Add" or similar, but the wording is a bit awkward. Having a "Not entered" placeholder text can be harder to spot when scanning, or be mis-interpreted as words literally entered by a user. The placeholder text could be a different colour such as a dark grey, but this is quite subtle and relying upon colour should be avoided. A blank space is arguably easier to spot, but might be mis-interpreted as being an optional question.

To solve these issues, a more apparent way to make missing (and required) information apparent is to put a link in the value column, instead of a "Change" link. The link text could be a question, or the information required preceded by a verb such as "Enter" or "Select" (depending on context).

This pattern/component is being tested by different teams at the Department for Education. Feedback from other teams using similar patterns is welcome.

Screenshot

Alternatives

It may make sense to add further highlighting using a blue border, either left of the key or the link text:

[govuk-design-system-ci]

✅ You can preview this change here:

Built without sensitive environment variables

Name	Link
🔨 Latest commit	2293f9f
🔍 Latest deploy log	https://app.netlify.com/sites/govuk-design-system-preview/deploys/64e870555880070008831dfb
😎 Deploy Preview	https://deploy-preview-1668--govuk-design-system-preview.netlify.app/components/summary-list
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[frankieroberto]

More alternatives...

Using placeholder text for missing answers (eg 'None'):

Making the placeholder text (eg 'Empty') dark grey:

[rinto-c]

This shows how you can use the summary list when there is some missing information. There’s a few scenarios when this can occur:

• if a user returns to a partially-completed application
• if additional questions have been added since the user first completed the task (for example, in a case working system)
• where the summary list is shown before the user starts answering the questions. Digital Marketplace adopted this pattern, in order to make it clearer up-front what all the questions were, and because multiple users might collaborate on a single application.

One option for tackling this is to leave the value column blank, or with some placeholder text such as "Not entered", whilst keeping a "Change" link in the actions column. However "Change" makes sense sense when there’s no existing value to change. The link could be renamed to "Add" or similar, but the wording is a bit awkward. Having a "Not entered" placeholder text can be harder to spot when scanning, or be mis-interpreted as words literally entered by a user. The placeholder text could be a different colour such as a dark grey, but this is quite subtle and relying upon colour should be avoided. A blank space is arguably easier to spot, but might be mis-interpreted as being an optional question.

To solve these issues, a more apparent way to make missing (and required) information apparent is to put a link in the value column, instead of a "Change" link. The link text could be a question, or the information required preceded by a verb such as "Enter" or "Select" (depending on context).

This pattern/component is being tested by different teams at the Department for Education. Feedback from other teams using similar patterns is welcome.

Screenshot

Alternatives

It may make sense to add further highlighting using a blue border, either left of the key or the link text:

Much prefer the link without left blue border. Until we know the plain links will get missed by users, it might be an unwanted distraction.

[frankieroberto]

Here’s another pattern we're trying, using a blue border and some bold text with the full question, followed by the a link starting in a verb ("Select..." or "Enter...").

In this context, it’s someone editing some existing information where we have since added some extra questions, and so need to draw attention to these.

[edwardhorsford]

We’ve got a similar use case - needing to highlight answers that need to be changed / reviewed - but aren't missing.

We have data coming from another system, and it doesn't always match our data requirements. An example is us needing subjects to be selected from a long list of subjects - but the source data has a few occurrences of free text entry (which our system can’t support).

Where possible, we will automatically map / translate as much as we can. But in some cases we’ll need our users to fix the data. In this case we want to highlight these ‘invalid’ answers to our users to manually correct them. But also don’t want to imply that the person who originally entered the data did anything wrong.

The pattern we've come up with (influenced by some other work at DfE that @frankieroberto shared above):

• Insert a notification banner at the top of the page that lists the fields that need changing
• Insert a new styled section within the summary cards for each answer that needs correcting. These are very similar to standard error styling but with a different colour.
• If the user tries to submit the page but doesn't correct the errors, replace the notification banner with an error summary, and style the inset areas red - thus we only style as errors once our users have made a mistake.
• On the edit form page themselves, include a similar notification banner and inset styling.

Video:

Initial page state

Notification banner

Inset content within summary list

Error state

Shown if a user checks I have reviewed the trainee data but has not corrected the issues.

Error summary

Inset content

Form page

Here we need to include the original data submitted in the message so our users know what to search for

In an earlier version of this design, we pre-filled the fields with the original answers - but this really confused our participant as they could see nothing wrong with the text - better to have field be blank.

---

How it's tested

We've taken this through one round of testing with 9 users, and so far it's tested well.

For our first participant we were dynamically hiding the I have reviewed the trainee data checkbox, and did not have error styling. This tested terribly - the user did not see the banners or inset text, and the page didn't highlight anything was wrong - so they'd go to the page, and then click continue.

We later restored the checkbox so it would always be visible, and we give clear errors if you try to submit it - this has tested very well. Some users still had banner blindness initially, but for them the error styling and approach was clear and they were able to fix the issues.

Importantly, our users were clear that they were essentially being asked to 'massage' the data or make it fit - they understood this was a data quality issue and that the source of the data hadn't made a mistake.

[rinto-c]

Here’s another pattern we're trying, using a blue border and some bold text with the full question, followed by the a link starting in a verb ("Select..." or "Enter...").

In this context, it’s someone editing some existing information where we have since added some extra questions, and so need to draw attention to these.

I think this design makes sense in the context. How long (length) is your check your answer page in this context? Would it make sense to use blue colour for border and question when you have the link in same colour? The affordances might lose impact maybe?

[frankieroberto]

@christopherthomasdesign @owenatgov I'm going through old PRs and trying to tidy them up. Forgot about this one!

Is this change something you'd consider adding? Working out how to represent "missing" information in summary lists seems like quite a common issue that’s come up a few times.