Why do you need tooltips or launchers anyway?
It’s ideal to design “a perfect user experience” which tests well with new users and is clearly going to be a major improvement to your UI. However, it might not be perfect for everyone.
When you roll out a new version of your application, suddenly users can get lost in this new workflow. It’s not working as they expected. You find out when they start sending support tickets. And those are only the ones who took the time to contact you.
Our customer, Bannersnack, recently relaunched a new UI design. Their development team had researched user needs to improve the UI to help their users create effective ad banners even without graphic design experience. Of course the loyal users did love the new UI because it addressed each one of their concerns in the new design. Yet they needed additional help, and it’s no wonder. What had become automatic actions were now interrupted, meanwhile, new users would have no built-in expectations, and they took to it easily. “Most support requests about the redesign came from existing users,” said Andrew Tiburca, Marketing at Bannersnack. So they decided they wanted to have a tool to explain new features to their users. That is where Inline Manual comes in.
Here are some ideas of how you can add tutorial in potential troublespots in your new redesign.
- At a point where the UI has changed
- Around the location of a new feature
- Draw attention to a new section or tab on your UI
What are tooltips and step launchers?
Launchers sit patiently in your app, inviting curious users to click them.
A tooltip provides additional information and help for users without cluttering up your UI with explanatory text. A step launcher on the other hand can guide users into a step-by-step tour or tutorial to help them get their work done. You can launch a tour from the start, or add a launcher to specific step so the users can skip ahead.
Both tooltips and step launchers contain two parts:
- There is a launcher, for example a small question mark is commonly used.
- There is content.
- Create a Tooltip if you have a pop-over message you want to share.
- Create a Walkthrough and add the launcher to a step.
Next we’ll show you how to create a tooltip.
How to add a tooltip
In this example, we will add a tooltip to highlight changes to this form. We have content editors adding products to this site, and we’ve added a new feature for out of stock products.
The tooltip launcher appears in as (a question mark on the left). The tooltip content appears as a popover to the right.
Add the tooltip
Open the authoring tool and add a new Tooltip.
Configure the tooltip
In the Tooltip panel you can adjust the position of the launcher and the step popover.
- Assign Launcher, I assigned the launcher to appear to the right of the sidebar title.
- Assign Step, I assigned the step to point to the slider which is my new feature.
Set this launcher to always be visible. Next we can set it so it’s only visible on this particular page.
Configure the launcher
In the Launcher panel, set the context path to make sure the launcher only appears on pages at this path: /node/add/* This is a good thing to do with every tooltip or launcher to add. This optimizes the performance.
In this case we had to slightly adjust the positioning, which is set under Offset. If we wanted to, we could change the content here from a question mark (?) to an exclamation mark (!) for example.
Now you can save your Tooltip and you’re ready to go.
Other ways to use tooltips:
Imagine a case where you have many changes in the UI. You can create multiple tips to highlight what is different in the UI.
- In this case, users can click one topic launcher to activate the tooltips.
- And then all the tooltips are active and visible.
- When they dismiss one tooltip, it deactivates all of them.
How to do this
Add several tooltips which are only visible when Active.
If you’re already using tooltips, this is a handy way to group them together and make them easier to manage as well.
Next, add a Launcher
Set this Topic Launcher to always be visible, and make sure to configure the context path, so it appears on the right page and subpages.
Now when users click the launcher, it will activate the rest of the tooltips on the page.
Launchers are really helpful. You can add them to any step, and launch users right into a step-by-step walkthrough. See how to add a Step Launcher for more information.
Responding to a worst-case scenario: Fast
It’s natural to be optimistic, and hope everything is going to go smoothly. Sometimes with redesign launches new bugs are reported, which it seems can only be discovered after you’ve gone live. Murphy’s Law seems to be in effect!
When things don’t go smoothly, many companies put on more support staff, extend their hours and wait for the improvements which can take weeks or months.
The great thing is, you can respond quickly by creating a launcher in a trouble spot in your application. The marketing and support teams can be fully in charge of building tooltips and launchers. They don’t have to wait until a new version of the application is deployed. Inline Manual runs completely independently.
The development team can focus on the important bug fixes and improvements, and meanwhile the users can have a better experience.
If you’re wondering how to get started with Inline Manual, please sign up to our webinar Thursday, 22nd September
Read the other posts in this series on customer retention.