Tour guidelines
This page documents best practices for tour design including content, length and use cases.
When to use tours
Use tours when you want users to learn about specific UI elements and how interacting with them will help them achieve a goal. When you want to help users perform an action but don't want to provide step by step guidance, you can use empty states instead as seen in EuiEmptyPrompt.
For certain users, product tours can feel intrusive so first assess the fit for your use case and users. The goal is for the product tour to be a tool that helps the user learn new things and accomplish their goals. Three good scenarios for using a product tour are:
- New users seeing an interface for the first time.
- Novice users trying to gain proficiency in your application.
- Existing users need to be onboarded when new features or redesigns are released.
Additionally, consider asking users if they're interested in checking out your product tour instead of just showing it to them.
Provide concise yet valuable information
If you include information that is too obvious or basic, it is more likely that the user will dismiss the product tour and start perceiving them as low value. If further explanation is needed, consider linking out to documentation.
Do: Keep the content of each step short while making sure to provide useful information.
Don't: Use lengthy text that contains a lot of detail. Instead you can add a link for users to learn more.
Explain why the actions you want users to perform are useful
If users see value in an action they'll be more likely to engage.
Keep the tone conversational and friendly
Good copy is a key element for a product tour's success. Make sure you work alongside a writer in this process.
Allow users to end and restart the tour at any time
You can include a “Skip tour” button in your step's footer. Users might be quick to dismiss a tour but realize they need to use it later on. Give them the option to re-trigger the tour at any time. A good spot for a tour's trigger is the application's help menu.
Keep your tours short
The more steps, the less likely it is that a user will complete a tour. If you need to decide which steps to drop, think of the ones the user is more likely to be able to figure out on their own.
Be careful when using action-driven tours
Tours where one step cannot be completed until the previous step has been completed can lead to the user feeling trapped. A nice detail when using this type of tours is to automatically take the user to the next step upon completion of the current step, instead of having to click on Next.
Consider using animation gifs
A short, nicely crafted animation can be very effective for teaching a user about a feature.
