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

18 Comments

  • erictan

    Adding text to it? Sorry, as a designer, I can assure you only stupid designers do that. And does it come in 125 languages as well? Whatever happened to simplicity?

  • rey alejandro

    Change. Change. Change. People complain too much because they don't want change. Then they get used to it and just stop complaining. I value consistency more than anything else. Consistency build Trust .

  • NetscapePizza

    "So you always have to use a half grey button, and it always falls away [on a busy website].""

    Shouldn't that be the point, my website is about it's content not about Facebook.

    Not that I'd ever stick that social detritus on my site anyway.

  • Irene Velveteen

    This is inflating Facebooks brand way too much.
    It's works for the "Share" button. Because we're being told where we're sharing it.
    But the intent of the 'Like' button is now lost. Everyone already associates "Like" with Facebook.
    Labelling the thumbs-up obsolete because the colors don't work is not a valid reason.
    You're sacrificing communication with the user for your brand image.
    Leave your ego at the goddamn door.

  • Nick van der Wildt

    While I fully agree that there's a switch being made from a focus on the famous 'Like' concept to a more brand influenced button, they did test this concept before putting it out there. This is not based on a hunch from a group of designers, or Mark's wish to shove the blue color in your face every second of the day. This is actually successfully tested. You can read from the article how more people clicked on the blue button with the logo.

    I think at this point, Facebook has surpassed a lot of brand recognition and communication theories and best practices. Were this a smaller company, I'd definitely say moving away from their famous 'Like' concept is wrong. For Facebook, I don't know. The recognition for anything Facebook is insane. I can only imagine how great (and difficult at the same time) it would be to work for a brand like that.

    To me, it would be interesting to see how the tests were set up and how significant each variation came out of it.

    I also wonder what impact this will have on the 'Like' concept on the longer term.

    I'm upvoting your comment because, essentially, you are right and I agree, but we have been proven wrong by Facebook's tests with users. And I like the passion in your comment.

  • Irene Velveteen

    True, Nick.
    Thanks for your input and reply. Make some good points.. I guess I'm jealous people don't need straight forward communication with a brand as big as Facebook. They're overwhelmingly big now. You could say Facebook is the primary means for connecting individual users online and creating a community out of anyone with internet connection. Not sure how to feel about that...

  • Nick van der Wildt

    I guess it is as scary as it is a beautiful thing. It has brought a lot of people closer to each other and Facebook's changed modern generations. Social science has many new influences in their research since Facebook has arrived -- isn't that awesome? I wish I could contribute to something like that with something that I created :-)

    And about the jealousy thing; yeah.. aren't we all? ;-)

  • Irene Velveteen

    Scary-powerful.
    We can only hope Mark isn't into NLP. Although the constantly changing privacy settings seem to be having similar effects.

  • Darlene Formech

    wish I'd known they axed it, I had a big thumb on the front page of my website, since I usually go through the back end (!) I didn't realize for a few months the embed link was broken. Thanks for the notice FB
    ;-).

  • Stacey Vincent

    I'm not really sure I agree with this approach. I understand the need for consistency in the graphics, and ultimately web design, but I'm not sure Facebook will see much of a difference. People aren't going to stop using Facebook because of it - it certainly isn't a deal breaker, but I think it's similar to anything that changes when it shouldn't, and too frequently.

    For instance - an NHL arena in Ottawa has changed its name
    First it was Palladium, then Corel Centre, then ScotiaBank Place, then Canadian Tire Centre. To this day, I still refer to it as the Corel Centre because it was catchy, and similarly, I think most people will still see the thumb next to the word 'Like', despite it not being there (the same way you would if a word's letters were jumbled - it's part of the whole), because it's already become indigenous to the word itself. Wasted man hours? Not sure.

  • DAVID ALAN JONES RIDGE

    Oh, ya, in some cultures around the world the thumbs up is the same thing as "The Finger".2

    BOYCOTT MARCH OF DIMES!

  • J_Lillz5

    oh man!!! No more thumbs!!! who even bothers with words anymore??? Let's just post Facebook logos as responses to everything on the internets.... but be sure to imbed them with trackable codes so Mark Zuckerburg can sell your baby photos to advertisers. Troll out.