Why Facebook's New Like Button Ditches The Thumbs Up

In a bold redesign, Facebook’s iconic thumbs up has been all but deleted from its like button. We talk to the button’s designer to learn why.

Facebook is known for just a couple of prominent interactions that define the service. There’s the infamous poke—the strangely pseudo-sexual gesture that gives Facebook a sense of humor—and of course, its bigger, way more popular brother, the thumbs-up Like.

Yesterday, the company announced the Like and Share buttons' first redesign in two years. And while Liking on Facebook’s own site goes unaffected, all of the Like buttons you see around the web—those omnipresent promotional buttons plastered across pages like this one—will soon be refreshed with a bolder, bluer design six months in the making that, somewhat shockingly, trades the iconic thumbs up for the Facebook logo. It’s an update that’s almost unfathomable in its scope, as these buttons are viewed over 22 billion times daily across millions of websites. But for Facebook, it was time for a brand-leading makeover, according to the new button’s designer, Hugo van Heuven.

"The Like button was this light blueish thing that usually fell away," van Heuven tells Co.Design. "We thought we could make it more prominent, look a little bit better, and be more consistent."

When van Hueven speaks about consistency, he’s not only talking about being consistent across Facebook’s own brand, but ensuring that their Like button is embedded consistently across the 7.5 million sites that use it. The old buttons ranged in size, from 18 to 22 pixels tall, and so careless developers would often not leave proper padding, clipping the embedded graphic and, in turn, making Facebook look a little worse for it. Now, 20x48 pixels will be Facebook’s standard that web designers can count on without triple checking their spacing.

But the most influential decision was one of color. The team tried grey buttons, black buttons, and of course, blue buttons. Blue was an overall favorite, and in Facebook’s testing, they found that the color actually drove more people to click Like and Share (proving again the power of color for a brand's design). But that blue couldn’t, by nature, get along with the famous thumb.

"The thumb—as recognizable as the Facebook thumb is—is a little white thumb with a blue sleeve," van Heuven explains. "You can’t see the blue sleeve on a blue button. So you use a white button. But if you have a white button, you won’t see the thumb, just the sleeve. So you always have to use a half grey button, and it always falls away [on a busy website]."

"Because the thumb has a light and dark element, it’s a really hard icon to use in a situation like this," he adds.

In response, the team just opted to make the thumb 100% white on top of a blue button, but an all-white thumb didn’t work either. While Facebook successfully uses a monotone black thumb on their main page, the thumb, without its iconic two-tone approach, becomes generic when plugged into a random webpage.

"It could be any thumb," van Heuven laughs. "We don’t own all the thumbs!"

So the thumb bit it, for the most part. They still snuck the gesture into some iterations of the Like button, tucked into the periphery, but in its place, the Facebook logo now reigns supreme. And if you look closely at all, you’ll see that the way the Facebook logo appears on the blue button is nearly identical to the way it appears on the top of Facebook’s page, bringing a level of brand consistency to the social network that’s been lacking across its digital tendrils, which van Heuven explains, "is really hard."

"Because the icon in the Like button is only 14x14 pixels, and that’s a really small area to make the F look nice," he says. "Zoom into that F. [You’ll see] I have literally two pixels to make the stem of the F. That’s one reason it took a long time. I’ve been with a lot of people in an argument how the anti-aliasing of the F would work. A lot of people said it’s more recognizable three pixels wide, and I said it was better at two. That couple of pixels takes so much attention."

Ultimately, van Heuven’s two-pixel approach won out, meaning his vision for Facebook will be seen for an insane amount of man hours each day—again, that's 22 billion views every 24 hours. So what does it feel like to wield that sort of power as a designer?

"Every day I regret that I couldn’t put my name on that button!" van Heuven laughs. "No ... sometimes you realize, my work is shown to more people than super famous celebrities. No one gets that chance. It makes you enormously proud."

[Image via Shutterstock]

Add New Comment