5 mistakes to avoid while designing tooltips

Tooltip is a great UI pattern for user onboarding and feature discovery. But there is a thin line between useful and annoying tooltips. This post will help you draw the line.

Your tooltips are either helping users by telling them about the features that are exclusive to your product or they are interrupting users in between their important tasks to tell them how brilliant your new upload feature is. It’s a mistake to question your user’s intelligence. Tooltip design often fails because of common mistakes like these.

Here is a list of 5 mistakes that you can avoid to boost feature adoption and product tour completion rates with your tooltip design.

1. Where are the hints when you need them the most!

Image of a man acting confused in a shopping mall

One of the most frustrating things about tooltip design is visibility. While designing unique interfaces, placement and size of tooltips are often ignored. A user can’t use something if it’s hidden.

Most common implementation of transient tooltips doesn’t take touchscreens into consideration. Hover triggers have tiny hit points. Anything tiny is bad for accessibility. These actions require fine motor skills to land and hold on the hit point for a while.

2. Must have one upper case, one lower case, special char….poof!

Ant Man shrinking

Consider tooltip as friction in user experience, if the users have to go out of their way to perform a difficult action, chances are they’ll skip.

If the interaction in your design requires a lengthy explanation, then tap or hover to reveal action becomes an unnecessary burden.

3. Oh! Here is a tooltip telling me to write in the field it’s obscuring

Lady running through kitchen

Some transient tooltips are designed to expand over the input field while some stretch past smaller screens. You can’t read and act simultaneously when the tip is inaccessible or covering the input fields.

Tips are supposed to help the user with the interaction and not obstruct it.

4. Should have told me earlier that tapping this button will terminate my session

Train pilot emergency breaking

Timing is crucial in tooltip design. The tips should be aligned with the user flow. Feature adoption and user’s understanding of your product depends on the relevance of tips and not the frequency of it.

A user will only be interested in reading about a feature when they need to use it. Overwhelming the user with information for the sake of feature discovery will only make them skip the info.

5. What does it have to offer?

Last but not the least, comes your tooltip copy. A boring and irrelevant copy might cost you the user motivation to even encourage an action. Motivation, Ability, and a Trigger are the three crucial elements in BJ Fogg’s Behaviour Model that prompts a user to take an action.

Copy is an indispensable part of a tooltip because it motivates the user to take action. Your tooltip is doomed to fail if your copy isn’t conversational or it doesn’t reflect your value proposition.

In a nutshell

Even the most intuitive UI needs tooltips while onboarding new users or introducing new concepts. The difference between not-so-obvious and obvious is not that obvious. Think about your target users while making these assumptions. Explaining a basic feature to an experienced user might annoy them.

Facebook, Asana, and Slack are some of the best examples of great tooltip design. Their tooltips are a part of the user flow. Facebook has a subtle, conversational, and attractive approach towards tooltips, which informs and encourages action as well.

If you’re seeing significant drops in your user onboarding or feature adoption then give us a shout here, we’ll be happy to help you optimize your tooltip design.


Stay up to date with latest happenings in our space