When we recently talked about tips for decluttering your website, we were mostly just focused on hiding away secondary pieces of content that were still worthy of inclusion on the site, but that didn’t quite deserve a spot front and center.
Because your visitors’ experience always needs to be top-of-mind when developing a website, it’s really important for you to know how to strategically tuck certain pieces of information out of sight until the right moment.
That’s why we’re going to talk about tooltips today.
Why Your WordPress Website May Need Tooltips
Websites will vary from client to client, but there is one thing that always remains the same: you can accomplish a whole lot more with less. That’s why we often talk about decluttering, minimalism, and lightweight themes.
One of the less common tools we’ve seen people use to achieve this is the tooltip.
What is a Tooltip?
About 20 years ago, Microsoft introduced us to the original “tool tip”. Whenever a user hovered their cursor over an item in the application’s toolbar, a small message popped out to provide a hint or description on what that particular tool did. Microsoft’s programs have evolved quite a bit since then, so they’ve now got tooltip functionality built into all interactive or clickable parts of the interface (like in the example above).
Word processing programs aren’t the only ones who use tooltips anymore. They’re now also used within websites, too.
Let’s take a look at some examples.
The Classic Tooltip
If you’re not already using tooltips, you’ve at least seen them in action before.
Let’s use the example above from LinkedIn. As I was scrolling through my news feed today, I saw this sponsored post from Optimizely show up. When I hovered over the “Sponsored” text, I received that tooltip message. Then when I moved my cursor away it disappeared.
This is how a classic tooltip works, though there are other trigger effects possible. The hover is probably the least disruptive way to include a tooltip on your site, but you can also require that users do a little more work before seeing tooltips by adding in click, drag, or automatic pop-open functionality.
The Popover Tooltip
Technically, the example from Facebook above is a popover tooltip. The functionality is similar to a standard tooltip wherein you hover your mouse over hyperlinked text, a clickable box, or an image, and then a temporary message pops up while you hover.
The difference between a tooltip and a popover though is in the amount of detail included within the “tip.” Tooltips are exactly what the name says they are: they provide tips on how to use a given element (and they’re usually very brief). Popovers, however, tend to be used for providing an expanded description. These can be longer, include images, links, and more… though shorter is always better.
The Tour Tooltip
The last type of tooltip is a tour.
If you’ve ever signed up for a social media account or have used a new third-party software, chances are good you’ve taken or at least been offered one of these step-by-step tours. Some of these automatically begin when you enter a website and some are like the example above where you have to initiate the tour. They almost always give you the option to opt-out if you don’t feel like clicking through all the steps.
Either way, these are a more elaborate, multi-step version of the standard tooltip that is meant to provide helpful guidance and information on how to use a workflow or interact with different parts of the site. The example above is from TourMyApp, which is a service that allows you to create click-through tours for web apps.
So now that you know what tooltips are, the question remains: will your website even need them?
What Can You Do With Tooltips?
Here’s the thing: your website will probably do just fine without tooltips. It’s not like a lack of tooltips will cause your visitors to flounder about hopelessly, trying to figure out where to turn to next. At least that’s our hope! Nevertheless, tooltips can still make for a really nice addition to websites for a number of reasons:
- Make your site more reader-friendly. As always, the less text you put on the main interface of your site, the better. If you can tuck away a tip that visitors may not want or need, you can keep your site free and clear of any potentially intrusive text.
- Guide your visitors to take action. If you’ve ever felt the need to have more control over getting visitors to take action, tooltips can give you an extra layer of guidance without having to add another call-to-action into your site’s design.
- Cut down on unnecessary back-and-forth. While your site’s design should already be intuitive, there may be some spots that trip up visitors. Rather than leave them feeling frustrated, confused, or needing to reach out to you for clarification, tooltips can be a built-in guide to your website.
- Provide extra info for visitors who want it. Let’s say you have a blog site that only showcases an image and the title of the article on the front page. Rather than force visitors to click through to start reading, you can use popover tooltips to provide extra descriptive info so they can decide whether or not they really want to take that action.
- Improve accessibility. Accessibility should always play a part in the planning and implementation phases during website development. Consequently, tooltips can be really useful in providing disabled visitors with extra direction.
Because of the very nature of tooltips, you’ll need to be careful in how you use them on your website. If you’ve decided that you can put these to good use, think about the following points before you get started:
- Tooltips should be turned off for mobile devices. Mobile visitors already work with a compromised view of your website, so you don’t want to detract from that by including additional pop-up messaging.
- Use them sparingly. If your website is littered with tooltips, visitors will be frustrated by the constant disruption. While some “friction” in the UX is okay—especially if you’re actively trying to get attention—in this case, it needs to be kept to a minimum.
- Tooltips need to add value to whatever element triggered the pop-up. For instance, if you want to include tooltips in a form, you wouldn’t want the tooltip to repeat the name of the field. You’d want it to instead indicate an additional piece of helpful information, like providing the phone number format needed (i.e. (XXX) XXX-XXXX).
- Keep the tooltip messaging as brief as possible. Classic tooltips and tours should only be a few words. Popovers can be a little longer, but it’s still better to keep them shorter.
- Try to keep images out of your tooltips. If you find that you need to explain more or share photos, videos, etc., include a link in the tooltip to a page that includes all of the pertinent information.
As always, whenever you add a new element to your website’s design, A/B test the element to make sure it actually effective in maintaining visitors’ interest. While you may think tooltips are a great addition to your site, your visitors might not find them useful or necessary. A/B testing can help you make that determination.
