What are Checklists?
Checklists are onboarding contents containing a list of guides organizedly. They are placed on web applications’ dashboards to assist and support end-users.
They have been designed to ensure consistency and completeness in end-user experiences that you build with guides. And, guides in a checklist can be triggered, if you click onto their names.
They have a launcher, opened when it clicked on, and the guides they contain are displayed by name and triggered if we click onto their names.
If the end-user reaches a goal, conditioned by a guide s/he follows through, the guide on the checklist gets checked and wins a thick.
Let's continue talking over them through an example which is very familiar to you😉
What do checklists look like?
Below, you can see UserGuiding's Onboarding Checklist residing in panel.userguiding.com. Each guide it has corresponds to a single stage of the onboarding process by making an experience gradual.
Important: If you can't see your own checklist there, try closing any active Ad Blocker.
The title of this Checklist is Welcome on board! And, its function is to provide a gliding onboarding experience for our new users who've just arrived in our dashboard.
It covers a journey starting from signing up to UserGuiding and leading people to publish their first live guide!
Each guide corresponds to a single stage of the onboarding process, making this experience gradual.
When a stage is completed. Then, the corresponding guide wins the thick, the progress bar fills up some more.
How do end-users operate Checklists?
Go ahead and find the Checklist Launcher Icon on the bottom left corner of the panel.userguiding.com. and open it. After this point:
Only thing you should do is to click on the guides' names and follow their steps.
These guides will direct and support you all the way. And, within NO TIME, you will
- Install Chrome Extension,
- Create your first guide,
- Complete integration with UserGuiding,
- Publish your first Live Guide!
With each completed guide, you will see that your progress on the bar is increasing and, gradually, you get close to being a successful UserGuiding user by finishing this journey we structured for you.
How to utilize Checklists in your web app?
You can create your own checklists, place them on your web application's dashboard, and keep an eye on end-user progress upon the checklists.
Checklists can have different functions but they do unify in purpose: Creating a Successful User Experience🙌
With checklists, you can gain the following outcomes and many more:
- Onboarding end-users self-sufficiently
- Nourish Platform Engagement
- Increase Overall Product and New Feature Adoption
Guides' that you put inside a checklist can be unlocked in order to reduce user errors. By enabling this feature, you can better organize guides and avert any confusion that end users might experience on your platform.
How to Create Checklists?
Before starting to create checklists, make sure you've done the followings:
- Login panel.userguiding.com and downloaded the Chrome Extension of UserGuiding.
- Create the guides which you want to display inside a checklist.
- Be sure to set the same container for guides and the checklist.
- Guides' triggering methods are set to the custom trigger and their status' are active.
Important: Triggering a guide from a checklist is one of the custom trigger methods for your guides.
Important: If the guide you placed inside a checklist is not active, it won't be visible in the live version of the checklist until you activate the guide too.
Note: Following checklist is created for our sample platform called "Playground UserGuiding".
Creating an Onboarding Checklist:
- Find the Checklists under the “Content” section in the left-hand menu.
- Click on and arrive in the checklist page.
- Then, click + New Checklist button.
You will open the page in which checklists and help centers are created.
- Give your checklist a distinct name, easy to recognize.
- Keep its status inactive until you finish creating it.
- Continue with the checklist format. (it's the default)
- If you want checklist guides to be utilized respectively, unlock checklist items in order.
- The search function can be on or off.
If it’s on, you will be able to edit the writing on the search bar placeholder and no matching results message.
6. Define a specific title and, (7) a subtitle for your checklist.
- Select a container code for the checklist.
Important: Your web application must contain this code to display the checklist. And guides should be in the same container with their checklist.
We select the playground container for this tutorial since it is the dashboard we want this checklist to be visible.
- Next, we’ll decide on which guides will go inside the checklist.
- Open the dropdown containing the guides.
- Add guides into the checklist by clicking on their name. Check the preview and see when guides are added.
- Continue by adding the rest of the guides you want to add.
- If you want to change their order, just drag them by the names and drop them.
Since this is a checklist, there must be a condition for guides to be considered completed and got checked. By default, if a guide is seen by a user, it means the guide reached its goal and can win the thick.
- To set custom goals for guides, click on Guide Seen.
- In the opening window, you can switch to the Goal Reached to set a new goal to condition the guide.
As you might have noticed, conditioning is exactly the same as in creating segments. If not, to learn about Segmentation Properties and Rules, click here.
- In this example, we continue with the default setting.
- Next, define a targeting page for the checklist to decide on which pages you want it to be visible. Here, it's set to all the pages the playground dashboard has.
- Then choose the user segment who can see the checklist. This one is visible for all users.
- You can start designing the appearance of your checklist starting from the primary and secondary color settings.
- Then, set a custom font for its content. To learn how to set a custom font, check this article out.
We position a checklist on the page through its launcher.
- Lastly, the launcher image, color, size, and position all can be re-designed and previewed on this point. To learn how to use the proper image settings for your Checklist Launcher, check this article out.
- You can check the final look of your checklist.
Important: If you want to turn it to a Help Center, come back to the top of the page. Change its format and titles from a checklist to Help Center.
- Activate the checklist status, save it, and publish it on your platform.
- Go to your web app where you target the checklist and refresh the page. You'll find your live checklist there.
- Trigger its first guide and complete it.
- Notice how the checklist progress bar is filled up.