Question pages

This pattern explains when to use question pages and what elements they need to include.

Example

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.

If you ask for optional information:

• in most contexts, add ‘(optional)’ to the labels of optional fields
• for radios and checkboxes, add ‘(optional)’ to the legend

Never mark mandatory fields with asterisks.

On every question page you should:

• make sure it’s clear to users why you’re asking each question
• allow users to answer ‘I do not know’ or ‘I’m not sure’ if they are valid responses

How it works

Question pages must include a:

• back link
• page heading
• continue button

If research it’s helpful for users, you can also include a progress indicator.

Back link

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.

To help you follow this approach, you can set the contents of a <legend> or <label> for a page’s input as the page heading. This is good practice as it means that users of screen readers will only hear the contents once.

Read more about why and how to set labels and legends as headings.

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.

Asking complex questions

Use hint text if you need to give a small explanation.

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 <h1> heading that’s a statement (for example, ‘Eligibility through SI contributions from Abroad’) 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 – for example, ‘Are there Social Insurance contributions in another country?’

Example

Example

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.

Use bold font weight for <labels> or <legends> that describe each field.

Example

Continue button

Make sure your ‘Continue’ button is:

• labelled ‘Continue’, not ‘Next’
• aligned to the left so users do not miss it