You don't want to ruin the trust you've built by badgering users with feature announcements. But if you don't tell the right users about new app elements or design changes, you miss your chance to engage them and increase feature adoption.
So how do you strike the right balance? How can you help users discover and adopt new features without frustrating them in the process?
The humble tooltip can be an invaluable... well, tool... for drawing user attention to a new or hidden feature at the relevant time in their journey or workflow. Tooltips are especially useful for pointing out easy-to-miss changes, delivering value quickly, and then getting out of the way. Part of what makes tooltips so helpful is that they are contextual and specific—they appear within the product itself and are attached to individual features, allowing you to coach users through the feature discovery process.
6 ways to use tooltips for feature adoption
We've spent countless hours examining hundreds of products—from B2B SaaS tools to B2C apps. Here are 6 great examples of tooltips used for feature adoption that stood out. By the time you're done reading, you'll understand how you can use tooltips for announcing new product features more effectively in your own app.
Let's get started!
1. Slack's Quick Switcher search
Slack's ubiquitous team chat tool can be a mixed blessing. Messages often get tangled, channels can become congested, and important information can quickly become buried.
The built-in search tool (or, as Slack calls it, the Quick Switcher) is often the fastest way to get around the app and untangle the mess of messages. Slack makes users aware of the search feature through a tooltip that demonstrates the search functionality. However, instead of explaining the functionality (searching messages), the tooltip explains how the search feature benefits the user (getting around Slack faster).
The tooltip also offers a keyboard shortcut to make navigation even faster for developers and other Slack users who might prefer the keyboard.
2. Google Analytics' custom reports
Tooltips are particularly effective for complex tools like Google Analytics. The user interface is quite busy to begin with, with many features hidden behind small icons. Tooltips help highlight subtle changes to the UI that would otherwise be ignored, helping to spur feature adoption without cluttering up the interface.
Check out how Google Analytics guides users toward creating customized reports:
Instead of automatically taking users to the custom reports feature, Google uses tooltips to guide users through each click, building familiarity with the interface and making it easier for users to find their way back on future visits.
3. Facebook's album settings
Tooltips are often best used when pointing out easy-to-miss changes. Like Google Analytics, Facebook has hidden much of their interface behind buttons and icons that might not be obvious to many users.
Here's how Facebook first introduced the ability to download photo albums:
On top of highlighting the functionality itself, Facebook's tooltip is notable because it helps users discover general design conventions found throughout the site or app. The tooltip above not only helps users discover how to download their album but also teaches them that the gear icon is how they access settings throughout the site. It's a clever way of building familiarity and consistency.
(But of course, Facebook just announced that they're rolling out a whole new lewk. No word yet on whether tooltips will be part of the feature discovery process this time around, but it looks like they've kept the gear icon in play!)
4. Airbnb's instant booking
Airbnb is another great example of using tooltips to highlight design conventions. After rolling out their Instant Book feature, the Airbnb design team needed a consistent and easy-to-spot identifier for properties that allowed users to book instantly.
They chose a yellow lightning-bolt symbol, repeated in various places on the site, to signify Instant Book properties. The team also used a subtle tooltip to draw attention to the symbol and educate users on what it means:
The other interesting thing about Airbnb's tooltip example is how simple it is. The white box contains concise copy and no clear call-to-action. Yet it perfectly achieves its goal of educating users about the Instant Book feature. The lesson here is that less really is more when it comes to using tooltips to announce new features.
5. Github's contextual feature announcements
Github uses tooltips to highlight new features, provide links to related support articles, and give helpful tips so users can get more value from the platform. Their tooltips are specific, contextual, and timely, appearing when a user is most likely to interact with a new feature.
For users who just want to understand the basics, the tooltip itself provides ample information. For those who prefer more detail, it's easy to find the blog post or support doc related to the feature being announced.
6. HubSpot's efficient conversations
Marketing platform HubSpot has constantly evolved since launching way back in 2005, with regular tweaks, updates, and new features. HubSpot often uses tooltips to ensure that users discover and adopt each new feature to get the most out of the tool's capabilities.
HubSpot's tooltips make great use of contrast—the purple background stands out against the mostly white interface, and the CTA buttons' colors are consistent across both tooltips and app. And the headline and body copy in this tooltip clearly outline the benefits of the new feature (make your conversations more efficient at scale). This is well done—you should always focus your product tours and in-app messages around user goals, not features themselves.
Almost all of the tooltips shown above are standalone, singular tooltips—they aren't part of a multi-tooltip product tour. This is ideal. Users won’t give your app more attention than is necessary, so when using tooltips to announce new features, less is more.
Tooltips using dark or contrasting colors stand out against a white or gray background. Don’t be afraid of a tooltip that will catch your users’ attention. That’s the point. You can also capture people's attention with the word “you” or “your.”
Keep your tooltip design consistent. Train users to see and act upon your tooltips by giving them a coherent look or behavior pattern, and keep design patterns consistent across your tooltips and your app.
UX copy should be succinct. Write a direct headline containing essential information for busy users who might skim read, and ensure body copy focuses on the benefits instead of the functionality itself.
Make sure you trigger tooltips in context, like when a user clicks on a feature or accesses a specific page. Triggering tooltips at a relevant moment ensures that users are more likely to read the tooltip and engage with the new feature.
Give users the option to read more about each feature by linking out to additional content. You can also deep link directly to the new feature from within each tooltip.