Task list page
This is the starting point for a citizen to begin your form from within your service or from Alberta.ca.
Task list page
View in FigmaApply for a service
1. Before you start
| Reads terms of use |
2. Prepare application
| Your contact details | |
| Your family | |
| Verify your identity |
3. Schedule service
You need to complete the previous section before you can start this task.
| Receive email confirmation | |
| Pay service fee |
p.small {
margin-left: var(--goa-space-xl);
margin-top: var(--goa-space-2xs);
font-size: var(--goa-typography-body-s);
color: var(--goa-color-text-secondary);
}
div.warning {
width: 22rem;
}<h2>
Apply for a service
</h2>
<div className="warning">
<GoACallout type="important" size="medium" heading="Application incomplete" mb="2xl" mt="xl">
You have completed 1 of 3 sections.
</GoACallout>
</div>
<h3>
1. Before you start
</h3>
<GoATable width="100%" mb="2xl" mt="l">
<tbody>
<tr>
<td>
<a href="#">
Reads terms of use
</a>
</td>
<td className="goa-table-number-column">
<GoABadge type="success" content="Completed" ariaLabel="completed"></GoABadge>
</td>
</tr>
</tbody>
</GoATable>
<h3>
2. Prepare application
</h3>
<GoATable width="100%" mb="2xl" mt="l">
<tbody>
<tr>
<td>
<a href="#">
Your contact details
</a>
</td>
<td className="goa-table-number-column">
<GoABadge type="information" content="Not started" ariaLabel="not started"></GoABadge>
</td>
</tr>
<tr>
<td>
<a href="#">
Your family
</a>
</td>
<td className="goa-table-number-column">
<GoABadge type="information" content="Not started" ariaLabel="not started"></GoABadge>
</td>
</tr>
<tr>
<td>
<a href="#">
Verify your identity
</a>
</td>
<td className="goa-table-number-column">
<GoABadge type="information" content="Not started" ariaLabel="not started"></GoABadge>
</td>
</tr>
</tbody>
</GoATable>
<h3>
3. Schedule service
</h3>
<p className="small">
You need to complete the previous section before you can start this task.
</p>
<GoATable width="100%" mt="l" mb="3xl">
<tbody>
<tr>
<td>
Receive email confirmation
</td>
<td className="goa-table-number-column">
<GoABadge type="light" content="Cannot start yet" ariaLabel="cannot start yet"></GoABadge>
</td>
</tr>
<tr>
<td>
Pay service fee
</td>
<td className="goa-table-number-column">
<GoABadge type="light" content="Cannot start yet" ariaLabel="cannot start yet"></GoABadge>
</td>
</tr>
</tbody>
</GoATable>Overview
When to use a task list page
Use a task list page to provide a structure for multiple steps in a service. Show a task list page when a citizen begins a service, and when they return to the service.
When using a task list, group related actions into tasks and show the status of the tasks.
How to define a task
The size and complexity of a task is determined by the service and content. A task can be defined as small as a single action, such as: “sign a document”, or “upload a file”, or can be as big as an entire section of a form with multiple question pages and a review page.
Use tasks to break down the steps in a service in an understandable way.
Show status of tasks
Make it clear which tasks a user has completed and which they still need to complete.
Suggested statuses
Completed (success), In progress (dark grey), Not started (information), Cannot start yet (light grey)
Include a summary above the task list to say how many tasks have been completed. This also makes it clearer to the user that there are still tasks left to complete.
How is a task list different than a stepper?
Stepper:
- a visual navigation within a form
- shown at the top of every page in a form
- scope: sections of a form
Task list:
- can be used to outline more than just sections of a form
- not shown on every page
Completing tasks in order
When possible, allow users to complete tasks in any order. This will help them plan their time and complete sections as and when they can.
Anatomy
- Page tile: heading-large
- Status of completed sections: goa-callout
- Section: task-list-section
- Section heading: heading-medium
- Task: goa-table
Book time in drop in hours