Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add width layout advice to Check answers guidance #1835

Merged
merged 2 commits into from
Aug 19, 2021
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
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