Information

You appear to be using an unsupported browser, and it may not be able to display this site properly. You may wish to upgrade your browser.

Task list

Experimental

This is currently experimental because we need more research to validate it.

Help users to complete complicated forms and other activities by providing a list of tasks and showing their current states of completion.

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>
        <div class="ds_task-list__task-status  ds_task-list__task-status--complete" aria-hidden="true">Completed</div>
    </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>
        <div class="ds_task-list__task-status" aria-hidden="true">In progress</div>
    </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>
        <div class="ds_task-list__task-status" aria-hidden="true">Not started</div>
    </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>
        <div class="ds_task-list__task-status" aria-hidden="true">Cannot start yet</div>
    </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>
                <div class="ds_task-list__task-status  ds_task-list__task-status--complete" aria-hidden="true">Completed</div>
            </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>
                <div class="ds_task-list__task-status  ds_task-list__task-status--complete" aria-hidden="true">Completed</div>
            </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>
                <div class="ds_task-list__task-status  ds_task-list__task-status--complete" aria-hidden="true">Completed</div>
            </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>
                <div class="ds_task-list__task-status  ds_task-list__task-status--complete" aria-hidden="true">Completed</div>
            </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>
                <div class="ds_task-list__task-status" aria-hidden="true">In progress</div>
            </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>
                <div class="ds_task-list__task-status" aria-hidden="true">Not started</div>
            </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>
                <div class="ds_task-list__task-status" aria-hidden="true">Not started</div>
            </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>
                <div class="ds_task-list__task-status  ds_task-list__task-status--complete" aria-hidden="true">Completed</div>
            </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>
                <div class="ds_task-list__task-status  ds_task-list__task-status--complete" aria-hidden="true">Completed</div>
            </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>
                <div class="ds_task-list__task-status  ds_task-list__task-status--complete" aria-hidden="true">Completed</div>
            </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>
                <div class="ds_task-list__task-status" aria-hidden="true">Not started</div>
            </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>
                <div class="ds_task-list__task-status" aria-hidden="true">Cannot start yet</div>
            </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>
                <div class="ds_task-list__task-status" aria-hidden="true">Cannot start yet</div>
            </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 GOV.UK task list pattern 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.

Back to top