Tasklist

Task lists are created to present users with a series of tasks they need to accomplish in order to complete a more intricate process, such as creating a store or profile.

Overview

This component can be used as a to-do list or checklist. It is a simple and effective tool for organizing and managing tasks.

Task lists is a valuable tool to organise a workflow and ensuring that important actions are completed in an efficient manner. They are highly adaptable and can be customized to suit specific project requirements.

Layout

Steps

Each step is made of:

• a status icon

• a title

• a paragraph

• an illustration (optional, will not be displayed on small screens)

• 1 or 2 buttons

Status	Description	Example
To do	Icon is blank Collapsed
Active	Icon is blank Expanded Can have 2 buttons (one Primary and one Secondary)
Done	Icon is ticked + green Can be expanded or collapsed
Disabled	Icon is blank Collapsed

Guidelines

Modes

Tasklist has 2 modes :

• Linear mode. In Linear mode, tasks must be executed in the listed order. This mode is particularly suited for cases where task dependencies exist, with certain tasks relying on the completion of preceding ones.

• Flexible mode. In Flexible mode, tasks can be completed in any order, offering users more freedom in how they choose to complete their tasks, while still ensuring that all of it must be executed.

Number of item

The component does not set a strict limit on the number of tasks, but it is prudent to maintain a reasonable quantity, keeping the user's cognitive load in mind. An excessively long list can be overwhelming, potentially causing users to lose motivation and become disoriented in their actions.

Grouping actions or requests with similar themes into tasks, such as 'Configure your shipping settings' or 'Import your catalog,' aids reduce the number of item and keeping the tasks list digest.

Marking tasks as completed

Some tasks may not be suitable for automatic completion marking. In these cases, users must manually mark them as 'done' using a Secondary Button labeled 'Mark as done.' This feature empowers users to explicitly confirm task completion, enhancing task management and offering clear progress tracking.

Content

Think of the tasklist as a step-by-step guide for our users to complete their tasks.

Step label

Starting with a verb will help drive users to the next action.

• Start with a verb, unless you have to repeat the same verb over and over

• Keep it short and clear

Complete the report

Step description

Consider adding a description to describe the task, to add more details, and to explain its purpose.

• Keep it under one sentence

• Add a hyperlink if necessary

• Remove articles (a/the) if you can

Step title: <2 to 3 words, action verb or not>

Step subtitle: <1 actionable sentence, clear and helpful to specify the task, or describe it >

Key Takeaways

Do

• Choose the right task list mode (flexible or specific)

• Keep the task quantity manageable

• Use concise action titles and consider subtitles for additional information

Don't

• Avoid long, overwhelming task lists.

• Only add non-relevant illustrations to tasks.