Quick! Can you name all these icons?

I work on the internet all day, and I know I couldn’t. What’s worse, that’s a screenshot from an app I use almost every day on my phone.

The other day, I was browsing through my Feedly stream ((For those who don’t know, Feedly is an online RSS feed reader that many people, myself included, switched to when Google Reader went away.)) and saw a change that got me really excited: they added persistently visible text labels to their sharing icons!

What’s that? You’re not jumping up and down, screaming maniacally with joy? Let me explain.

Feedly’s new interface (previously, it was icon-only) is attractive and now follows the Nielsen Norman Group’s recommendation for how to use icons:

A user’s understanding of an icon is based on previous experience. Due to the absence of a standard usage for most icons, text labels are necessary to communicate the meaning and reduce ambiguity.

To help overcome the ambiguity that almost all icons face, a text label must be present alongside an icon to clarify its meaning in that particular context. (And even if you’re using a standard icon, it’s often safer to include a label, especially if you slightly altered the icon to match your aesthetic preferences or constraints.) ((Note that this example does fall under the case of altered icons since they are shown all in white without the useful colors like Facebook’s ubiquitous blue.))

Icon labels should be visible at all times, without any interaction from the user. For navigation icons, labels are particularly critical. Don’t rely on hover to reveal text labels: not only does it increase the interaction cost, but it also fails to translate well on touch devices.

For whatever reason, whether it was reading Nielsen Norman Group’s relatively new article or user testing, Feedly decided to make a change, and I think it looks great and probably works even better! The article is loaded with other good tips, so I recommend reading it all, but that’s enough to summarize the issue at hand. ((Because it’s on a phone! In my hand! Get it!? Sorry…))

This example is especially useful because it also shows why labels must remain visible at all times since there is no “hover” state on phones.

Except for the most popular social media icons, almost all icons need labels. (Facebook is probably common enough but even Twitter has problems since many people still use the old Twitter icon that’s too similar to Tumblr.) This is particularly true if there are a lot of icons, which almost surely increases the chance of a user not knowing all of them.

Showing labels with icons make them easy to scan, easy to use, and much less likely to leave you or your website’s visitors scratching their heads and accidentally trying to share something on WhatsApp, Hangouts, Google Voice, or text message when that icon was really for Facebook Messenger.