All you need to know about creating effective user guides with Helppier.
In this article, we will cover important subjects regarding the features and services we offer. Namely, the process of creating and editing guides, the definition of interactive actions and good practices of use.
Let's get started? 😉
1 - Create welcome guides with no more than 7 steps
The average attention span is now 8 seconds. This means if you want to build effective onboarding messages, you need to be concise.
Walkthroughs/Tutorials are often used to welcome users and provide a platform overview. But keep in mind, that tutorials should have no more than 7 steps if you want better conversion rates.
In fact, ideally, it should have between 3-5 steps.
Use tutorials/walkthroughs to guide users step-by-step through a specific flow on your website and provide an overview of your platform.
Tutorials - Best practices
💡 Tutorials shouldn’t be longer than 7 steps (users have limited attention span) - try to break information into small guides;
💡 If the step description is long, select the Text or Title+Text layout;
💡 Avoid using more than 100 characters on each step;
💡 To record a multipage guide, select a clickable element ( like links or buttons) and choose the action “Click” on the Actions menu;
💡 Always use fail behavior "Redirect user to start page" to ensure your users can follow the guide on the correct URL;
💡 Create automated tutorials that start only on a specific page of your platform. Choose the option "From url pages" in Start Guide.
2 - Create an engaging welcome message using Popups
Popups are one of the most common types of messages out there! It is normally used to welcome users, announce new features or even encourage actions such as subscribing or purchasing a product.
For the first step of your onboarding tutorial, we recommend using the "Pop up" action located in step settings to create a welcome message that appears in the center of the screen.
Use the layout Media + Text to include an image or video, and write a brief description to help users understand your product's value.
3 - Introduce guides automatically to first-time users
A great way to highlight areas of your platform or provide assistance to new users is by introducing tutorials automatically when users enter a specific page (url).
After recording your onboarding guide, you can set it to start automatically using our triggers.
- Access "Edit Guide" and select the "Start Guide" option.
- Choose "Autoplay" and then, "From Url Pages". Make sure the URL specified is correct.
- To preview the guide's trigger, you need to publish the guide & logout of your account.
If you want to provide an effective overview of your platform, create a tutorial in your homepage/startpage and then slowly move users to another page using the action "Click" on a clickable element of your platform.
1 - Place contextual help messages across your platform
Users expect help within 5 minutes when facing a problem online. Which doesn't leave much time for an email or phone call!
Walkthroughs/Tutorials are extremely helpful as they guide users step-by-step towards a goal on your platform. But, in some cases, users prefer reading small tips and continue exploring the platform on their own.
So, to ensure users can easily achieve their goals, you can place contextual help messages (Tooltips) on specific areas such as Forms or complex Features that you may have on your platform.
Use tooltips to provide little hints/descriptions about a specific feature or form field, and highlight specific areas of your platform.
Tooltips - Best practices
💡 You can create several tooltips at once when recording the guide. The process of creating tooltips is similar to creating a tutorial;
💡 Tooltips are enabled when the user clicks on the (?) icon, make sure the description is small and relevant to the user;
💡 It is recommended that you adjust the tooltip's position so that it is slightly apart from the selected element, for easy access by the user.
💡 Make sure the option "From URL Pages" in Start Guide is enabled, and the url of the page is correct. This way, the tooltip only appears to users on that specific page;
💡 For tooltips, we recommend disabling the option "From Guides List" in Start Guide. You can also hide the tooltip on the guides list by accessing Page settings and selecting the option Hidden.
Unlike Tutorials, Tooltips do not have "Actions"
2 - Organize guides into specific categories
One of the biggest issues online users have is finding information. For that reason, it's important that you organize your guides into different categories, just like you would do in traditional FAQs.
By default, when you login to the widget for the first time we add a category called "General". You can edit the name and description so it fits your product.
To add a new category you need to click on the options menu and select "New Category". Add a Name and Save.
A great example of category division would be:
Getting Started -> Feature X -> Feature Y -> Advanced Settings
3 - Share guides' links on your support channels
Instead of sharing help videos through chat or email, share your guide's link to redirect users directly to your platform. This way users can follow steps and interact with your platform at the same time, achieving goals quickly.
1- Your guide needs to be published & available for end users;
2 - Go to your "Published" tab click the "Guide Options" menu
3 - Click on "Shareable Link". The link will be copied to your clipboard so you can share via chat.
When the user clicks on the link he/she will be redirected to your platform and the guide will start playing automatically.
Helppier Patterns (Use Cases)
1 - Quick & Clear
Guides that show a popup message
When to use: To alert users of maintenance that will be done on the servers; To notify users that a specific area of the site is going to be deprecated; To ask users if they are willing to start a survey; To welcome users to your platform; To announce new features;
2 - Show & Tell
Guide that shows where the user needs to go, tells him/her what can be done on that element
When to use: To provide a first overview of your platform; To highlight new features/areas; To provide a small description about a feature or form field; To provide hints on how to better use a specific feature;
3 - Show, tell & interact
Guide that shows where the user needs to go, tell users what to do and allows to interact with a specific element
When to use: To redirect users to the correct area/page of your platform; To demonstrate step-by-step how to use a specific feature; To help users achieve specific tasks; To encourage a specific action on your platform;
From creating to publishing guides
To create, edit and publish a guide you first need to install and log in to the Helppier tool.
Use the credentials provided by our team and make sure to confirm your account in your email.
1 - Creating your first guide
After installing our Chrome Extension or Code Snippet to your platform & Login, you can immediately start creating guides.
1 - Click on "New Guide";
2 - Write a Name to be displayed on your guides list (e.g. How to Edit your Account);
3 - Select a Category & click on "Record"
4 - Click on an element of your website + add content (repeat this until you have all steps of your guide);
5 - Click "Save" your guide will appear on the Draft list.
You can preview how your guide looks on Recording Mode by clicking "Play" on the bottom bar or directly in the Guides List.
2 - Editing guides: you need to enter recording mode
Full Edit Mode
To fully edit your guide (position, layout, re-select elements) you need to enter recording mode.
1 - Select the guide you want from the list and click on "Edit Guide"
2 - Click the "add step" button, at the end of the step list, to enter the record mode.
3- Select the step number that you'd like to edit (red square icon).
This option allows you to delete the step, change the element selected, change the bubble position and access to the step's settings.
Quick Edit Mode
1 - Go to your guide's list, select the guide and click on the edit icon.
2 - Select the step you want to edit, and click "Edit Step" on the menu.
This option allows you to delete the step or change the step's description & content layout.
Title - Large and bold letter option, ideal for typing a few words;
Title + Text - Option with two different text boxes, allows rich text editing (bold, italic, underline, links);
Text - Ideal for descriptions, the ability for more text, allows editing rich text;
Media + Text - Allows to add image or video (url) and description, allows rich text editing;
Media - Only allows adding an image or video (url).
We recommend writing a description with a maximum of 100 characters.
Write brief and short descriptions that are easy for the end-user to understand.
3 - Publishing: Guides are set as drafts by default
After you create a guide (tutorial or tooltip) it will be set as a draft by default, this means that it would be only visible to admin users. To turn the guide available to all users (customers, colleagues) you need to publish it.
To see how the published guides look for the end-user, you need to logout of Helppier's widget.
4 - Always set Fail Behaviours before publishing
This feature is available on each guide and allows you to define the behavior of the widget if the guide cannot start. We recommend that you set a default fail behavior before publishing your guides.
Here's an example:
When we create a guide on an X page and the user is on page Y. If the user goes to
list and try to play this guide, the guide will not be able to start, because it is associated with a different page. To avoid this kind of situation you must:
1 - Go to the correct page of the first step of the guide
2 - Open the Helppier widget
3 - Select the edit icon of the desired guide
4 - Click on the menu Fail Behaviors
5 - Apply the option "Redirect the user to start page " on the Fail Behaviors menu.
6 - Then set the correct URL.
5 - Use "Start Guide" for automated guides
Helppier allows displaying guides that start automatically when the user enters a specific page or clicks/mouseovers a specific element on your platform.
To set an automated guide, you need to click on "Edit" and access the "Start Guide" option.
This feature not only ensures the view of the guides (as it's not dependent on the user's search) but also draws attention to important areas/features on your platform.
There are two types of triggers:
From URL - guides that start when a user enters a specific URL on your platform
💡 If you choose the "From URL" trigger make sure that the specified URL for that guide is correct;
(it's important that the URL changes when navigating different areas of your platform)
💡 You can trigger the same guide for more than one URL. For example, when users access that same page from a search & the url is slightly different;
(Note that the elements of that webpage need to be the same in all URLs, so the guide makes sense)
💡 We recommend disabling the option "Start from guides list" when creating automated guides;
From Element - guides that start when a user clicks or mouseovers a specific element on your website
💡 The visualization of your guide depends on the user's action towards the element. To set guides automatically from the element, you need to define a Mouse event (mouseover or click);
💡 Note that if you have updated your platform and that the element is removed or changed, the guide will not play correctly;
💡 You have two options you can select element manually (via code) or via recording. We recommend recording the element directly on Helppier's widget;
💡 You can, for example, use the Start from Element when you have new features on your platform or a promotional area;
Notes for viewing your guides:
- The guide must be published for the action to take effect;
- You can only see the auto-guide if you leave your Helppier account;
- You need to refresh the page;
6 - Guide's settings: Disable overlay option
Helppier allows configuring some options that you may or may not want to apply to the guides. To access Guide Settings, select a guide from the list, click on "Edit" and select the Settings icon.
Use the bottom bar on the widget to navigate through the settings menu.
- As every platform is programmed and created differently Helppier does not apply the Overlay effect the same way. On the Interaction Settings, we sometimes recommend disabling the overlay option (the background darkens, highlighting only the element of the guide);
- On Page settings, you can define how a tutorial or tooltip appears in the guides' list. You have three options: Hidden (doesn't appear in the guides list), All pages (appears in the guides list, on all pages of your platform) and Specific Page (appears in the guides list, only on a specific url);
To hide the guide from the list you can also disable the "Start from guides list" option at the Start Guide Menu.
- As every platform is programmed and created differently Helppier does not apply responsive the same way. On Device Settings, we sometimes recommend disabling guides on Mobile & Tablet devices.