<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Checkout Optimization &#187; Buttons</title>
	<atom:link href="http://www.checkoutoptimization.com/category/inspiration/buttons-inspiration/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.checkoutoptimization.com</link>
	<description>Increase your shopping cart conversion rate.</description>
	<lastBuildDate>Fri, 14 May 2010 22:14:50 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.8.5</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>E-Commerce Buttons: Inspiration and Resources</title>
		<link>http://www.checkoutoptimization.com/inspiration/ecommerce-buttons/</link>
		<comments>http://www.checkoutoptimization.com/inspiration/ecommerce-buttons/#comments</comments>
		<pubDate>Thu, 25 Jun 2009 14:15:29 +0000</pubDate>
		<dc:creator>Nicholas</dc:creator>
				<category><![CDATA[Buttons]]></category>
		<category><![CDATA[Inspiration]]></category>
		<category><![CDATA[buttons]]></category>
		<category><![CDATA[checkout]]></category>
		<category><![CDATA[ecommerce buttons]]></category>
		<category><![CDATA[shopping cart]]></category>

		<guid isPermaLink="false">http://www.checkoutoptimization.com/?p=46</guid>
		<description><![CDATA[750+ e-commerce buttons and icons. Includes add to cart &#038; checkout buttons, shopping bags, and other bits of design inspiration!]]></description>
			<content:encoded><![CDATA[<p>Every so often I&#8217;ll have a jolt of inspiration and want to complete a grand research project. I decided to catalog <strong>e-commerce buttons and iconography</strong> to serve as an inspirational source for myself and the users of this site. I never want to redo something that&#8217;s already been done (especially if it has already been done well!) and this is one of the times where the best I can do is to point to others.</p>
<p>Below is a list of <strong>6 e-commerce button resources</strong> and a brief overview of each link.</p>
<div id="attachment_49" class="wp-caption alignright" style="width: 310px"><a href="http://www.getelastic.com/add-to-cart-buttons/"><img class="size-medium wp-image-49" title="107 Add to Cart Buttons" src="http://www.checkoutoptimization.com/wp-content/uploads/2009/07/107-addtocart-300x210.png" alt="This list from Get Elastic actually has 111 buttons!" width="300" height="210" /></a><p class="wp-caption-text">This list from Get Elastic actually has 111 buttons!</p></div>
<h3><span style="color: #ff4500;"><strong>107 Add to Cart Buttons</strong></span></h3>
<p>This is definitely a dated post but it is always surprising to see how slowly big e-commerce responds to design evolution. In <a href="http://www.getelastic.com/add-to-cart-buttons/">107 Add to Cart Buttons of the Top Online Retailers</a>, the folks at <a href="http://www.getelastic.com">Get Elastic</a> catalog many buttons and take a look at how button design affects usability.</p>
<p>Of further note in this article is the concept of the add to cart button enhancing a brand&#8217;s persona. This is a great read and it set off a thought for me. When working with big retailers, it is rare to see them make the connection between brand and usability. More often than not these teams will look at a button and match a template, get inspiration from elsewhere, or just fit the brand. These methods can likely get you most of the way there, but the real wins will come with asking things like:</p>
<blockquote>
<ul>
<li><strong><span style="color: #000000;">How can I support my brand with this button?</span></strong></li>
<li><strong><span style="color: #000000;">What language or voice will my users respond to?</span></strong></li>
</ul>
</blockquote>
<p>&#8230; and applying them to the design process along with typical usability standards.</p>
<h3><span style="color: #ff4500;">111 Designs for Checkout Buttons</span></h3>
<div id="attachment_59" class="wp-caption alignright" style="width: 310px"><a href="http://www.pitstopmedia.com/sem/checkout-buttons-design"><img class="size-medium wp-image-59" title="Checkout Samples" src="http://www.checkoutoptimization.com/wp-content/uploads/2009/07/checkout-samples-300x187.png" alt="pitstopmedia digs into what makes a great checkout button." width="300" height="187" /></a><p class="wp-caption-text">Pitstop Media searches for the perfect  checkout button.</p></div>
<p>Pitstop Media collected and analyzed <a href="http://www.pitstopmedia.com/sem/checkout-buttons-design">111 Designs for Checkout Buttons</a>, documented overall themes and attributes and explored the trends behind design. In a follow up article, they noted the individual design elements for each button and created a <a href="http://www.pitstopmedia.com/sem/perfect-checkout-button">best of breed</a> checkout button based on the design patterns of this list.</p>
<p>I very much enjoy looking at data this way, and often recommend aligning with standards. It&#8217;s one of the principles behind this website. That said, it&#8217;s always important to remember that sometimes it is better to be the outlier. Just make sure you&#8217;re the outlier because you&#8217;re doing things better than everyone else.</p>
<h3><span style="color: #ff4500;">Collection of 140+ Buttons</span></h3>
<div id="attachment_66" class="wp-caption alignright" style="width: 310px"><a href="http://www.dragnet.se/webbdesign/button_collection.html"><img class="size-medium wp-image-66" title="Button Collection" src="http://www.checkoutoptimization.com/wp-content/uploads/2009/07/button-collection-300x192.png" alt="Dragnet's inspirational button collection. " width="300" height="192" /></a><p class="wp-caption-text">Dragnet&#39;s inspirational button collection. </p></div>
<p>Jonas at Dragnet harvested over <a href="http://www.dragnet.se/webbdesign/button_collection.html">140 buttons</a> for inspiration. This is a great place to look for &#8220;what fits&#8221; because it represents many, many styles of buttons regardless of their source or intent. As I noted earlier, e-commerce is typically slow to respond to new trends (even standards) in design, so if you&#8217;re looking for what&#8217;s next, it can serve you to look outside of the space you&#8217;re in.</p>
<p>A valuable aspect of all the collections thus far is the ability to click through on the buttons and see them in their natural habitats.</p>
<h3><span style="color: #ff4500;">300 Images from 1800 Sites</span></h3>
<div id="attachment_68" class="wp-caption alignright" style="width: 310px"><a href="http://www.intersmash.com/300images/"><img class="size-medium wp-image-68" title="Carts and Bags" src="http://www.checkoutoptimization.com/wp-content/uploads/2009/07/300-images-300x228.png" alt="Shopping Carts and Bags Icons" width="300" height="228" /></a><p class="wp-caption-text">Shopping Carts and Bags Icons</p></div>
<p>This page has an interesting story behind it &#8211; and a browse that surely took some time and effort to accomplish. Scroll to the bottom of <a href="http://www.intersmash.com/300images/">300 Images from 1800 Sites</a> to review the collection of shopping cart and bag icons.</p>
<p>Ro points out that the shopping cart images are not well done in comparison to the shopping bags, and I tend to agree. It definitely seems to be difficult to capture a shopping cart in that space. That said, perhaps it is the subject. I have seen (offline) some beautiful shopping bags, but I cannot remember ever seeing a breathtaking shopping cart. For some reason, when I picture a shopping cart, it&#8217;s in front of a Walmart or a grocery store of some sort. Regardless, the collection is definitely worthy of reviewing, the content is great, and the author&#8217;s hard work in compiling the images is much appreciated.</p>
<h3><span style="color: #ff4500;">Shopping Carts Gallery</span></h3>
<div id="attachment_72" class="wp-caption alignright" style="width: 310px"><a href="http://www.smashingmagazine.com/2008/02/07/shopping-carts-gallery-examples-and-good-practices/"><img class="size-medium wp-image-72" title="shopping-carts-gallery" src="http://www.checkoutoptimization.com/wp-content/uploads/2009/07/shopping-carts-gallery-300x176.png" alt="This article explores multiple ecommerce attributes." width="300" height="176" /></a><p class="wp-caption-text">This article explores multiple ecommerce attributes.</p></div>
<p>Smashing Magazine is a much-visited resource for me and they have multiple pieces of good content and inspiration in the ecommerce field. Technically, <a href="http://www.smashingmagazine.com/2008/02/07/shopping-carts-gallery-examples-and-good-practices/">this article </a>focuses much more than on e-commerce buttons, but in the spirit of this being an inspirational resource I&#8217;ve included it.</p>
<p>The examples explored represent the good, the creative, the innovative, and certainly the ugly and the wrong. For bonus inspiration, check out the related article <a href="http://www.smashingmagazine.com/2009/05/28/12-tips-for-designing-an-excellent-checkout-process/">12 Tips for Designing an Excellent Checkout Process</a>.</p>
<h3><span style="color: #ff4500;">Icon Sets for E-Commerce Designs</span></h3>
<div id="attachment_75" class="wp-caption alignright" style="width: 310px"><a href="http://sixrevisions.com/user-interface/30-high-quality-icon-sets-for-e-commerce-designs/"><img class="size-medium wp-image-75" title="20-01_ecommerce_icons_lead" src="http://www.checkoutoptimization.com/wp-content/uploads/2009/07/20-01_ecommerce_icons_lead-300x136.jpg" alt="This compilation focuses on ecommerce icons." width="300" height="136" /></a><p class="wp-caption-text">This compilation focuses on ecommerce icons.</p></div>
<p>Still following the icon theme, the final resource houses <a href="http://sixrevisions.com/user-interface/30-high-quality-icon-sets-for-e-commerce-designs/">30 sets of e-commerce icons</a> from various sources online. Some of the examples given are free, some are premium, and some aren&#8217;t quite up for grabs anymore but are still great to review. Featured images include: shopping carts, baskets, and bags, payment and finance icons, credit card logos, and coupon icons. The only thing I don&#8217;t see is something for shipping.</p>
<p>This is a top notch compilation. As a bonus link, the author also runs a site called <a href="http://cartfrenzy.com/">CartFrenzy</a>, which serves as a &#8220;Showcase of Excellence in E-Commerce Design,&#8221; a great inspirational resource to end on.</p>
<p>Hopefully you find this e-commerce buttons resource helpful and worthy of revisiting the next time you need some inspiration for your redesign and optimization projects. Please leave a comment below if you know of a site worth adding to this list!</p>
]]></content:encoded>
			<wfw:commentRss>http://www.checkoutoptimization.com/inspiration/ecommerce-buttons/feed/</wfw:commentRss>
		<slash:comments>6</slash:comments>
		</item>
	</channel>
</rss>
