Task List UX: Help People Finish Long, Multi-Step Workflows
Long workflows can span several screens, sessions, and people. A single progress bar may say that someone is “60% complete” without showing which tasks remain, whether they can be done in a different order, or what information they need to return later.
Autosave UX: Protect Work Without Surprising Users
A task list gives users a map of the work ahead. It is most useful when the workflow contains distinct activities that people may complete over time, rather than a short sequence of fields on one screen.
Choose a task list for the shape of the work
Use a task list when users need to see several separate tasks, track their status, and return to incomplete work. A simple step indicator is often better for a short, linear process where each screen leads directly to the next.
Before designing the list, identify whether tasks are independent or have dependencies. Let users choose the order when that is safe. If an item cannot begin until another is complete, explain the prerequisite rather than presenting a disabled link without context.
Show meaningful status, not just color
Give each task a concise, text-based status such as “Not started,” “In progress,” “Completed,” or “Cannot start yet.” Visual badges and icons can support the status, but should not be the only way it is communicated.
Make the task name a clear action: “Add company details” is more helpful than “Section 2.” Add a short hint when a task requires specific evidence or information. Keep the status associated with its task so screen-reader users can understand whether the item is ready or finished.
GOV.UK's task-list pattern uses task names and text status to help users identify what is done and what remains. Its guidance also recommends allowing tasks in any order when the service permits that.
Preserve progress between visits
If people can leave and return, explain what is saved and when. Confirm a successful save, make unsaved changes visible, and tell users how to resume the workflow. Do not show a task as completed merely because the user opened it; completion should reflect the product's real rule.
For a task that needs review or approval, use a distinct state such as “Submitted” or “Waiting for approval.” “Completed” can mislead when the user's work is done but the service still has a decision to make.
Make dependencies and totals accurate
If the page displays an overall count, define what counts toward it. A useful summary might say “3 of 5 tasks complete,” but only if all five tasks are required and the statuses are up to date. Optional tasks should be labeled as optional, not silently included in a completion percentage.
When tasks are added or removed based on earlier answers, update the list and explain why it changed. Keep the user's completed work intact if a new condition reveals another required step.
Provide a clear finish and next step
When all required tasks are ready, state what action completes the workflow. If submission is final, let users review important information first. After submission, confirm the outcome, explain expected timing, and provide a way to return to the task summary or reference the request.
For progress through work that takes time rather than user-completed steps, see the Interaction to Next Paint and responsiveness guide and the UX writing guide.