Skip to content

Commit

Permalink
Merge pull request #1835 from alphagov/update-check-answers-guidance
Browse files Browse the repository at this point in the history
Add width layout advice to Check answers guidance
  • Loading branch information
EoinShaughnessy authored Aug 19, 2021
2 parents e273c74 + 550533a commit fc6bf43
Show file tree
Hide file tree
Showing 2 changed files with 9 additions and 1 deletion.
8 changes: 8 additions & 0 deletions src/patterns/check-answers/index.md.njk
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,14 @@ Check answers pages help to:
- increase users’ confidence as they can clearly see that they have completed all the sections and that their data has been captured
- reduce error rates as users are given a second chance to notice and correct errors before submitting data

### Choose the right layout for the page

Many services ask users for short answers, which are suitable for a layout that takes up two-thirds of the screen on desktop devices. For example, the 'Check your answers before submitting your application' page included in this guidance.

Using a two-thirds layout stops lines of text getting so long that the page becomes difficult to read. [To learn more about line length, see ['Layout'](/styles/layout/). It also means the action links are closer to the other content on the page. Users with screen magnifiers are less likely to miss them.

However, if your service asks users for longer or more detailed answers, a full width layout may be more suitable.

### Make the page easy to understand

On your check answers page you should:
Expand Down
2 changes: 1 addition & 1 deletion src/styles/layout/index.md.njk
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ show_page_nav: true

Design for small screens first, starting with a single-column layout.

For most types of page, we recommend using either a 'two-thirds' or a 'two-thirds / one third layout'. That stops lines of text getting so long that the page becomes difficult to read on desktop devices.
For most types of page, we recommend using either a 'two-thirds' or a 'two-thirds and one third layout'. That stops lines of text getting so long that the page becomes difficult to read on desktop devices. This would usually mean no more than 75 characters per line.

Never make assumptions about what devices people are using. Design for different screen sizes rather than specific devices.

Expand Down

0 comments on commit fc6bf43

Please sign in to comment.