Tooltips are like mini digital compasses: informative UI patterns that seamlessly guide users through their experience.
Relevant tooltips gently educate users as they navigate a product. When well-designed, they can improve UX, encouraging usage, engagement, and adoption rates.
As a concept, tooltips are simple to understand. But there's one essential principle to follow: they must be deployed strategically, or they could frustrate and annoy users instead of assisting them.
Users want immediate results with minimal friction. Few are likely to re-engage with a product after a poor, invasive experience. This post will teach you how to leverage relevant, short, and commanding tooltips to delight your users and improve their overall experience.
What is a tooltip?
Tooltips provide users with additional information that paves the way for their success. A tooltip is a brief message that appears when a user interacts with a specific app or website element. They're triggered when a user clicks on an icon or another active element or hovers over an on-page item.
A good tooltip is subtle, provides the user with valuable information, and then gets out of the way. After all, encouraging users to explore your product requires a delicate balance. You want to build trust with your customers through varied engagement strategies but avoid annoying them by getting in touch too frequently.
Why should you use tooltips?
Tooltips are a small but powerful UI pattern designed to give users instant value by providing additional information or 'helpful hints' at the optimal time in their user journey. Tooltips are invaluable because they're hyper-specific and contextual. They're most frequently attached to an individual element within a product and convey one targeted message.
One common use case of tooltips is new feature announcements because tooltips are perfect for drawing users' attention to product updates without interrupting their user journey. They're also great at helping new users navigate through an onboarding flow. We'll go into more detail and talk about more use cases soon!
Tooltips vs. Pop-up tips
Tooltips and popup tips share common qualities, but the terms should not be used interchangeably. They trigger in different ways for different purposes.
For example, a tooltip appears contextually when the user needs it. The experience feels less intrusive and ultimately more valuable.
On the other hand, popup tips may trigger randomly, with a bigger textbox that typically interferes with the user experience.
What are tooltips used for?
Tooltips are used for various purposes, including:
Providing contextual help
If a user seems confused, tooltips can help them understand a specific feature, increasing their chance of reaching an aha moment.
For example, if the product is a website builder, strategically-deployed tooltips could guide them through adding their logo and custom branding assets.
You can also use tooltips to point users to product resources without unnecessarily contacting support.
Driving feature discovery and adoption
Once users make using a product a habit, they'll likely become feature blind. Feature blindness is rooted in the brain's instinctual ability to filter unnecessary stimuli and information. This phenomenon leads them to focus on what they already know about a product and ignore everything else, making feature adoption more challenging.
Tooltips are hugely helpful to combat this. They can highlight key features that users could be more actively engaging with, teach them how to use them, and effectively show them the value of a product.
For example, one might use project management software to share a task list with a co-collaborator. Tooltips will remind them of other features (like mind mapping and Kanban boards) they can use.
Announcing product changes and updates
Tooltips are also excellent for announcing new features and product updates.
Since tooltips are less distracting than a large popup or modal, they can easily direct the users' attention to brand-new functionality and encourage them to engage with it.
Tooltips are better suited for more minor updates or features, as they can introduce them gradually. A modal may be a more appropriate option for major feature announcements with lots of details.
Onboarding processes for new users
When users log into a product for the first time, they're often given onboarding tours to walk them through how the product works.
These tours are sequences of tooltips displaying each part of the feature, showcasing what each element does and its subtleties.
During interactive tours, however, tooltips only appear after the user engages with the previous tip, making it more impactful than a generic product tour. Check out the example below.
Driving upsells
Well-timed and placed tooltips allow you to upsell product upgrades without appearing too salesy. The best way to upsell advanced subscriptions and features is to use contextually based user actions. You can strategically tease features only available for upgraded accounts and tell users they can use them if they select a higher plan.
For example, say you have a photo editing software. You may implement a tooltip to trigger when users try to export files as PDFs, stating that it's a premium feature you can only access by becoming a paying customer.
How to create effective and relevant tooltips
Tooltips should only appear when relevant or when users need help. Otherwise, they're not prepared for them and will dismiss them as obstacles to what they're trying to do.
Let's look at an example of an initial user onboarding process. Slack uses contextual tooltips as the user navigates the app to offer advice at the right time:
Tooltips can remind users of hidden features users might not know about, like in this example from Spotify:
Tooltips can also provide answers to questions the user might have, as shown in this Shyp example:
Grammarly power users are invited to try out a new feature in beta in this example:
Anything that prevents a user from achieving their goal within a product is an obstacle, so triggering prompts when the user is ready for them is essential.
If you're unsure when to deploy tooltips, try soliciting users to participate in live feedback sessions. Note: where users tend to get stuck, where they have questions, and what suggestions they have to improve their user journey.
User experiences are challenging to design, build, and test, but tooltips allow you to illustrate relevant and contextual information that users only need to see once. Make them count!
Best practices for designing tooltips
The goal is to design a tooltip noticeable enough to be helpful but low-key enough not to be intrusive.
When you start conceptualizing, consider all the possible elements of a tooltip:
Messaging
Keep the messaging short, simple, and action-oriented. Consider starting with the imperative (for example: Try the new Presenter view). Tooltips can consist of a header and body text or only body text. Bolded headers may indicate that the message is a feature announcement. For smaller tooltips or onboarding flows, it's best to go straight to the body text.
Exit(s)
Plan how your users will close out the tooltip message. Straightforward options include a simple "x" or "close" button." Messages can also be closed if the user clicks anywhere else on the screen.
Design
Plan and design a custom theme to implement tooltips according to your brand specifications quickly. Choose a background color to help the tooltip stand out against the page. Only place an overlay on your website if a tooltip relays critical information to your user. Otherwise, the darkened background can make a simple tooltip feel intrusive.
Analyze performance and adjust accordingly
To ensure your tooltips are living up to their job description, it's essential to analyze the performance of your tooltips and make tweaks.
For example, if most users are closing a tooltip immediately, it's a good idea to reevaluate if it is needed or could be redesigned to be more helpful. Measure your performance and refine your design and messages as necessary. You can quickly check your performance through the Analytics dashboard by deploying tooltips with platforms like Lou.
Let's wrap up with some lightning-round tips
Avoid redundancy. A tooltip may be unnecessary in some situations.
Only explain things that must be immediately discernible from the UI or design.
Be aware of where you place tooltips and keep all critical parts of the page intact.
Users lose interest quickly and only want information they can act on, so only show one tooltip at a time and at most four in a row.
Don't only rely solely on tooltips. Make them part of a larger in-app messaging strategy that provides value.
Analyze and test!
You can engage and delight your users (without annoying them) with tooltips. Follow these strategies, and you'll be well on your way to engaging and retaining users.
To build code-free, beautifully designed tooltips, create a free Lou account.
Published on May 5th, 2021
SHARE THIS POST
