6 ms·

Can you pick out a brand just by their button design?

39 points by luiperd 14y ago

mikeryan 14y ago
I think his example may be counter to his point. I didn't recognize one brand from their buttons (even Facebook which I kicked myself for not recognizing)
- landr0id 14y ago
  Same here. I usually recognize buttons from the context of how they're used and the associated text/font. I didn't recognize a single one of these though.
- dlss 14y ago
  Same here. At least for me, it looks like buttons don't matter. Huh.
  - arnoldb0620 14y ago
    Also the same for me.
- notatoad 14y ago
  I recognized facebook because i recognized the facebook blue, not the button. And the amazon button is very distinctive. The rest, not so much.
  - potatolicious 14y ago
    Ditto here. I recognized Facebook, Google, Pinterest, Yahoo, and Amazon not because of the button designs themselves, but because of their colors. Google has a very recognizable three-tone UI which extends beyond their buttons. Facebook, Pinterest, and Yahoo all have a unique shade of a particular color that they claim as branding (blue, red, and purple, respectively). If anything this seems to speak to the importance of branding colors than button design.
- deutronium 14y ago
  Same here, I couldn't recognise any.
- geoka9 14y ago
  Me neither. And I'm a developer and I use most of those sites daily. What can be expected of an average web user? I really think we've got too crazy about design. We've even come up with clever terms like "pixel blindness" to shut out dissent. Users don't seem to care.
bbrizzi 14y ago
Or you can do like 90% of the web and use Bootstrap.
- stephenhuey 14y ago
  Maybe 90% of the web that gets posted to HN, but it's probably only 8% of what gets posted to HN, and some tiny fraction of a percent of the entire web. For those of us who remember the pain of wrestling with web app design a decade ago, Bootstrap is a boon and tools like it will hopefully raise the common denominator! :)
- onlyup 14y ago
  I did not know about Bootstrap. Thanks for the tip!
joshuamerrill 14y ago
Engaging post, but I do not agree with the author's assertion that "Buttons can make or break your brand." As a designer, I've spent a lot of time crafting pixel-perfect buttons, but out of these examples, I could only pick out Amazon, Square, and Svbtle (which most people have never heard of). I think my takeaway from this article was, design attractive buttons that look and work consistently, and then go do work that matters.
- incision 14y ago
  Yep, the only way I can see this being anything close to "make or break" would be in the case of large, inconsistent, unintuitive icons / images as buttons.
jstanley 14y ago
It's a shame the buttons are in JPEG form. I can barely see past the artifacts. EDIT: Incidentally, I got 8. There were only 9 services that I have ever used, so I don't think that's too bad. Are there really that many people who have used all of those services?
- maxmcd 14y ago
  He posted this at the bottom of the article: http://f.cl.ly/items/3j041B2P2v0n0h1G251W/buttons-vertical.png http://f.cl.ly/items/3j041B2P2v0n0h1G251W/buttons-vertical.p...
- dpup 14y ago
  Medium Dev here, this is our fault. We convert images to JPEG when sizing and cropping, this obviously doesn't work well for vector style graphics. We didn't want people to have to wait for a 500K PNG when a 60K JPEG would work for most cases. But, I think we'll probably make a change soon to keep the format the same as whatever it was uploaded with.
  - keyboardP 14y ago
    I use PNG Monster for very good lossless PNG compression http://www.vbgore.com/PNG_Monster http://www.vbgore.com/PNG_Monster Might be worth testing to see if it can reduce the sizes to an acceptable level.
  - jstanley 14y ago
    By the way, since this image is mostly flat colour, you may find that PNG compresses just as well as JPEG. EDIT: Turns out the PNG is 95K, versus 62K for the JPEG. Worth the increase IMO.
    - dpup 14y ago
      Agreed, I'm going to make the change.
justjimmy 14y ago
Gmail, Twitter, Facebook, Yahoo, Instagram, Flickr, Amazon Are the ones I got. Actually thought Square's was bootstrap. The the average user, buttons styles may not mean much if at all, but for those that with a keen eye and pays close attention to minute details and pixels, it's quite telling which button belong to which brand. Saw #4 and was wondering 'What the fracking frack? Is my Little Pony Friends part of this test?' Then I learned it's Microsoft… The 'easiest buttons to identify for me was Facebook's and Google's.
- andyking 14y ago
  I thought #11 was Amazon (it looks just like the buttons on Kindle) but this could have been because I was reading my Kindle on the tram home, and it was the last example of such buttons that I saw. And I've never heard of Svbtle.
