The Perfect Button

As a front-end guy, I’ve made hundreds of buttons for websites and mobile apps of all different shapes and colors. It becomes an itching question for me, is there such a thing as the perfect button? What is a button anyway?

Buttons are everywhere, from your remote control to the websites you read everyday. We use the term ‘buttons’ to describe any small round object resembling a button (pictured above). With that reasoning then all buttons should be round and circular by default. Of course that is not the case, but it is a good argument for the perfect button to be round since the rounded shape is a strong visual cue. Combine the round shape with the color red and a shiny, three dimensional feel, and you get the classic button that we see so often on television.

The thing is, buttons are meant to be pressed. Their whole purpose is to have our fingers or cursors to press or click on them. So visually, the three dimensional effect is another strong visual cue for a button. Also important to notice that buttons have states, as in de-pressing physically. In CSS, we can use various states such as active, hover, and focus to make our buttons much more interactive. Active states are neat since it give that tactile feel and instant gratification when you hit that button.

Bootstrap buttons in active state.

So if a button is meant to be pressed, the question now is, what does it do? Without prior information, you would have no idea what a button does. Especially if you have plenty of buttons together, labels and colors become important visual cues to differentiate buttons. Putting labels above or below the actual buttons work fine in real life situations, but it’s not so common on websites. Most web buttons are efficient in having the label on the button itself. Therefore, a perfectly circular button is no longer feasible since well, words are long. To fit words more efficiently, longer rectangular buttons are much more popular for websites.

Buttons are important. They are call to actions, visitors use it to buy stuff. Buttons make money.

Our observations so far as to what a button should look like is insightful, but not always applicable. Modern flat designs will forsake all those characteristics and just put a colored rectangle with text in it to pass as a button. Nothing wrong with that as long as it works! The most important thing is that the button is meant to be pressed. If a visitor to your website clicks on your button, then it’s job its done. Our goal is to make it irresistible for users to click on it. Buttons are important. They are call to actions, visitors use it to buy stuff. Buttons make money. In that sense, I feel that the most important characteristic of a CTA button is that it stands out from the rest of the page.

The search for the perfect button

There are all sorts of buttons out there, from shiny web 2.0 buttons to flat buttons to ‘ghosts’ buttons (I use them on my own website!). While the best button visually will come down to taste and preference, the absolute perfect button is the one that does it’s job best. And in the web world, that means getting clicked on. The proper way to measure buttons is by A/B testing and looking at conversion rates. Since I don’t have millions of visitors and a research team, let’s just look at some sites who does: Amazon, Ebay, and Apple. These guys have definitely spent countless dollars and manhours into researching their conversions and crafting their buttons. Let’s compare them and see what they have in common.

Lo and behold, they all have the characteristics we mentioned before: rounded shape, 3D feel, and they stand out from the rest of the page. Coincidence? I don’t think so. Remember, these guys have a lot riding on the conversion of these buttons. In the Apple example, the green button is pretty much the only brightly colored element on the page, also the only one with a gradient even though they are big on the flat design now. Amazon and Ebay is also interesting in that there are more than one button on the page. Even then, they have a primary button that they really want the user to click. In the case of Amazon, the ‘add to cart’ button is bright and yellow while the ‘add to wishlist’ button is just dull and white. Also interesting is the addition of a ‘cart’ icon on the Amazon button. Personally I love adding icons to buttons (especially my own icons), but it’s still not proven yet how it affects conversion so we’ll leave it in a gray area for now.

TL;DR

So to sum it up, the perfect website button has the following characteristics:

  • A rounded shape
  • Three dimensional effect
  • Labeled with call to action
  • Stands out from other elements

Leave a Reply

Your email address will not be published. Required fields are marked *