large_Crossover Series NFTs.png

medium_Crossover Series NFTs.png

small_Crossover Series NFTs.png

thumbnail_Crossover Series NFTs.png

From Photography to NFT Art: Twisted Digital Landscapes with Nate Hill

From Design System to ‘NFT Design System’: Creating TinyFaces

Neurodiversity and Inclusion: Choosing Kinder Design

medium_652ccf22c8853584bde5553986a4eed0.png

small_652ccf22c8853584bde5553986a4eed0.png

thumbnail_652ccf22c8853584bde5553986a4eed0.png

Web5 is here. Goodbye Web3? TBD.

<a href="http://ift.tt/2pNO5ru">medium bookmark / Raindrop.io</a> | 
<div><img src="http://ift.tt/2pQV436" alt="How Facebook, Twitter, and LinkedIn use Tooltips for Feature Discovery"></div>
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:
<img src="http://ift.tt/2pQzq0L" alt="facebook-react-feature-tooltip.jpg">     <img src="http://ift.tt/2pR63cZ" alt="facebook-react-feature.jpg">
<a href="http://ift.tt/2pQBfLg">Tooltips</a> 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.
<h2>Facebook</h2>
Here’s another example from Facebook:<img src="http://ift.tt/2pQPwWh" alt="facebook-download-album-discovery.jpg">
<a href="http://ift.tt/2pQBg1M">Like our page</a> 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:
<img src="http://ift.tt/2pR9noq" alt="facebook-tooltip-camera.jpg">
Holy s@#$ I can do what?! Here’s one more:
<img src="http://ift.tt/2pQBeHc" alt="facebook-stickers-feature-tooltip.jpg">
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.
<h2>Twitter</h2>
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:
<img src="http://ift.tt/2pQV2s0" alt="twitter-gif-modal.jpeg">  <img src="http://ift.tt/2pQBh5Q" alt="twitter-gif-release.jpeg">
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:
<img src="http://ift.tt/2pQV7vM" alt="twitter-moments-tooltip.jpeg">
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 <a href="http://ift.tt/1omTuEa">Twitter is in some high waters</a>, 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&#8230;Yep:
<img src="http://ift.tt/2pQV96S" alt="twitter-explore-tooltip.jpg">
<h2>LinkedIn</h2>
LinkedIn’s feature discovery tooltips are all over the place in terms of styling. Here’s one in their company suite:
<img src="http://ift.tt/2pQBhTo" alt="linkedin-follow-feature.jpg">
And another in their SlideShare app:
<img src="http://ift.tt/2pQWsCM" alt="LinkedIn-slideshare-clipboard-announcement.jpg">
And their latest on their homepage looks a lot like Facebook and Twitter: 
<img src="http://ift.tt/2pQBiqq" alt="linkedin-tooltip-chat-feature.jpg">
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.
<h2>Takeaways</h2>
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 <a href="http://ift.tt/2pAFMlx">code-free feature discovery solution like Appcues</a>. Tons of companies like <a href="https://www.canva.com/">Canva</a>, <a href="http://ift.tt/2pQoxfl">Amplitude</a>, and <a href="http://ift.tt/2pQQh1J">AdRoll</a> 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.
<a href="http://ift.tt/2pQ8LRO">Try it yourself—for free—today!</a>
<div><a href="http://ift.tt/2pNO5ru">http://ift.tt/2pNO5ru</a></div>

How Facebook, Twitter, and LinkedIn Use Tooltips for Feature Discovery

How Facebook, Twitter, and LinkedIn Use Tooltips for Feature Discovery

Top Stories