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!
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!
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
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
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.
By Aaditya Mandloi
About Galaxy WeblinksWe specialize in human-centric user experience design services to our clients across the globe. Our innovative ideas, creative designs, industry best practices, and processes help us improve user satisfaction and solve complex design problems. Contact us for a free consultation!
There’s a popular user experience quote: “A user interface is like a joke. If you have to explain it, it’s not that good.” While clever,…Design UI Design
Incessant scrolling while using an application is perceived as a flaw on both mobile and desktop. To address this concern, a shift to horizontal scrolling…Design UI Design UX
User Experience Design is one of our core competencies. In this blog, we will share with you the best practices of designing buttons for your…Design UI Design UX Web Design
We all love harmony in our lives. Harmony of tones and hues, of perfect shapes and negative spaces. Be it in music, interior design, or…Design Design Process UI Design
Contemporary mobile apps have different ways of onboarding and retaining their users. Duolingo, a very popular language-learning application offers free sessions before they ask you…Design Mobile Design UX
Design System is one of the most excessively used design terms in the software industry right now, so much so that it has given birth…Design Design Process UX
If you’ve looked over these tools before, then you’ve probably wondered how they compare when facing off one with another. What’s InVision’s kryptonite? Why Framer…Design Design Tool user experience Web Design