medium bookmark / Raindrop.io |

Last winter, Facebook made a change that I’ll bet you remember. They updated their ‘Like’ button to include ‘love’ and ‘wow’ and other emotions.

Facebook showed their users this through a simple, elegant user interface pattern called a tooltip:

Tooltips are a simple solution that are shaped to call out elements on a user interface (UI).

A scroll down my newsfeed suggests that the tooltip worked—the feature was discovered—and now there’s tons of ‘love’ and ‘wow’ being shared.

Here’s the lesson. Social networks like Facebook have to communicate new features en masse. And the most successful way they do it is with in-product tooltips.

Facebook

Here’s another example from Facebook:

Like our page if want to get to know us better 😉

Read the text in the image above. Is it not super clear what you can now do? It is super clear!

Pay attention now, here’s another:

Holy s@#$ I can do what?! Here’s one more:

Is the pattern clear now? Facebook uses tooltips to drive adoption to their newest features. Why? Because they’re simple, and elegant, and they direct attention to where it needs to go.

Have you also noticed that the particular features Facebook is pointing to are otherwise not very obvious? They’re pointing to new functionality behind an icon or an image on an already busy user interface.

Tooltips are often best used when pointing out the easy-to-miss changes.

Twitter

I was pumped when Twitter integrated GIFs into their platform. Who doesn’t love sharing a great GIF?!

Twitter announced the integration with a full-screen message and then pointed the way with a tooltip:

It worked. Now GIFs are all over the Twittersphere.

Another important product launch for Twitter was Moments. Twitter announced Moments to users in-app with nothing more than a blue tooltip:

Upon seeing this tooltip for the third time, I realized it was different from Facebook’s. No matter how many times I saw it and clicked on the object it pointed to, it didn’t go away. As far as I’ve seen, Twitter’s tooltips appear about 7 times before they go away.

We all know Twitter is in some high waters, and they’ve working hard to reinvigorate their user base. So perhaps the persistence of their tooltips is a much needed strategy to drive adoption.

But if you’d ask me, I’d say Twitter’s tooltips cross the line from helpful to annoying. I could tolerate the same message 2 or 3 times, but I wanted it to go away eventually.

Moments has since been weaved into a new feature called Explore. I bet you can guess how Twitter helped users discover Explore…Yep:

LinkedIn

LinkedIn’s feature discovery tooltips are all over the place in terms of styling. Here’s one in their company suite:

And another in their SlideShare app:

And their latest on their homepage looks a lot like Facebook and Twitter:

The inconsistency of LinkedIn’s tooltip styling is peculiar. Some are grey with thick borders, others are centered, and the last one here has a blue background.

Although LinkedIn has the right idea in using tooltips for feature discovery, they seemingly haven’t decided to use one style.

I hope that the tips with the blue backgrounded stick around.

The good news for LinkedIn is that inconsistent tooltip styling is hardly the worst mistake they could make. Worse is when a tooltip’s message is unclear, or worse yet, they show up for the wrong audience.

It’s easy to avoid these mistakes with the right tools and process in place.

Takeaways

Did you notice that all of these tooltips are singular? There aren’t part of a multi-tip product tour; they’re a quick note to the user. This is ideal. Users won’t want to pay you more attention than is necessary, so when using tooltips to announce new features, less is more.

Tooltips with dark background colors stand out against a white/grey background. Don’t be afraid of a tooltip that will catch your users’ attention. That’s the point.

Keep it consistent. You can better train users to see and act upon your tooltips when they look and behave consistently.

If you’re looking to mimic this strategy of using tooltips to announce new features, you could either have your engineers build it themselves, or use a code-free feature discovery solution like Appcues. Tons of companies like Canva, Amplitude, and AdRoll use our product to do exactly this. It’s much faster and easier—and probably less expensive—than writing and shipping the code in-house.

Try it yourself—for free—today!