Check answers

[govuk-design-system]

Use this issue to discuss this pattern in the GOV.UK Design System.

[hannalaakso]

We tested Prototype Kit's Check your answers page on NVDA + Firefox + Windows 10). If NVDA is set to read all content from top of page, it reads out "List of 12 items" on encountering the definition list ("Personal items"). As 12 items here includes both the dt tags ("Name") and the Change links, this might not be helpful to the user. NVDA reads out List of x items with both ul and dl lists so it could be it's not clear to the user how many actual "items" there are in a definition list from NVDA's description.

[kr8n3r]

Posting here for visibility

AXe will report an accessibility issue with the Description List that is used in the pattern, with
"<dl> is immediately followed by a <div> and not a <dt>"

This is a bug in aXe and a pull request has been opened to address it.

More details on allowed markup in the Description List element: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dl under Permitted content section.

[Ash-Wilson]

I've been testing an alternative version to this pattern within the Apply for Direct Rent Payments service. There is no user need to have a change link at each section, as some of the questions are on the same page and grouped to one thing per page e.g Tenant Details. It's tested really well and I wonder if it's worth having something like this as an alternative, depending on what the needs are?

[sdh100shaun]

We have also been looking at a similar pattern
at the DVSA - what are the thoughts on this pattern where each section has a change?

[joelanman]

@Ash-Wilson @sdh100shaun The official guidance is to start with One thing per page, in which case most answers would need their own 'Change' link. However if you find in research that grouping some questions on a page works better for your users, then you should do that.

Be really careful though - one advantage of One thing per page is it makes understanding and interaction simpler for everyone. People who have problems reading and understanding, or interacting with digital services can really benefit from One thing per page. This is normally more important than grouping questions to make it a bit quicker for other people.

[sdh100shaun]

thanks @joelanman , our UX person is going to test, especially as this fits into an established application.

[drewno-design]

We've tested alternative layout of the page - with values in bold and keys/labels in normal font weight. The alternative version performed better for users with sight issues. It was easier for them to read values that were bold.

This might be a case of a few values on a page, where it is not needed to scan a lot.

[jfranciswebdesign]

Every now and then we'll get feedback from users indicating they think "Check your answers" means they've made an error, as in they're interpreting the purpose of the page as 'You've made a mistake, check your answers, and correct accordingly". So a title change might be something to consider?

[MartinDM]

Am I right in saying that 'Check your answers' pattern is not part of the new Design System and is not in the govuk-frontend npm package?
https://govuk-prototype-kit.herokuapp.com/docs/templates/check-your-answers

Is it more a case of copying over the styles from Elements, in order to use the markup in the example? Just wanted to check it's not directly import-able before copying it over/re-implementing.
Thank you :)

[amyhupe]

Dropbox Paper audit

On 16 January 2019 the Design System team reviewed and removed a Dropbox Paper document discussing the Check answers pattern.

The aim was to reduce the number of places containing guidance and code by:

• migrating relevant, useful content into the Design System itself
• recording important research findings in the community backlog
• removing the original Dropbox Paper page

Below is a record of the outcomes of that review.

If you need to, you can see the original Dropbox Paper content in the internet archive.

Review outcomes

Updates to the Design System

The Design System team will carry out the following updates to ensure that relevant, useful content from the Dropbox Paper file is added to the Design System.

• Add guidance on how to name check answers pages to make clear that there is an action required of the user

[ChazUK]

I was wondering how people handle the navigation between this Check Answers page and Question pages, and are there any examples that people can point me in the direction of?

Question Pages are seen as a complete flow navigating through them in order until they are all completed. 1 -> 2 -> 3 -> 4 -> 5 -> Check Answers.
When a user decides to change an answer they are directed to the Question Page, when the user completes the question and clicks Continue are they then returned to the Check Answers page or forced to go through the remaining Questions? Would it be better to change the copy to be more explicit?