Task list
This is currently experimental because we need more research to validate it.
Sample HTML
<h2 id="task-list-status" class="ds_task-list-status-heading">Application incomplete</h2>
<nav aria-labelledby="task-list-status" class="ds_task-list-status">
<p>You have completed 1 of 4 sections.</p>
<p><a href="#task2" class="js-task-list-skip-link">Skip to first incomplete section</a></p>
</nav>
<ul class="ds_task-list">
<li class="ds_task-list__task" id="task1">
<div class="ds_task-list__task-details">
<h3 class="ds_task-list__task-heading">
<a class="ds_task-list__task-link" href="#">Conditions <span class="visually-hidden">(Completed)</span></a>
</h3>
<p class="ds_hint-text ds_task-list__task-summary">Tell us about your conditions, symptoms and any sensory issues you have.</p>
</div>
<strong class="ds_tag ds_tag--green" aria-hidden="true">Completed</strong>
</li>
<li class="ds_task-list__task" id="task2">
<div class="ds_task-list__task-details">
<h3 class="ds_task-list__task-heading">
<a class="ds_task-list__task-link" href="#">Medications <span class="visually-hidden">(In progress)</span></a>
</h3>
<p class="ds_hint-text ds_task-list__task-summary">Tell us about any medication you need.</p>
</div>
<strong class="ds_tag ds_tag--grey" aria-hidden="true">In progress</strong>
</li>
<li class="ds_task-list__task" id="task3">
<div class="ds_task-list__task-details">
<h3 class="ds_task-list__task-heading">
<a class="ds_task-list__task-link" href="#">Treatments and therapies <span class="visually-hidden">(Not started)</span></a>
</h3>
<p class="ds_hint-text ds_task-list__task-summary">Tell us about any treatments and therapies you need.</p>
</div>
<strong class="ds_tag ds_tag--grey" aria-hidden="true">Not started</strong>
</li>
<li class="ds_task-list__task" id="task4">
<div class="ds_task-list__task-details">
<h3 class="ds_task-list__task-heading">Contacts and supporting information <span class="visually-hidden">(Cannot start yet)</span></h3>
<p class="ds_hint-text ds_task-list__task-summary">Share any supporting documents and provide details of people we can talk to about you.</p>
</div>
<strong class="ds_tag ds_tag--grey" aria-hidden="true">Cannot start yet</strong>
</li>
</ul>About this pattern
A task list can be used to help users complete a transaction that has many steps, such as filling out a form that asks for a lot of information.
It is designed so that users can understand:
- the tasks involved in completing the transaction
- the current status of each task
- where tasks must be completed in a particular order
You can change the terms ‘transaction’ and ‘task’ to best suit your service. For example, this may be a series of sections within an application.
Showing the status of tasks
Every task should have a corresponding text label describing its status as one of:
- Not started
If the user can start work on the task but hasn’t done so yet - Cannot start yet
If the user is unable to start the task yet because other tasks need completed first - In progress
If the user has started but not completed the task yet - Completed
If the user has completed the task
The total number of tasks and how many tasks have been completed so far should be summarised in content above the task list.
A link to the first incomplete task provides a quick way for users to continue their transaction.
When a task cannot yet be completed an explanation should be included to support the status label.
Related tasks
Grouping related tasks under different headings can help users understand what to expect. Headings should describe clearly what will be involved and where possible should begin with a verb, for example ‘check’, ‘declare’ or ‘report’.
Sample HTML
<h2 id="task-list-status" class="ds_task-list-status-heading">Application incomplete</h2>
<nav aria-labelledby="task-list-status" class="ds_task-list-status">
<p>You have completed 4 of 7 sections.</p>
<p><a href="#task5" class="js-task-list-skip-link">Skip to first incomplete section</a></p>
</nav>
<ul class="ds_task-list-group">
<li class="ds_task-list-group__section">
<h2 class="ds_task-list-heading">Provide your health details</h2>
<ul class="ds_task-list">
<li class="ds_task-list__task" id="task1">
<div class="ds_task-list__task-details">
<h3 class="ds_task-list__task-heading">
<a class="ds_task-list__task-link" href="#">Conditions <span class="visually-hidden">(Completed)</span></a>
</h3>
<p class="ds_hint-text ds_task-list__task-summary">Tell us about your conditions, symptoms and any sensory issues you have.</p>
</div>
<strong class="ds_tag ds_tag--green" aria-hidden="true">Completed</strong>
</li>
<li class="ds_task-list__task" id="task2">
<div class="ds_task-list__task-details">
<h3 class="ds_task-list__task-heading">
<a class="ds_task-list__task-link" href="#">Medications <span class="visually-hidden">(Completed)</span></a>
</h3>
<p class="ds_hint-text ds_task-list__task-summary">Tell us about any medication you need.</p>
</div>
<strong class="ds_tag ds_tag--green" aria-hidden="true">Completed</strong>
</li>
<li class="ds_task-list__task" id="task3">
<div class="ds_task-list__task-details">
<h3 class="ds_task-list__task-heading">
<a class="ds_task-list__task-link" href="#">Treatments and therapies <span class="visually-hidden">(Completed)</span></a>
</h3>
<p class="ds_hint-text ds_task-list__task-summary">Tell us about any treatments and therapies you need.</p>
</div>
<strong class="ds_tag ds_tag--green" aria-hidden="true">Completed</strong>
</li>
<li class="ds_task-list__task" id="task4">
<div class="ds_task-list__task-details">
<h3 class="ds_task-list__task-heading">
<a class="ds_task-list__task-link" href="#">Contacts and supporting information <span class="visually-hidden">(Completed)</span></a>
</h3>
<p class="ds_hint-text ds_task-list__task-summary">Share any supporting documents and provide details of people we can talk to about you.</p>
</div>
<strong class="ds_tag ds_tag--green" aria-hidden="true">Completed</strong>
</li>
</ul>
</li>
<li class="ds_task-list-group__section">
<h2 class="ds_task-list-heading">Tell us about your daily living and mobility circumstances</h2>
<p class="ds_task-list-intro">This information will be used to check what additional benefits you may be able to apply for.</p>
<ul class="ds_task-list">
<li class="ds_task-list__task" id="task5">
<div class="ds_task-list__task-details">
<h3 class="ds_task-list__task-heading">
<a class="ds_task-list__task-link" href="#">Preparing food <span class="visually-hidden">(In progress)</span></a>
</h3>
<p class="ds_hint-text ds_task-list__task-summary">Questions about your ability to prepare a simple meal safely and any help you need to do this.</p>
</div>
<strong class="ds_tag ds_tag--grey" aria-hidden="true">In progress</strong>
</li>
<li class="ds_task-list__task" id="task6">
<div class="ds_task-list__task-details">
<h3 class="ds_task-list__task-heading">
<a class="ds_task-list__task-link" href="#">Taking nutrition <span class="visually-hidden">(Not started)</span></a>
</h3>
<p class="ds_hint-text ds_task-list__task-summary">Questions about your ability to eat and drink and any help you need to do this.</p>
</div>
<strong class="ds_tag ds_tag--grey" aria-hidden="true">Not started</strong>
</li>
<li class="ds_task-list__task" id="task7">
<div class="ds_task-list__task-details">
<h3 class="ds_task-list__task-heading">
<a class="ds_task-list__task-link" href="#">Managing therapy or monitoring a health condition<span class="visually-hidden">(Not started)</span></a>
</h3>
<p class="ds_hint-text ds_task-list__task-summary">Questions about any help you need to monitor changes in your health condition, take medication or do therapy at home.</p>
</div>
<strong class="ds_tag ds_tag--grey" aria-hidden="true">Not started</strong>
</li>
</ul>
</li>
</ul>Ordering of tasks
Where possible, allow users to complete tasks in any order. This will help them plan their time and complete sections when they are able to.
When a transaction requires certain tasks to be completed before others, groups of tasks can be ordered in a numbered list.
Sample HTML
<h2 id="task-list-status" class="ds_task-list-status-heading">Application incomplete</h2>
<nav aria-labelledby="task-list-status" class="ds_task-list-status">
<p>You have completed 3 of 6 sections.</p>
<p><a href="#task4" class="js-task-list-skip-link">Skip to first incomplete section</a></p>
</nav>
<ol class="ds_task-list-group ds_task-list-group--ordered">
<li class="ds_task-list-group__section">
<h2 class="ds_task-list-heading">Provide your health details</h2>
<ul class="ds_task-list">
<li class="ds_task-list__task" id="task1">
<div class="ds_task-list__task-details">
<h3 class="ds_task-list__task-heading">
<a class="ds_task-list__task-link" href="#">Conditions <span class="visually-hidden">(Completed)</span></a>
</h3>
<p class="ds_hint-text ds_task-list__task-summary">Tell us about your conditions, symptoms and any sensory issues you have.</p>
</div>
<strong class="ds_tag ds_tag--green" aria-hidden="true">Completed</strong>
</li>
<li class="ds_task-list__task" id="task2">
<div class="ds_task-list__task-details">
<h3 class="ds_task-list__task-heading">
<a class="ds_task-list__task-link" href="#">Medications <span class="visually-hidden">(Completed)</span></a>
</h3>
<p class="ds_hint-text ds_task-list__task-summary">Tell us about any medication you need.</p>
</div>
<strong class="ds_tag ds_tag--green" aria-hidden="true">Completed</strong>
</li>
<li class="ds_task-list__task" id="task3">
<div class="ds_task-list__task-details">
<h3 class="ds_task-list__task-heading">
<a class="ds_task-list__task-link" href="#">Treatments and therapies <span class="visually-hidden">(Completed)</span></a>
</h3>
<p class="ds_hint-text ds_task-list__task-summary">Tell us about any treatments and therapies you need.</p>
</div>
<strong class="ds_tag ds_tag--green" aria-hidden="true">Completed</strong>
</li>
<li class="ds_task-list__task" id="task4">
<div class="ds_task-list__task-details">
<h3 class="ds_task-list__task-heading">
<a class="ds_task-list__task-link" href="#">Contacts and supporting information <span class="visually-hidden">(Not started)</span></a>
</h3>
<p class="ds_hint-text ds_task-list__task-summary">Share any supporting documents and provide details of people we can talk to about you.</p>
</div>
<strong class="ds_tag ds_tag--grey" aria-hidden="true">Not started</strong>
</li>
</ul>
</li>
<li class="ds_task-list-group__section">
<h2 class="ds_task-list-heading">Review and submit</h2>
<p class="ds_task-list-intro">Please check your answers carefully before submitting your application.</p>
<ul class="ds_task-list">
<li class="ds_task-list__task" id="task5">
<div class="ds_task-list__task-details">
<h3 class="ds_task-list__task-heading">Check your answers <span class="visually-hidden">(Cannot start yet)</span></h3>
<p class="ds_hint-text ds_task-list__task-summary">Review all your answers before submission.</p>
</div>
<strong class="ds_tag ds_tag--grey" aria-hidden="true">Cannot start yet</strong>
</li>
<li class="ds_task-list__task" id="task6">
<div class="ds_task-list__task-details">
<h3 class="ds_task-list__task-heading">Submit your application <span class="visually-hidden">(Cannot start yet)</span></h3>
<p class="ds_hint-text ds_task-list__task-summary">The final step of the application submission.</p>
</div>
<strong class="ds_tag ds_tag--grey" aria-hidden="true">Cannot start yet</strong>
</li>
</ul>
</li>
</ol>When to use this pattern
Task lists should only be used where a transaction involves multiple tasks and may take a long time to complete.
When using the task list pattern, you should display a task list page:
- at the beginning of the transaction, before any tasks have been completed
- when users return to resume the transaction at a later session
When groups of tasks are used it may also help users to keep track of their progress by displaying the task list page again when the end of a group is reached.
Providing a link back to the task list, throughout the transaction, may also help users navigate between sections.
Let users check their answers as they progress through the tasks and before they are asked to complete the transaction.
If the transaction can be completed over a number of sessions, returning users should continue from the task list.
When not to use this pattern
For simple transactions which follow a linear process, a task list is typically not required.
Where a task list is used and all tasks have been completed, a final confirmation message should be displayed rather than a fully completed task list.
Evidence
This pattern is similar to the complete multiple tasks pattern on GOV.UK and is currently used by Social Security Scotland having gone through several iterations and rounds of user testing.
Research and testing
User testing was performed on this pattern in 2021 covering:
- a comparison of two status options (‘Complete’ and ‘Incomplete’) with four (‘Not started’, ‘Cannot start yet’, ‘In progress’ and ‘Completed’)
- the colour of status labels
- the typography of status labels
Results showed that:
- four status types performed better than two, offering greater flexibility and support for when tasks can be completed in any order
- the use of red for status labels was harder for the users to read and caused anxiety as the colour typically relates to warnings or errors
- some users expected the status to be a clickable element
- sentence case was preferred for status labels
These findings have been incorporated into the latest iteration of the pattern.
Website analytics
To understand user behaviour, clicks on task links can be tracked through the original page path, the click URL and the click text.
Links to tasks within a task list, and the "skip to first incomplete section" link, have data attributes added automatically by the Design System’s ‘tracking’ script.
Accessibility
This pattern uses a link to let users quickly navigate to the first incomplete remaining task and avoid keyboard users having to tab through completed tasks every time they return to the page.
Task titles also include their status as visually hidden text to aid users of assistive technology.
More research is required to establish whether users of screen readers struggle to perceive tasks that cannot be started yet as they are not hyperlinked.
Feedback, help and support
If you need help or support you can e-mail us at designsystem@gov.scot
There is a problem
Thanks for your feedback