Questions pages
This pattern explains when to use question pages and what elements they need to include.
Note: In some cases the height of the content is smaller than the height of the viewport especially in desktop screens. As a result, the footer of the page will stick to the middle of the screen which is not ideal for the user experience. To fix that, you can use the
.govgr-layout-wrapper__full-height CSS utility class combined with .govgr-layout-wrapper.
When to use this pattern
Follow this pattern whenever you need to ask users questions within your service.
You should make sure you know why you’re asking every question and only ask users for information you really need.
How it works
On every question page you should include a:
- back link
- page heading
- continue button
Back link
Some users do not trust browser back buttons when they’re entering data.
Always include a back link at the top of question pages to reassure them it’s possible to go back and change previous answers.
However, do not break the browser back button. Make sure it takes users to the previous page they were on, in the state they last saw it.
An exception to this is when the user has performed an action they should only do once, like make a payment or complete an application. The browser back button should still work, but show the user a sensible message rather than let them perform the action again.
Page headings
Page headings can be questions or statements.
Start by asking one question per page
Asking just one question per question page helps users understand what you’re asking them to do, and focus on the specific question and its answer.
If you’re asking one question on the page
If you’re asking just one question per page as recommended, you can set the contents of the <legend> or <h> tag as the page heading. This is good practice as it means that users of screen readers will only hear the contents once.
You can use the above HTML.
A question page with a h tag as the page heading:
Do not use the same page heading across multiple pages.
The page heading should relate specifically to the information being asked for on the current page, not any higher-level section the page is part of.
If you need to show the high-level section, you can use the govgr-caption style.
For example, ‘About you’
Asking complex questions without using hint text
Do not use hint text if you need to give a lengthy explanation with lists and paragraphs. Screen readers read out the entire text when users interact with the form element. This could frustrate users if the text is long.
Do not use links in hint text. While screen readers will read out the link text when describing the field, they will not tell users the text is a link.
If you’re asking a question that needs a detailed explanation, use:
- a
h1heading statement rather than a question - whatever mix of text, paragraphs, lists and examples best explains your question to users
- a label, above the form input, that asks users a specific question.
Asking multiple questions on a page
Sometimes it makes sense to group a number of related questions on the same page.
User research will tell you when you can group pages together. For example, if you’re designing an internal service for government users who need to repeat and switch between tasks quickly.
If you need to ask for multiple related things on a page, use a statement as the heading.
You can style each h tag or legend to make the questions easier to scan.
Continue button
Make sure your Continue button is:
- Labelled Continue, not Next
- Aligned to the left so users do not miss it