Question page
Sample HTML for Question page example
<div class="ds_wrapper">
<a class="ds_back-link" href="#">Back to 'Who can apply for Adult Disability Payment'</a>
<main id="main-content" class="ds_layout ds_layout--question-page">
<div class="ds_layout__content">
<form class="ds_form">
<div class="ds_form__content">
<div class="ds_question">
<fieldset>
<legend class="ds_page-header">
<span class="ds_page-header__label ds_content-label">Check if you qualify for Adult Disability Payment</span>
<h1 class="ds_page-header__title">
Are you a British citizen?
</h1>
</legend>
<div class="ds_field-group">
<div class="ds_radio">
<input class="ds_radio__input" id="answer-1" type="radio" name="answer" value="yes">
<label class="ds_radio__label" for="answer-1">Yes</label>
</div>
<div class="ds_radio">
<input class="ds_radio__input" id="answer-2" type="radio" name="answer" value="no">
<label class="ds_radio__label" for="answer-2">No</label>
</div>
</div>
</fieldset>
</div>
</div>
<div class="ds_form__actions">
<button class="ds_button" type="button">Continue</button>
</div>
</form>
</div>
<div class="ds_layout__footer">
<div class="ds_!_margin-top--4">
<h2>Your answers</h2>
<p><button class="ds_link" type="button">Clear answers and start again</button></p>
<ol class="ds_summary-list">
<li class="ds_summary-list__item"><span class="ds_summary-list__key" id="q1">Do you live in Scotland?</span> <span class="ds_summary-list__value"><q class="ds_summary-list__answer">Yes</q></span>
<div class="ds_summary-list__actions">
<button class="ds_link" aria-describedby="q1" type="button">Change</button>
</div>
</li>
</ol>
</div>
</div>
</main>
</div>About this pattern
The question page pattern allows you to ask users for information in a form.
You can download this pattern in the Design System prototyping kits.
When to use this pattern
Use the question page pattern in common forms such as:
- application forms
- eligibility checkers
- fee calculators
Preparing your questions
Prepare your questions before you start building question pages.
Do user research to understand what information you need to collect from users.
Draft your questions and map out the flow of the question pages before you create a prototype, to ensure the questions follow a logical order.
This will also help you to decide whether to follow the one question per page format or whether certain questions are related and need to be grouped.
Allow users to answer ‘I do not know’ or ‘I’m not sure’ if they’re valid responses.
Read the form content guidance for more advice on developing form questions.
One question per page
Start by asking just one question per question page. This helps users focus and understand what’s being asked of them.
This method will affect how long your form will be so ensure you only ask users for information you need.
Read more about ‘one thing per page’ in the form design guidance.
Grouping related questions on a page
If there are questions that are related to each other, it may make sense to group them together on the same page.
User research can help you to decide if questions should be grouped together.
If grouping related questions together, use a statement as the page heading.
Sample HTML for Grouped questions example
<div class="ds_wrapper">
<a class="ds_back-link" href="#">Back to 'Create a tenancy agreement'</a>
<main id="main-content" class="ds_layout ds_layout--question-page">
<div class="ds_layout__header">
<header class="ds_page-header">
<span class="ds_page-header__label ds_content-label">Section 2: About the tenancy</span>
<h1 class="ds_page-header__title">
First rent payment
</h1>
</header>
</div>
<div class="ds_layout__content">
<form class="ds_form">
<div class="ds_form__content">
<div class="ds_question">
<label class="ds_label" for="unique-id">How much is the first rent payment?</label>
<p class="ds_hint-text" id="unique-id-hint">This does not include the deposit</p>
<div class="ds_currency-wrapper">
<input class="ds_input ds_input--fixed-10" type="text" id="unique-id" name="unique-id" aria-describedby="unique-id-hint">
</div>
</div>
<div data-module="ds-datepicker" class="ds_question ds_datepicker">
<label class="ds_label" for="start-date">When will your tenant make the first payment?</label>
<p class="ds_hint-text" id="unique-id2-hint">Use DD/MM/YYYY format</p>
<div class="ds_input__wrapper">
<input id="start-date" name="start-date" type="text" class="ds_input ds_input--fixed-10" aria-describedby="unique-id2-hint">
</div>
</div>
<div data-module="ds-datepicker" class="ds_question ds_datepicker">
<label class="ds_label" for="end-date">The first payment covers rent from the start date of the tenancy until</label>
<p class="ds_hint-text" id="unique-id3-hint">Use DD/MM/YYYY format</p>
<div class="ds_input__wrapper">
<input id="end-date" name="end-date" type="text" class="ds_input ds_input--fixed-10" aria-describedby="unique-id3-hint">
</div>
</div>
</div>
<div class="ds_form__actions">
<div class="ds_button-group">
<button class="ds_button ds_button--secondary" type="button">Back</button>
<button class="ds_button" type="button">Continue</button>
</div>
</div>
</form>
</div>
</main>
</div>Avoid asking for information more than once
To meet WCAG 2.2 success criterion 3.3.7 Redundant Entry, only ask for a piece of information once within a single journey. Whenever possible, do not ask a user to re-enter information they’ve already provided.
If the same type of information is needed more than once, make it possible to reuse previously entered answers by either:
- pre-populating the relevant fields
- showing carried-forward responses as an option for the user to select
How to use this pattern
You should use the question layout for question pages.
Arrange elements in a single column, aligned to the left of the display. This makes it clear to users how they should complete the form.
Check how to use:
- mandatory elements on a question page
- optional elements on a question page
Using the question component in a question page
You should use the question component to help build the question page.
The question component helps with structuring form fields and other elements, such as hint text and error messages.
Within a question page, you can:
- use a single question component
- use multiple question components
- combine the question component with other elements on the question page – for example, a back link or summary list
Evidence
Research and testing
We tested the question page pattern as part of our testing on housing forms.
Users easily navigated through the form and completed the tasks they were given.
They reported that the form was easy to work through because the question pages were similar to other online forms they’d completed.
Performance data
We have strong evidence that users are able to complete forms that use the question page pattern.
On mygov.scot:
-
a high rate of users progress from question to question and there has been no feedback suggesting issues
-
using the one question per page format means that fewer than 1% of users experience errors – error rates are similar on desktop and mobile devices
-
users engage with the summary list “change” option on both desktop and mobile
-
when used in an eligibility checker, users may be using the summary list to find alternative outcomes
Website analytics
To understand user behaviour, you can track the individual elements like buttons, radio buttons, error messages and the summary list.
Use the Design System’s ‘tracking’ script to add the data attributes automatically.