Ecommerce Buttons

On a recent web exploration, I came across a write-up featuring “50 well designed apparel sites” and took note of something. Their ‘purchase this item’ buttons were all considerably different. But, among the variety pack of buttons (image at end of post), there were some distinct similarities.

Color

First up is the obvious – color. Of the 16 I randomly chose to write about (very scientific), 7 were gray-scale, 7 were red or pink, and 2 were oddballs. Red is an attention grabbing color, which helps the button stand out in a crowd. Most of the gray-scale buttons use high contrast to increase their attention grabbing abilities.

Function

Secondly, let’s talk about function. There are two main ways to label this type of button. One of which being, “Add to Cart” and the other being something like, “Buy Now.” Surprisingly, the trend with this set is 13 out of 16 featuring some form of “Add to Cart.” I think this detail, the function,  is the most important part of designing any button. There’s a very clear distinction between “add to cart” or “buy now,” and the button should reflect that.

The other interesting trend that pops up here is ‘add to cart’ functionality by way of size selection. This is new to me, and although I appreciate the innovation, I’m not sure leaving off an ‘add to cart’ or ‘buy now’ button is a good idea.

Graphic Element

These buttons feature a small variety of visual cues: cart icons, arrows, check marks, and 1 addition symbol. In short, a visual cue seems to be a common and useful trend for this type of button, of which, a shopping cart icon is the most popular.

Wrap-Up

Whatever you call it, “add to cart, buy now, add to bag, add to basket, etc …,” just makes sure it provides the user with 3 main things: a color that pops,  accurate functionality wording, and an optional (but helpful) graphic element.