header.tasty-buttons
May 21, 2010 one comment

design, ui design

“Tasty Buttons” – An Anecdote with 16 Examples

by Mac Heller-Ogden

Growing up, whenever my family got a new gadget, appliance or vehicle I’d always be the first to push every button, turn every knob and flip every switch on the thing—even the ones I probably wasn’t supposed to touch. As a web developer, I find that I’m still the same way—I get a new piece of software or find a new online service and I immediately want to click through everything and get a “feel” for the application.

The thing about all this that interests me most is that I’m not alone in my love for all things interface—it seems nearly everyone loves to press buttons. How often have you been waiting for an elevator and watched the person next to you push the button a few dozen times? Pushing that button again and again isn’t going to speed up the elevator. You know that and yet I’m willing to bet that you’ve done it too. Am I wrong?

So, there’s something really satisfying about pressing a button. It’s something kinesthetic—the sensation of the button snapping into place—and auditory—the sound of the button clicking into place—but perhaps more significantly, it seems there’s some psychological tendency within the human mind that associates pushing a button with reward. Push the button, get a cookie. This brings me to the focus of today’s discussion—”tasty buttons.”

Once upon a time, I was fortunate enough to work with the great thinker, writer and speaker Frans Johansson. During a design requirements meeting, he told us he wanted the buttons to be “tasty.” By this, he meant that the button should look and feel very clickable. I was thinking of that meeting again today as I sat here cooking up some fine gourmet buttons and I realized how central that funny little idea has become to the way I think about button design.

So, what makes a button tasty? To help answer that, I’ve collected some of the tastiest buttons around (including a few of my own design) and included them below with “tasting notes” for each. Bon Apetité!

Gorilla State - Learn More Button
Taken from Gorilla State (http://www.gorillastate.com/)

The subtle flat border on this button frames the interior of the button very nicely—like the matte on a well-framed picture. The text of the bottom has a well-implemented inset effect that works to give even more realism to the button and the curvy arrow point at the end is a very nice little touch. Also, I find this yellow-ish orange to be a very tasty color. Simple button—high click appeal. 8/10

Basecamp - Upload Button
Taken from Basecamp (http://basecamphq.com/)

Like the first button, this button utilizes the text inset effect. It’s also a gradient button with a flat 3px border and a slight bevel, as we saw above. The major difference here is the introduction of an icon instead of a simple arrow point. Again, simple but tasty. 8/10

CSS Tricks - Demo and Download Buttons
Taken from CSS-Tricks (http://css-tricks.com/css3-gradients/)

Continuing the theme of the first two buttons, these buttons feature all the same design elements but also bring a bright flash of action-oriented color into play. 8/10

OH! Media - Case Study Button
Taken from OH! Media (http://www.ohmedia.ca/)

One last button of the same style as those found above—this time a sleek blue on black with a really nice inset arrow point. 8/10

Elegant Themes - Ad Button
Taken from a banner advertisment for Elegant Themes (http://www.elegantthemes.com/)

Here’s something a bit different. A unique texture, subtle shine overlay and tastful bevel give this button some character. The drop-shadowed white text on the warm red works well. Placing the button so that it overlaps the heading above it gives even more depth to an already rich button. 8/10

Firefox - Browser Controls
Taken from Firefox 3.6.3 running on OS X 10.6.3 (Snow Leopard)

These should be pretty familiar buttons to many of you and while the rest of the buttons in this line-up are from websites, I’m allowing in this one exception because I feel these buttons are a small piece of genius and are likely under appreciated. Every browser needs both a back button and a forward button, but really, how often do you use the forward button? Maybe occasionally, but I can almost guarentee you that you click that back button much more often. These buttons seem to know that as the back button is obviously designed to be the center of attention though still grouped appropriately with it’s counterpart. 9/10

13 Creative - Send Button
Taken from 13 Creative (http://www.13creative.com/)

Taking a step away from all these round cornered buttons, here’s a good example of a tasty button that laughs in the face of all the more traditional button design techniques. 7/10

Tres Amigos - Add to Cart Button
Taken from Tres Amigos World Imports (http://www.tresamigosworldimports.com/)

Similar to the above, this is another example of how you can create a great looking button without bevels and shading. 6.5/10

FormStack - Home Page Sign-up Button
Taken from FormStack (http://formstack.com/)

The wrap around edge is a great techinique for giving some depth to a button—the subtlely crafted drop shadow completes the effect. I also really like the emphasis of the word free here through added color and italics. The angle quote at the end gives it that extra bit of click-ablilty. 8/10

FormStack - Sign-up Panel / Buttons
Taken from FormStack (http://formstack.com/)

Sometimes it’s a button’s context that really makes you want to click it. Take these sign-up buttons for example—where is your eye drawn? Through color, size and context, the middle button has some really high click appeal. 8.5/10

Freckle - Sign-up Button
Taken from Freckle (http://letsfreckle.com/)

Cute and simple—it’s mostly the font that gives character to this little green button. Sometimes simple is better. 7/10

Daily Mile - Sign-up Button
Taken from Daily Mile (http://dailymile.com/)

The execution of some of the effects here seems a bit unpolished but I really like the almost subliminal placement and coloration of the word FREE. I think this is a particularly effect button shape as well. 7/10

Paramore Redd - Sign-up Button
Taken from Paramore|Redd (http://paramoreredd.com/)

The most elaborate button in our line-up, this one combines suble line work and shading with a nicely framed icon and some solid typography. Plus, it’s big size makes it all that much more clickable. 8.5/10

Tell Your Story Button
Taken from unpublished design by Pixel Dreamer (http://pixeldreamer.net/)

I created this button as part of a design that ended up getting shelved but I wanted to include it here to show a good example of a button that has a lot of character through it’s depth and shading but also in it’s typography. 9/10

Pixel Dreamer - Login / Contact Buttons
Taken from Pixel Dreamer (http://pixeldreamer.net/)

I designed these simple buttons over a year ago for Pixel Dreamer’s current website. They’re inverted (going into the page instead of popping out of it) and utilize a subtle but thick border as a rollover state. The simple icons add clarity. 8/10

Pixel Dreamer - New Website Contact Button
Taken from Pixel Dreamer’s new website (http://pixeldreamer.net/)

Just so you don’t walk away thinking I have something against square buttons, here’s an example from Pixel Dreamer’s newly designed website (yet to be published). It’s a very simple button and aside from it’s bright color, the font is really what provides the flavor here. 8/10


Written by

Mac Heller-Ogden

With over ten years of professional experience, Mac Heller-Ogden is a seasoned veteran in the field of custom web development, web design services, and social media marketing in Chicago and throughout the U.S.. As Pixel Dreamer's Executive Web Producer, Mac is both lead designer/developer and its leader. He oversees the production of all websites and applications, while also working to keep the Pixel Dreamer team strong, happy and motivated.


Comments:

  • esamek

    Excellent Examples Mac. I never saw the second to last button in this list. Very pretty, especially the gradient applied to the outside stroke of the button. Cool!