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

Can you pick out a brand just by their button design?(medium.com)

39 points by luiperd 13 years ago | 34 comments

neya 13 years 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 13 years 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 13 years 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 13 years 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.

baddox 13 years 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 13 years 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!

aaronsnoswell 13 years ago | |

I also couldn't guess any of them.

cowsaysoink 13 years ago | |

I guessed microsoft correctly (because of the flatness) but the rest I had no clue.

joshuamerrill 13 years 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 13 years 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.

mikeryan 13 years 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)

notatoad 13 years 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 13 years 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.

geoka9 13 years 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.

dlss 13 years ago | |

Same here. At least for me, it looks like buttons don't matter. Huh.

arnoldb0620 13 years ago | | |

Also the same for me.

landr0id 13 years 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.

deutronium 13 years ago | |

Same here, I couldn't recognise any.

jstanley 13 years 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?

dpup 13 years 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 13 years ago | | |

I use PNG Monster for very good lossless PNG compression http://www.vbgore.com/PNG_Monster Might be worth testing to see if it can reduce the sizes to an acceptable level.

jstanley 13 years 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.

maxmcd 13 years ago | |

He posted this at the bottom of the article: http://f.cl.ly/items/3j041B2P2v0n0h1G251W/buttons-vertical.p...

jmduke 13 years 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.

justjimmy 13 years 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 13 years 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.

onlyup 13 years 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..

cmillard789 13 years 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.

bbrizzi 13 years ago |

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

stephenhuey 13 years 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 13 years ago | |

I did not know about Bootstrap. Thanks for the tip!

kintamanimatt 13 years 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 13 years ago |

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