Checklist items

Checklists are comprised of chains of items that your users can complete or “check off”. They represent steps users should take toward the goal of the Checklist.

Item anatomy

Items consist of a title and an optional description. You can use these to describe what the item is — some items might require a description, so your users understand them, while some things will be self-explanatory and only might require a title.

Additionally, items have a button (CTA) that you can use to perform different actions within your app. It’s possible to control both the text of the button by changing the “Action label” field, and the action that occurs when the button is clicked.

Item CTAs

Checklist items contain a button (CTA) that when clicked performs an action. The action should help the user complete the goal of the item. You can configure the action to do different things depending on the context of what the item is.

Open a page

A simple item action is opening a page. Choose the “Visit page” action, then enter the URL that you want the action to take the user to. Like any link in CommandBar, this action can use a router to avoid reloading the page, or can open in a new tab if you’d prefer. This works especially well for external content.

Execute an action

Checklist items, when clicked, can also execute any action that you have defined in CommandBar.

Play a video

Inserting one or two videos into a Checklist is a nice way to break up any monotony the user may be feeling. You can play any video that you have loaded into CommandBar by selecting it from the dropdown menu.

When the button is clicked, the video will open in HelpHub. The user will be able to reposition it if they would like by dragging.

Show a help article

This approach should be used sparingly in Checklists, because our data shows that users don’t like being told “read this article”. It feels unpersonalized and can sometimes result in the user skimming the article but not retaining much information (compared to more interactive experiences).

That said, there is a time and place for it. For example, the article might contain critical information about how to set up their account.

You can select any article that is synced via a source to include in your Checklist.

👇 Click element

Generally when designing checklists, you want to teach the user how to fish, not tell them how to fish. This means having them perform some task in your product. A good first step toward the task, can be taking the first step for them. Guiding them to the river, as it were.

Sometimes a link is the right task for the job, but sometimes you want to click an element that is already available on the page. For example, to open a dropdown or modal. To achieve this, you can design a CTA that clicks an element currently available on the page when it is clicked.

👉 Trigger nudge

Finally, it’s possible to trigger another nudge from a checklist item. A common use case for this approach is to create a multistep tour nudge that walks users through a task, that is initiated when the Item CTA is clicked.

Additional item options

🎉 Celebrations

You can also check Celebrate to throw some confetti when the user completes an action. Just don’t forget to clean up afterwards 🙂.

⏩ Skippable

You can check Skippable to add a 'Skip' button that allows users to mark the item as done.

Reordering items

To reorder items in a checklist, can you drag them up and down. This is easiest when the items are all collapsed.