The ultimate reason why you should opt for tooltips is to explain the core product features to the user. But sadly, there are folks out there who abuse the usage of tooltips and thus make the products unappealing and spammy.

Why use tooltips?

<ul><li>Show one tooltip at a time. Otherwise, you will be overloading the new users with tons of new information. </li><li>Show progress indicators. The user needs to know where they are standing and how long there remains until the end of the tour.</li><li>Include one action per tooltip. </li><li> Allow the user to skip the tutorial.</li><li>Give an option to go back.</li></ul>

So how to avoid looking spammy?

<figure><img alt="" src="https://miro.medium.com/max/500/1*Ht5km72rci8_AJpG-50C0Q" width="785" height="523"><figcaption class="eh ei di dg dh ej ek bl b el cm cn" data-selectable-paragraph="" dir="ltr">Photo by <a href="https://unsplash.com/photos/eVa2FK83K6w?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText" class="cq em" rel="noopener ugc nofollow" dir="ltr">Saveliy Bobov</a></figcaption></figure><img alt="Rafayel Mkrtchyan" src="https://miro.medium.com/max/500/1*O5gGihUJf-27kjy7NkDmBA" width="48" height="48">Imagine a street where there are ZERO street signs. A lot of people, cars, buses, bikes. But NO street signs. Pedestrians and drivers are yelling. A complete chaos….Now imagine a mobile app with tons of cool features and no onboarding, no tips, no hints, no guidance, nothing. Looks like a street where there are no street signs, right?You know what I mean? An app is like a street and the users are like the pedestrians and the drivers. When there are no street signs on the street, chances are that a traffic jam is going to happen. And most probably people will call the police to come and help them resolve the problem.The sad news is that app users won’t call you if they feel lost in your app. What will they do? Exactly, leave it! I know, this sounds pretty gross. But that’s the reality. Face it!If you think that people are going to fall in love with your product at the first sight, you are wrong. If you think everyone is going to like it anyway, you are wrong. And if you think users are always going to understand intuitively how to navigate in your app… Again. You. Are. Wrong.Even if you are genius, you cannot come up with a 100% intuitive product design.That’s why a lot of wise guys use onboarding tactics, tooltips, progress bars, product tutorials and a bunch of other things to help users figure out how the app is working. Because everything has it’s way of working, right? A decade or two ago people were attaching a long list of instructions with products like washing machines, blenders, and even fridges. Now that we have got advanced methods to build intuitive products, we just need to make sure a few core instructions and at least some guidance on how to use the product are provided.So today, I am going to talk about tooltips which are basically a way of product commentary that make a part of the user onboarding flow. Tooltips help direct attention toward a specific item or action.<h1 data-selectable-paragraph="">Why use tooltips?</h1>The ultimate reason why you should opt for tooltips is to explain the core product features to the user. But sadly, there are folks out there who abuse the usage of tooltips and thus make the products unappealing and spammy.<BLOCKQUOTE>“Tooltips are text labels that appear when the user hovers over, focuses on, or touches an element.Tooltips identify an element when they are activated. They may contain brief helper text about its function. For example, they may contain text information about actionable icons.Tooltip labels do not receive input focus.”</BLOCKQUOTE><h1 data-selectable-paragraph="">So how to avoid looking spammy?</h1>There are a few things you can do to avoid looking spammy while using tooltips. Here you go.<h2 data-selectable-paragraph="">1: Show one tooltip at a time</h2>Otherwise, you will be overloading the new users with tons of new information. That’s not the way it should be. Hotjar nails tooltips. See the screenshots below:<figure><img alt="" src="https://miro.medium.com/max/500/1*KElnWi5_k_ITTvA3XOPJr" width="785" height="736"></figure>In Hotjar’s scenario, you only see the next tooltip after you press “next” on the current one.<h2 data-selectable-paragraph="">2: Show progress indicators</h2>In Hotjar’s example, the progress is shown through the little dots. That’s pretty sweet especially from the new user’s perspective. The user needs to know where they are standing and how long there remains until the end of the tour.<h2 data-selectable-paragraph="">3: Include one action per tooltip</h2>This is a golden rule! It’s OK to make the descriptions a bit long and the tooltips higher in number. Just make sure you include only ONE action per tooltip otherwise the users might get misled by the number of actions they have to perform.<h2 data-selectable-paragraph="">4: Allow the user to skip the tutorial</h2>As you can see, in Hotjar’s example, the user has no such option which is pretty sad. They should have the chance to skip the tutorial at any moment they want to. Remember, you don’t want to look spammy.<h2 data-selectable-paragraph="">5: Give an option to go back</h2>Sometimes some things might sound vague to the user. So, make sure you provide them with the chance to go over the tooltip tutorial again.<figure><img alt="" src="https://miro.medium.com/max/500/1*NkJNFr_tZ7iCeWQDObkuP" width="785" height="489"></figure><h1 data-selectable-paragraph="">At the end</h1>Impressive onboarding is vital for engaging and retaining web and mobile users. Constantly improve the onboarding flow. Try A/B testing, experiment with onboarding techniques and tools. Make it clutter-free. If you have decided to use tooltips, don’t abuse them. Happy onboarding!If you enjoyed this article, please hit that clap button to help others find it.I am an Internet Entrepreneur with extensive experience in product management, software engineering, business operations, and strategy. And I am also the co-founder and CEO of <a href="http://codetrace.com/" rel="noopener ugc nofollow" dir="ltr">CodeTrace</a>, which is a real-time skills-assessment software that measures developer’s experience based on their code.

