4.3.7 Task list

In long complex forms and transactions that involve multiple steps and pages, help users understand the list of tasks involved and their progress as they move from one question to the next.

Use clear labels for each step and provide a visual indicator of their progress. Show the order in which the steps should be completed and mark completed tasks.

Components of the task list page

Task list example implementation

How it works

• Group similar tasks together and use clear headings to explain what is involved or is needed to complete the task.

• As users complete each step or task, show a label that describes their progress.

  Use visual and written labels to indicate their progress. Avoid relying solely on visual indicators like progress bars or percentages, as they may pose accessibility challenges. Include a text display of progress as well.

• Maintain a sense of hierarchy: If there is a specific order in which the steps should be completed, make it evident to the users. You can indicate the hierarchy by organising steps in a logical sequence or visually nesting them within each other.

• If the form or transaction is long, provide a save feature that allows users to pause and continue later. When users resume the transaction, display the task list page as the first thing they see.

When to use this pattern

In a complex long form that involves multiple tasks, steps or pages.