Goals, of the non-soccer variety. In this playbook, we’ll cover how to set them for your product tours—as well as the best UI patterns for serving them up.
What you’ll learn:
How to outline clear goals for your product tours.
How the three most popular UI patterns for various steps of the product tour work.
Why benefit-focused design and copy just works.
What you’ll need:
Clear objectives for your product tour that align with user goals.
An understanding of your users' needs, goals, and context for using your product.
A map of your user journey.
Suggested playbooks to check out before starting this one:
Ask what the user is trying to accomplish and what they should be able to do after completing the tour.
Pro tip: each product tour should focus on only one goal or task.
We’re a firm believer that learning by doing is the best way to onboard users. The best product tours consist of a hands-on learning experience that guides users through a series of steps to achieve a goal.
Step 3: List the 3–5 things users need to do.
Respect users' time by keeping your tour brief. Avoid unnecessary steps that could add friction to the onboarding process.
Aim for a tour with 3–5 steps. If more steps are needed, consider breaking it down into multiple product tours.
You can present multiple tours through an onboarding checklist, as done by Bynder Orbit, a cloud-based organizational app.
Step 4: Select the UI pattern for each step in the product tour.
Choose a UI pattern that matches user needs and app requirements. The 3 most popular patterns are modal windows, tooltips, and hotspots.
Modal windows can pop up over your UI or take over the entire screen.
We suggest using modals at the start and end of the tour to provide context and more resources.
Brightcove, a leading video hosting platform, starts their product tour with a welcome video through a modal window.
Tooltips point out specific features within the product.
They're most commonly used in product tours to guide users toward accomplishing their goals.
For example, HubSpot uses a tooltip to introduce social post-scheduling.
Hotspots are small dots and icons that highlight a specific feature.
They're excellent for encouraging user exploration with gentle nudges in the right direction.
For example, Grammarly’s learn-by-doing demo document does that nicely by introducing new users to the editing tool features.
Step 5: Focus your copy and design on the benefits.
Explain why each action or feature matters to the user. Don't merely point to key features—explain their relevance.
Pay attention to your communication with users during the tour. Use clear, concise copy and integrate UX power words wherever possible.
Tip:As part of your design and copy, each step should have a progress indicator letting users know how many more steps are left in the tour. For example, Canva’s four-step product tour has the progress indicator in the upper left corner of the tooltip.