Delicious AJAX
A common issue with these forms is that a user is given a choice between logging in, or registering for the first time. A very simple way to approach this is found on GoMockingbird.com.

Once an email address is typed in, an AJAX call checks if your address is new or old. Visitors with unfamiliar email addresses (presumably new users) are immediately shown a slightly modified form (shown below), while old users don’t see any changes.

The simplicity is great; I don’t have to remember if I’ve logged in before or not. For any users without JavaScript, there needs to be a backup plan. There’s no impact on SEO as any form, AJAX or otherwise, is a roadblock to search engines.

Facebook Connect

Facebook Connect
A newer option in the logging in world is utilizing Facebook Connect. This doesn’t remove elements of your form, but for anyone with a Facebook account, they suddenly have a very simple option. Below Digg.com is asking whether I want to start with Facebook, or make a user name (even better, they could simply ask for my email address to start). I simply click the Connect button, a confirmation button appears, and I’m sent back to my Digg news.

If you’re going to accept Facebook Connect for user registration though, don’t demand other information right away. Lala.com, for example, had me sign in to my Facebook, and then asked me more questions. Ask later already, I just wanted to hear some damn song! The good news is they pre-populated some of the form.

In the Checkout Process
Many options are available for dealing with user login and registration in the shopping cart. It’s additionally complicated because you might also have guest checkout as a third option.
Amazon makes the new user registration process simplified by asking for a password later. In fact, they make you feel casual about it by saying “you’ll create a password later.” They even tell you it is “quick and easy,” which beats time-consuming and complicated.

On a multi-step checkout process like this, asking for minimal information is very important, as customers perceive the process as easy right from the start. If you’re looking at a single page checkout process, that is another opportunity to consider AJAX as well (http://www.getelastic.com/single-page-checkout/).

Conclusion
For login and registration forms, don’t bother users with a bunch of questions so you can try and sell them more stuff later. If you had a hot dog stand, you would just let a guy buy a hot dog if he wanted. You wouldn’t make him tell you his birthday and ask if he wanted to subscribe to your hot dog-related newsletter. Just get the visitor to complete the task; you can ask for other information later, in subsequent visits, or in an email. Depending on your site, consider the options made available with AJAX, Facebook Connect, and multi-step and single-step checkout processes.

[This post was contributed by my colleague and friend John, who is known all over the world for his brilliance, SEO knowledge, sense of humor, and undefeated mixed martial arts record. Thanks John! -nw]

My favorite entries are from:

• Nicholas Deakins
• Crate & Barrel
• REI
• Nike
• Ooga Zone

Good stuff… what are your favorites? Let me know by posting a comment – I look forward to your feedback!

Below is a list of 6 e-commerce button resources and a brief overview of each link.

This list from Get Elastic actually has 111 buttons!

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 searches for the perfect checkout button.

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

Dragnet's inspirational button collection.

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

Shopping Carts and Bags Icons

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

This article explores multiple ecommerce attributes.

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

This compilation focuses on ecommerce icons.

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!