Components

Discover the key components for designing Checklists in Jimo. Customize headers, tasks, and dismiss options to create engaging, on-screen guides for your users.

Quick access

Components for Building Checklists

Components for Building Checklists

Checklists, like banners, come with predefined steps. You can’t add or remove steps but you can fully customize their content. In this case, there are two main steps: the Checklist itself and the Completion Step.

Checklist step

In this section, you’ll learn how to configure the Checklist Step, which is the first part of your checklist experience. It contains key components like the header, task list, dismiss button, and trigger. You can customize the design, behavior, and layout of the checklist to fit your needs.

A: This area lets you access the general parameters of the checklist, it holds below subsections to manage checklist components (header, tasks, etc.).
B: Here, you can modify the checklist’s behavioral settings (like enabling or disabling the dismiss button).
C: Use this section to control the positioning and size of the checklist on the screen.
D: This area allows you to customize the checklist’s general design options, including background color, borders, shadow effects, and more.

Header

In the Header section, you can customize the main design elements of your checklist. Start by selecting the main color and optional border for the header background.

The Header allows you to add up to three types of elements:

Title: The main heading for the checklist, which you can edit to fit your needs.
Paragraph: Additional descriptive text to provide context or instructions.
Progress Bar: A visual indicator to show the user's progress through the checklist.

For the Title and Paragraph, you have similar customization options, including font style, size, weight, and color, ensuring consistency across the checklist.

The Progress Bar comes in two styles:

Plain Bar: A simple bar that fills as tasks are completed.

Step-by-Step Bar: A segmented progress indicator, showing the number of completed tasks compared to the total.

Task List

In the Task List section, you can fully manage your checklist's tasks. This includes:

Adding new tasks to the list.
Renaming tasks to reflect specific actions or steps.
Reordering tasks by dragging and dropping them to fit the desired sequence.
Removing tasks if they are no longer necessary.

Each task can contain additional content, such as a paragraph or CTAs (Call-to-Action buttons).

Additionally, you can customize the behavior for how users interact with tasks:

Hover: The task's content (such as paragraphs or CTAs) will appear when the user hovers over the task.
Click: The task's content will appear only when the user clicks on the task.

This flexibility allows you to decide how tasks are revealed to users, depending on the flow of your checklist and the level of interaction required.

Tasks

Each task can have specific behavior configurations, such as triggering actions and task completion conditions, which are detailed in the behaviors.

When you create a task, it initially contains a checkmark, a heading, and a primary CTA. However, apart from the checkmark and heading, you can remove or add additional elements like paragraphs, media, or secondary CTAs.

Checkmark:

The checklist's defining element, allowing users to visually mark tasks as completed. You can customize its appearance, including setting custom icons.

Primary CTA:

Typically linked to the task's main action, this button inherits the task's behavior but can also trigger custom actions if configured.

Secondary CTA:

By default, this button allows users to skip the task and mark it as completed. It can also be customized to trigger different actions.

Other Elements:

Additional elements like media (image/video), paragraphs, and headings can be included in tasks to make them more interactive and informative. It uses the same generic editing settings as modals.

Dismiss Button

This option allows users to close or dismiss the checklist at any time, providing more control over their experience.

The Dismiss button is not included by default in a checklist. Once enabled, you can edit the text and the layout, including the font, size, weight, and color of the "Dismiss Checklist" button.

To add it, you have two options:

Add via the Navigator: Manually add the "Dismiss" element to your checklist from the components menu in the Navigator.

Enable Dismissible option: Switch the Dismissible option to "Yes" in the Checklist Behavior settings.

If no dismiss button is present, the only way to remove the checklist is by completing all the tasks. However, enabling the dismiss option gives users the ability to close the checklist at any time.

Keep in mind that checklists are non-recurring, so if the dismiss button is clicked, it might become impossible to reopen or complete the checklist, depending on your targeting and audience settings. Consider this carefully when designing your checklist experience.

Trigger

The Trigger section allows you to configure how and where the checklist appears on the screen. Although the general position options (such as placement and width) remain the same as for the full checklist, this section also provides the ability to preview the collapsed version of the checklist.

Completion step

The completion step is the final stage of the checklist journey. Once users have completed each task in the task list, they are presented with this step as a way to confirm their progress and close out the checklist experience. The completion step operates similarly to a modal or tour step and provides an opportunity to deliver a final message or call-to-action to the user.

How to Reach the Completion Step

Users will arrive at the completion step after completing all tasks within the checklist.

This step serves as a confirmation to the user that all tasks have been successfully completed and provides a space to offer a final call-to-action or concluding message.

Customize step elements

You have several options for adding content to the completion step, making it a rich final interaction point:

Text Elements:
- Heading: Use this to display a congratulatory title, such as "Congrats! 🎉 You’ve completed the checklist."
- Paragraph: Add extra details, like what the next step is for the user or a thank you message.
Media Assets:
- Image/Video: Insert an image or video to enhance the message, such as a celebratory image or instructional video for the next step.
- Profile: Include a user avatar, personalizing the completion message with a team member’s profile or company branding.
Interaction Elements:
- Primary Button (CTA): This could be labeled "Close," "Next," or any action relevant to the end of the checklist journey. By default, this button completes the checklist process.
- Cross (Dismiss Button): This allows users to manually dismiss the completion modal.

Position and Behavior Settings

Position:
- Control where the completion step appears on the screen, with options to display it in the center, at the top, or bottom, among other placements.
Dismissal Behavior:
- By Clicking the Cross: You can add a dismiss button (cross) for users who want to close the checklist manually.
- Automatic Dismissal: Set conditions for automatic dismissal, such as after the user clicks the primary CTA or completes all tasks.

Styling Options

Customize the appearance of the completion step to match your brand or desired aesthetic:

General Styling:
- Adjust the shadow, radius, and border to modify the overall look of the completion step.
- Customize the background color and text color for clarity and brand consistency.
Width and Radius:
- Define the width of the completion step and apply rounded corners with the border radius option.