Every so often I’ll have a jolt of inspiration and want to complete a grand research project. I decided to catalog e-commerce buttons and iconography to serve as an inspirational source for myself and the users of this site. I never want to redo something that’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.
Below is a list of 6 e-commerce button resources and a brief overview of each link.
107 Add to Cart Buttons
This is definitely a dated post but it is always surprising to see how slowly big e-commerce responds to design evolution. In 107 Add to Cart Buttons of the Top Online Retailers, the folks at Get Elastic catalog many buttons and take a look at how button design affects usability.
Of further note in this article is the concept of the add to cart button enhancing a brand’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:
- How can I support my brand with this button?
- What language or voice will my users respond to?
… and applying them to the design process along with typical usability standards.
111 Designs for Checkout Buttons
Pitstop Media collected and analyzed 111 Designs for Checkout Buttons, 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 best of breed checkout button based on the design patterns of this list.
I very much enjoy looking at data this way, and often recommend aligning with standards. It’s one of the principles behind this website. That said, it’s always important to remember that sometimes it is better to be the outlier. Just make sure you’re the outlier because you’re doing things better than everyone else.
Collection of 140+ Buttons
Jonas at Dragnet harvested over 140 buttons for inspiration. This is a great place to look for “what fits” 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’re looking for what’s next, it can serve you to look outside of the space you’re in.
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.
300 Images from 1800 Sites
This page has an interesting story behind it – and a browse that surely took some time and effort to accomplish. Scroll to the bottom of 300 Images from 1800 Sites to review the collection of shopping cart and bag icons.
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’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’s hard work in compiling the images is much appreciated.
Shopping Carts Gallery
Smashing Magazine is a much-visited resource for me and they have multiple pieces of good content and inspiration in the ecommerce field. Technically, this article focuses much more than on e-commerce buttons, but in the spirit of this being an inspirational resource I’ve included it.
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 12 Tips for Designing an Excellent Checkout Process.
Icon Sets for E-Commerce Designs
Still following the icon theme, the final resource houses 30 sets of e-commerce icons from various sources online. Some of the examples given are free, some are premium, and some aren’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’t see is something for shipping.
This is a top notch compilation. As a bonus link, the author also runs a site called CartFrenzy, which serves as a “Showcase of Excellence in E-Commerce Design,” a great inspirational resource to end on.
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!