Imagine a street where there are ZERO street signs. A lot of people, cars, buses, bikes. But NO street signs. Pedestrians and drivers are yelling. A complete chaos…. Now imagine a mobile app with…

product

Product & Design

Imagine a street where there are ZERO street signs. A lot of people, cars, buses, bikes. But NO street signs. Pedestrians and drivers are yelling. A complete chaos….

Now imagine a mobile app with tons of cool features and no onboarding, no tips, no hints, no guidance, nothing. Looks like a street where there are no street signs, right?

You know what I mean? An app is like a street and the users are like the pedestrians and the drivers. When there are no street signs on the street, chances are that a traffic jam is going to happen. And most probably people will call the police to come and help them resolve the problem.

If you think that people are going to fall in love with your product at the first sight, you are wrong. If you think everyone is going to like it anyway, you are wrong. And if you think users are always going to understand intuitively how to navigate in your app… Again. You. Are. Wrong.

Even if you are genius, you cannot come up with a 100% intuitive product design.

That’s why a lot of wise guys use onboarding tactics, tooltips, progress bars, product tutorials and a bunch of other things to help users figure out how the app is working. Because everything has it’s way of working, right? A decade or two ago people were attaching a long list of instructions with products like washing machines, blenders, and even fridges. Now that we have got advanced methods to build intuitive products, we just need to make sure a few core instructions and at least some guidance on how to use the product are provided.

So today, I am going to talk about tooltips which are basically a way of product commentary that make a part of the user onboarding flow. Tooltips help direct attention toward a specific item or action.

The ultimate reason why you should opt for tooltips is to explain the core product features to the user. But sadly, there are folks out there who abuse the usage of tooltips and thus make the products unappealing and spammy.

“Tooltips are text labels that appear when the user hovers over, focuses on, or touches an element.

Tooltips identify an element when they are activated. They may contain brief helper text about its function. For example, they may contain text information about actionable icons.

Tooltip labels do not receive input focus.”

There are a few things you can do to avoid looking spammy while using tooltips. Here you go.

Otherwise, you will be overloading the new users with tons of new information. That’s not the way it should be. Hotjar nails tooltips. See the screenshots below:

In Hotjar’s scenario, you only see the next tooltip after you press “next” on the current one.

In Hotjar’s example, the progress is shown through the little dots. That’s pretty sweet especially from the new user’s perspective. The user needs to know where they are standing and how long there remains until the end of the tour.

This is a golden rule! It’s OK to make the descriptions a bit long and the tooltips higher in number. Just make sure you include only ONE action per tooltip otherwise the users might get misled by the number of actions they have to perform.

As you can see, in Hotjar’s example, the user has no such option which is pretty sad. They should have the chance to skip the tutorial at any moment they want to. Remember, you don’t want to look spammy.

Sometimes some things might sound vague to the user. So, make sure you provide them with the chance to go over the tooltip tutorial again.

Impressive onboarding is vital for engaging and retaining web and mobile users. Constantly improve the onboarding flow. Try A/B testing, experiment with onboarding techniques and tools. Make it clutter-free. If you have decided to use tooltips, don’t abuse them. Happy onboarding!

If you enjoyed this article, please hit that clap button to help others find it.

I am an Internet Entrepreneur with extensive experience in product management, software engineering, business operations, and strategy. And I am also the co-founder and CEO of <a href="http://codetrace.com/">CodeTrace </a>, which is a real-time skills-assessment software that measures developer’s experience based on their code.

What are Tooltips and Why Should You Use Them

Why use tooltips?

So how to avoid looking spammy?

Danielle West's ideas are part of this journey:

Related collections

Similar ideas