diff --git a/src/patterns/check-answers/index.md.njk b/src/patterns/check-answers/index.md.njk index 0bf0e3c5f9..7952faa02f 100644 --- a/src/patterns/check-answers/index.md.njk +++ b/src/patterns/check-answers/index.md.njk @@ -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: diff --git a/src/styles/layout/index.md.njk b/src/styles/layout/index.md.njk index a1d3f5eb0d..c12faaf96d 100644 --- a/src/styles/layout/index.md.njk +++ b/src/styles/layout/index.md.njk @@ -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.