deleted 14y ago
[deleted]
neya 14y ago
I have some experience as a UI/UX engineer, and here are my thoughts. First of all, this is a brilliant topic and this article does a really good job at trying to get people understand the importance of buttons. But, at the same time, I disagree with the author that buttons are the only thing that represent your brand and it is extremely important to get them right. I would like to cite everyone a real world example - Google. They use a combination of blue (Search), grey( Gmail, Search, Apps), red (Gmail) and green (Adwords) buttons across their product ranges. And their buttons aren't the same across their product ranges - For example, the orange button on the Blogger platform is totally different from the one on the Search home page. As a start up, it is important to do only one thing with buttons - Maintain uniformity. Google maintains uniformity within its product ranges, though they vary from product to product. (I use Google as a reference, because they are one of the most successful companies on the Internet) So, if you notice Apple, they maintain the glossy-ness of their buttons throughout their product pages. In no one page about a particular product will you find a non-glossy button (like on the Windows Metro UI) mingled with a glossy button. This is the only thing you should be careful about. Otherwise, it's actually okay to use what you like. I've even seen many companies rip off each others' buttons. (For example, 500px and Stripe use the same blue glossy button). Buttons don't represent brands, it's the colors that do. When it comes to buttons, you actually don't have much choice, and this article doesn't point that out. Buttons are usually call-to-action elements and need to be represented with good contrast or 'attention-seeking' colors to convert well. That is why most websites use Green colors for sign-ups (or blue, sometimes), because they convert well (You can read more on Psychology of color to understand this). Important buttons are mostly colored red for the same purpose. (The Compose button in Gmail, for example). So in short, the color of your button doesn't (and cannot, unless you are someone like google with all the prominent colors in your logo) represent your brand entirely. Your brand is composed of various things - Color schemes, Logos, Typography, etc. Buttons are just a tiny part of it. The color scheme for every brand is what that everyone recognizes. Just get that right, and you should be good. Hope this helps.
SeanLuke 14y ago
> Buttons can make or break your brand. Buttons can be your sites most recognizable brand element besides your logo. A well designed, unique button style can be the key to establishing and maintaining trust in your site. Well, I had absolutely no idea on any of the buttons. So I'm: > 0 - Congrats. you’re normal, not an internet nerd like the rest of us. Perhaps that should be better written as: > 0 - Congrats, you are strong evidence against my claim
- jacalata 14y ago
  Same, I got 0. Even after he mentioned amazon, I went back and looked and couldn't see anything that made me think of amazon. For context, I visit amazon maybe once a week.
  - Leszek 14y ago
    Also the same. I could sort of recognise the Amazon one once I knew which one it was, but even then I wasn't 100% sure.
- aaronsnoswell 14y ago
  I also couldn't guess any of them.
- cowsaysoink 14y ago
  I guessed microsoft correctly (because of the flatness) but the rest I had no clue.
- baddox 14y ago
  I don't see how it's evidence against his claim, since he's not saying that certain companies do this perfectly. Surely you would agree that it would be better to have a button style that you would instantly recognize (all else being equal, of course).
- readme 14y ago
  I didn't recognize any of the buttons either. Personally, it matters to me if a button is readable and doesn't look like absolute garbage. Telling me I'm not an internet geek just because I didn't remember the buttons? THE NERVE!
