What are Checklists?
Checklists are onboarding contents containing a list of organized guides. 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.
To open a checklist you must click on the launcher icon as shown below. If you prefer, you can set it to open by default by accessing:
Checklists > Settings > Configure > Appearance Settings > Open by Default.
To open a guide in a checklist, just click on its names.
If the end-user reaches a goal, conditioned by a guide s/he follows through, the guide on the checklist gets completed 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.
Important: If you can't see your own checklist there, try disabling any 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, and 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, the only thing you should do now is to click on a guide's name and follow its steps. All guides on our Onboarding Checklist will direct and support you all the way. And, within NO TIME, you will
- Install our Chrome Extension.
- Create your first guide.
- Complete integration with UserGuiding.
- Publish your first guide live!
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 to panel.userguiding.com and download 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: 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: The following checklist is created for our sample platform called Playground UserGuiding.
Creating an Onboarding Checklist
- Click on the Checklists option under the “Content” section in the left-hand menu.
- Then, click on the + New Checklist button.
You will open the page in which checklists and help centers are created. You'll start with the Content tab.
- Give your checklist a distinct name, easy to recognize.
- Continue with the checklist format. (it's the default)
- 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.
4. Define a specific title and, (5) a subtitle for your checklist.
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.
- If you want to change their order, drag them using the arrows icon located on the left side of the Guide's name.
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 completed by a user, it means the guide reached its goal and can win the thick.
To set custom goals for guides, click on Guide is Completed or alternatively on the pencil icon.
- In the opening window, you can switch to Goal Reached to set a new goal to condition the guide.
As you might have noticed, conditioning is the same as in creating segments. If not, to learn about Segmentation Properties and Rules, click here.
- In this example, we'll continue with the default setting.
- Next, access the Configure tab and 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.
- Set the appearance for the Checklist. In this example, when the end-user access the target URL it will show already open (Open by Default option), and when all guides' goals are completed it won't show anymore (Hide as Completed option).
- Important: Your web application must contain our container code to display the checklist. And guides should be in the same container with their checklist.
- Optionally, you may customize your Checklist design by accessing the Customize tab. The launcher image, color, size, custom font, position and much more can be re-designed and previewed on this point.
- Finally, 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.