Pages

Task list pages
Being worked on

A cross-government group is collaborating on work to update this pattern and build it as a component.

Task list pages help users understand:

  • the tasks involved in completing a transaction
  • the order they should complete tasks in
  • when they've completed tasks

A screenshot showing an example of the task list page, includes a heading, and three grouped sections that each contain tasks, some of these tasks are marked as completed.

There’s a coded example of a task list page in the GOV.UK Prototype Kit. To use the example, get the following code from the Prototype Kit repository on GitHub:

When to use this pattern

Only use a task list page for longer transactions involving multiple tasks that users may need to complete over a number of sessions.

Try to simplify the transaction before you use a task list page. If you’re able to reduce the number of tasks or steps involved, you might not need one.

How it works

You should show a task list page:

  • at the start of the transaction
  • at the start of each returning session

If you use a task list page in your service, you'll need to:

  • group related actions into tasks
  • show the status of the tasks

If there are lots of tasks to complete, you might also need to group them further into steps.

Group related actions into tasks

Group related activities and questions into tasks, for example, ‘Provide financial evidence’ and ‘Give medical information’. This will help users understand and plan what they need to do.

Where possible, task names should:

  • describe what the task or activity will involve
  • start with verbs, for example, ‘check’, ‘declare’, ‘report’

Show the status of the tasks

Include a summary above the task list to say how many tasks have been completed.

You might find a better word to describe what a ‘task’ is for your users. If your service is an application form, each task might be a ‘section’ of questions to complete.

A screenshot showing a task list summary that says 'Application incomplete. You've completed 3 of 8 sections'

Make it clear to users which tasks they’ve completed and which still need their attention, by labelling them using the Tag component.

A screenshot showing a completed tag next to a list of tasks

Use the following labels to describe the different states of a task:

  • 'Not started' (in grey) if the user can start work on the task, but has not done so yet
  • 'Cannot start yet' (in grey) if the user cannot start the task yet - for example because another task must be completed first
  • 'In progress' (in light blue) if the user has started but not completed the task
  • 'Completed' (in blue) if the user has completed the task

Group tasks into steps

If your transaction involves lots of tasks, make it manageable by splitting it up into steps that represent stages in the process.

For example, you could group all tasks which help users find out if your service is right for them in a step called ‘Check before you start’.

Where possible, allow users to complete tasks in any order. This will help them plan their time and complete sections as and when they can.

Marking tasks as completed

Sometimes, it’s better to let the user decide when a task is completed.

This can be helpful when a task involves:

  • some questions that are optional
  • writing a long answer (such as in a textarea)
  • looking up information, such as details about previous jobs
  • answers that need to be checked carefully with someone else

Do this by asking a radio question at the end of the task — either as the last question (if the task is a single page) or on the ‘Check answers’ page (if the task uses multiple question pages).

Ask ‘Have you completed this section?’ with the radio options ‘Yes, I’ve completed this section’ or ‘No, I’ll come back later’.

If the user selects ‘No, I’ll come back to it later,’ mark the task as 'Incomplete' or 'In progress'.

If the user selects ‘Yes, I’ve completed this section,’ mark the task as 'Completed'.

<div class="app-example app-example--tabs">
  <div class="app-example__toolbar">
    <a href="/patterns/task-list-pages/have-you-completed-this-section/index.html" class="app-example__new-window" target="_blank">
      Open this
      <span class="govuk-visually-hidden">have you completed this section – task list pages</span>
      example in a new tab
    </a>
  </div>
  <iframe title="Have you completed this section – Task list pages example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable" src="/patterns/task-list-pages/have-you-completed-this-section/index.html" frameBorder="0" loading="lazy"></iframe>
</div>

<span id="options-have-you-completed-this-section-task-list-pages-example"></span>
<ul class="app-tabs" role="tablist">
  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#have-you-completed-this-section-task-list-pages-example-html" role="tab" aria-controls="have-you-completed-this-section-task-list-pages-example-html" data-track="tab-html">HTML</a></li>
  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#have-you-completed-this-section-task-list-pages-example-nunjucks" role="tab" aria-controls="have-you-completed-this-section-task-list-pages-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
</ul>

  <div class="app-tabs__heading js-tabs__heading"><a href="#have-you-completed-this-section-task-list-pages-example-html" aria-controls="have-you-completed-this-section-task-list-pages-example-html" data-track="tab-html">HTML</a></div>

<div class="app-tabs__container js-tabs__container" id="have-you-completed-this-section-task-list-pages-example-html" role="tabpanel">
  <div class="app-example__code">
    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">form</span> <span class="hljs-attr">action</span>=<span class="hljs-string">&quot;/form-handler&quot;</span> <span class="hljs-attr">method</span>=<span class="hljs-string">&quot;post&quot;</span> <span class="hljs-attr">novalidate</span>&gt;</span>

<div class="govuk-form-group"> <fieldset class="govuk-fieldset"> <legend class="govuk-fieldset__legend govuk-fieldset__legend--m"> Have you completed this section? </legend> <div class="govuk-radios" data-module="govuk-radios"> <div class="govuk-radios__item"> <input class="govuk-radios__input" id="have-you-completed-this-section" name="have-you-completed-this-section" type="radio" value="yes"> <label class="govuk-label govuk-radios__label" for="have-you-completed-this-section"> Yes, I’ve completed this section </label> </div> <div class="govuk-radios__item"> <input class="govuk-radios__input" id="have-you-completed-this-section-2" name="have-you-completed-this-section" type="radio" value="no"> <label class="govuk-label govuk-radios__label" for="have-you-completed-this-section-2"> No, I’ll come back to it later </label> </div> </div> </fieldset> </div> <button class="govuk-button" data-module="govuk-button"> Continue </button> </form> 

  <div class="app-tabs__heading js-tabs__heading"><a class="app-tabs__heading-link" href="#have-you-completed-this-section-task-list-pages-example-nunjucks" aria-controls="have-you-completed-this-section-task-list-pages-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></div>
<div class="app-tabs__container js-tabs__container" id="have-you-completed-this-section-task-list-pages-example-nunjucks" role="tabpanel"><div class="app-example__code">
    <pre data-module="app-copy" tabindex="0"><code class="hljs js">{% <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;govuk/components/button/macro.njk&quot;</span> <span class="hljs-keyword">import</span> govukButton %}

{% from "govuk/components/radios/macro.njk" import govukRadios %} <form action="/form-handler" method="post" novalidate> {{ govukRadios({ name: "have-you-completed-this-section", fieldset: { legend: { text: "Have you completed this section?", isPageHeading: false, classes: "govuk-fieldset__legend--m" } }, items: [ { value: "yes", text: "Yes, I’ve completed this section" }, { value: "no", text: "No, I’ll come back to it later" } ] }) }} {{ govukButton({ text: "Continue" }) }} </form>