jmduke 14y ago
I think this post would be more interesting as the exact opposite: I scored 1 (recognizied Amazon's buttons) but I'm confident I would have gotten much, much higher if instead of seeing the buttons with no text, we were shown the text with no buttons.
kintamanimatt 14y ago
Button design can affect conversion rates, and that's roughly about it. I only got one and I use many of those other brands regularly.
ggchappell 14y ago
Interesting. #15 just screams "Amazon" to me. Not the faintest idea on any of the rest.
cmillard789 14y ago
Didn't get any but tumblr (not even facebook, which now seems obvious). Never used the website before, but that exact color combo is pretty unique. No one else recognized it? I think it's telling that only 4/18 don't have a blue button.
onlyup 14y ago
Wow, terrible post that is a _theory_ that he posts as fact. It's a theory and while it might be interesting to do an experiment, so far (from the comments here) it's a theory that isn't true. I didn't even get Facebook even though I knew one set had to be Facebook..

39 points by luiperd 14y ago

I think his example may be counter to his point. I didn't recognize one brand from their buttons (even Facebook which I kicked myself for not recognizing)

landr0id 14y ago
Same here. I usually recognize buttons from the context of how they're used and the associated text/font. I didn't recognize a single one of these though.
dlss 14y ago
Same here. At least for me, it looks like buttons don't matter. Huh.
- arnoldb0620 14y ago
  Also the same for me.
notatoad 14y ago
I recognized facebook because i recognized the facebook blue, not the button. And the amazon button is very distinctive. The rest, not so much.
- potatolicious 14y ago
  Ditto here. I recognized Facebook, Google, Pinterest, Yahoo, and Amazon not because of the button designs themselves, but because of their colors. Google has a very recognizable three-tone UI which extends beyond their buttons. Facebook, Pinterest, and Yahoo all have a unique shade of a particular color that they claim as branding (blue, red, and purple, respectively). If anything this seems to speak to the importance of branding colors than button design.
deutronium 14y ago
Same here, I couldn't recognise any.
geoka9 14y ago
Me neither. And I'm a developer and I use most of those sites daily. What can be expected of an average web user? I really think we've got too crazy about design. We've even come up with clever terms like "pixel blindness" to shut out dissent. Users don't seem to care.

bbrizzi 14y ago

Or you can do like 90% of the web and use Bootstrap.

stephenhuey 14y ago
Maybe 90% of the web that gets posted to HN, but it's probably only 8% of what gets posted to HN, and some tiny fraction of a percent of the entire web. For those of us who remember the pain of wrestling with web app design a decade ago, Bootstrap is a boon and tools like it will hopefully raise the common denominator! :)
onlyup 14y ago
I did not know about Bootstrap. Thanks for the tip!

joshuamerrill 14y ago

Engaging post, but I do not agree with the author's assertion that "Buttons can make or break your brand." As a designer, I've spent a lot of time crafting pixel-perfect buttons, but out of these examples, I could only pick out Amazon, Square, and Svbtle (which most people have never heard of). I think my takeaway from this article was, design attractive buttons that look and work consistently, and then go do work that matters.

incision 14y ago
Yep, the only way I can see this being anything close to "make or break" would be in the case of large, inconsistent, unintuitive icons / images as buttons.

jstanley 14y ago

It's a shame the buttons are in JPEG form. I can barely see past the artifacts. EDIT: Incidentally, I got 8. There were only 9 services that I have ever used, so I don't think that's too bad. Are there really that many people who have used all of those services?

maxmcd 14y ago
He posted this at the bottom of the article: http://f.cl.ly/items/3j041B2P2v0n0h1G251W/buttons-vertical.png http://f.cl.ly/items/3j041B2P2v0n0h1G251W/buttons-vertical.p...
dpup 14y ago
Medium Dev here, this is our fault. We convert images to JPEG when sizing and cropping, this obviously doesn't work well for vector style graphics. We didn't want people to have to wait for a 500K PNG when a 60K JPEG would work for most cases. But, I think we'll probably make a change soon to keep the format the same as whatever it was uploaded with.
- keyboardP 14y ago
  I use PNG Monster for very good lossless PNG compression http://www.vbgore.com/PNG_Monster http://www.vbgore.com/PNG_Monster Might be worth testing to see if it can reduce the sizes to an acceptable level.
- jstanley 14y ago
  By the way, since this image is mostly flat colour, you may find that PNG compresses just as well as JPEG. EDIT: Turns out the PNG is 95K, versus 62K for the JPEG. Worth the increase IMO.
  - dpup 14y ago
    Agreed, I'm going to make the change.

justjimmy 14y ago

Gmail, Twitter, Facebook, Yahoo, Instagram, Flickr, Amazon Are the ones I got. Actually thought Square's was bootstrap. The the average user, buttons styles may not mean much if at all, but for those that with a keen eye and pays close attention to minute details and pixels, it's quite telling which button belong to which brand. Saw #4 and was wondering 'What the fracking frack? Is my Little Pony Friends part of this test?' Then I learned it's Microsoft… The 'easiest buttons to identify for me was Facebook's and Google's.

andyking 14y ago
I thought #11 was Amazon (it looks just like the buttons on Kindle) but this could have been because I was reading my Kindle on the tram home, and it was the last example of such buttons that I saw. And I've never heard of Svbtle.

deleted 14y ago

[deleted]

neya 14y ago

I have some experience as a UI/UX engineer, and here are my thoughts. First of all, this is a brilliant topic and this article does a really good job at trying to get people understand the importance of buttons. But, at the same time, I disagree with the author that buttons are the only thing that represent your brand and it is extremely important to get them right. I would like to cite everyone a real world example - Google. They use a combination of blue (Search), grey( Gmail, Search, Apps), red (Gmail) and green (Adwords) buttons across their product ranges. And their buttons aren't the same across their product ranges - For example, the orange button on the Blogger platform is totally different from the one on the Search home page. As a start up, it is important to do only one thing with buttons - Maintain uniformity. Google maintains uniformity within its product ranges, though they vary from product to product. (I use Google as a reference, because they are one of the most successful companies on the Internet) So, if you notice Apple, they maintain the glossy-ness of their buttons throughout their product pages. In no one page about a particular product will you find a non-glossy button (like on the Windows Metro UI) mingled with a glossy button. This is the only thing you should be careful about. Otherwise, it's actually okay to use what you like. I've even seen many companies rip off each others' buttons. (For example, 500px and Stripe use the same blue glossy button). Buttons don't represent brands, it's the colors that do. When it comes to buttons, you actually don't have much choice, and this article doesn't point that out. Buttons are usually call-to-action elements and need to be represented with good contrast or 'attention-seeking' colors to convert well. That is why most websites use Green colors for sign-ups (or blue, sometimes), because they convert well (You can read more on Psychology of color to understand this). Important buttons are mostly colored red for the same purpose. (The Compose button in Gmail, for example). So in short, the color of your button doesn't (and cannot, unless you are someone like google with all the prominent colors in your logo) represent your brand entirely. Your brand is composed of various things - Color schemes, Logos, Typography, etc. Buttons are just a tiny part of it. The color scheme for every brand is what that everyone recognizes. Just get that right, and you should be good. Hope this helps.

SeanLuke 14y ago

> Buttons can make or break your brand. Buttons can be your sites most recognizable brand element besides your logo. A well designed, unique button style can be the key to establishing and maintaining trust in your site. Well, I had absolutely no idea on any of the buttons. So I'm: > 0 - Congrats. you’re normal, not an internet nerd like the rest of us. Perhaps that should be better written as: > 0 - Congrats, you are strong evidence against my claim

jacalata 14y ago
Same, I got 0. Even after he mentioned amazon, I went back and looked and couldn't see anything that made me think of amazon. For context, I visit amazon maybe once a week.
- Leszek 14y ago
  Also the same. I could sort of recognise the Amazon one once I knew which one it was, but even then I wasn't 100% sure.
aaronsnoswell 14y ago
I also couldn't guess any of them.
cowsaysoink 14y ago
I guessed microsoft correctly (because of the flatness) but the rest I had no clue.
baddox 14y ago
I don't see how it's evidence against his claim, since he's not saying that certain companies do this perfectly. Surely you would agree that it would be better to have a button style that you would instantly recognize (all else being equal, of course).
readme 14y ago
I didn't recognize any of the buttons either. Personally, it matters to me if a button is readable and doesn't look like absolute garbage. Telling me I'm not an internet geek just because I didn't remember the buttons? THE NERVE!

jmduke 14y ago

I think this post would be more interesting as the exact opposite: I scored 1 (recognizied Amazon's buttons) but I'm confident I would have gotten much, much higher if instead of seeing the buttons with no text, we were shown the text with no buttons.

kintamanimatt 14y ago

Button design can affect conversion rates, and that's roughly about it. I only got one and I use many of those other brands regularly.

ggchappell 14y ago

Interesting. #15 just screams "Amazon" to me. Not the faintest idea on any of the rest.

cmillard789 14y ago

Didn't get any but tumblr (not even facebook, which now seems obvious). Never used the website before, but that exact color combo is pretty unique. No one else recognized it? I think it's telling that only 4/18 don't have a blue button.

onlyup 14y ago

Wow, terrible post that is a _theory_ that he posts as fact. It's a theory and while it might be interesting to do an experiment, so far (from the comments here) it's a theory that isn't true. I didn't even get Facebook even though I knew one set had to be Facebook..