

Can you pick out a brand just by their button design? - luiperd
https://medium.com/design-ux/77eb4f9a439d

======
neya
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
> 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
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
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.

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

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

~~~
jstanley
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
Agreed, I'm going to make the change.

------
jmduke
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
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
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
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
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
Or you can do like 90% of the web and use Bootstrap.

~~~
stephenhuey
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! :)

------
kintamanimatt
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
Interesting. #15 just screams "Amazon" to me. Not the faintest idea on any of
the rest.

