Loading Form...
Mar 28, 2011 | 8 minute read
written by Linda Bustos
The checkout process is a popular area of your site to test, and for good reason. When a visitor has added items to cart and clicks the "proceed to checkout" button, it's a good indication of purchase intent! But often carts are abandoned early in the process - even at the login screen. Your design and copy on this page have a major impact on whether customers figure out which option is right for them (sign in, create account or guest checkout) and make it smoothly through to the next step.
As I've written about before, Amazon and Sears' radio button approach is likely the "path of least resistance." But if you want to test for yourself, the following is an inspiration gallery of 4 different approaches to log in: the aforementioned radio button, two-option, three-option and expanded/one-page.
The radio button approach presents one option for all customers. It simply asks if the customer has a password (it should be indicated a password for the retailer, not any old email and password!). This solves the usability problem of the guest or new customer erroneously filling in the returning visitor fields. [Watch the video embedded in this post of a real usability test for an example of this problem. The second test subject believes she must fill in both the left and the right columns (sign in and create account) on the sign in page].
Sears
Sears' approach is very clean and simple. Capturing email in the first step ensures an abandoned cart can be remarketed to with triggered recovery emails. This also reduces the chances a new customer will enter an address in the returning customer box (user testing by the famed Jared Spool suggests the eye will go towards the first empty field).
The user can select "yes" if they have a Sears password already, or "no" if they're new and proceed to checkout where they can save their account details later.
Buy.com
Buy.com offers new customers the additional choice of creating an account during checkout or just proceeding as guest. In my opinion, adding more options will require more thinking from customers and ultimately lower conversion. But that would be an interesting test in itself.
Also included are alternative payments buttons below, which actually inflates the options to 6. This is quite a number of options, and it would be interesting to see the vertical stack tested against other layouts.
HSN
You always want to consider your individual business requirements when designing forms and pages. HSN can match a new web customer to a telephone purchase record, and offers that option in a very streamlined way.
First off, I'm not a fan of 2-panel checkout pages when the radio button approach exists. However, because there are no sacred cows and everything is up for testing, here are some things to keep in mind when designing.
Barnes and Noble
Button labels are important, as users often bypass text and instructions and read buttons or just begin typing in empty fields. "Checkout as Guest" and "Sign into your Account" are more descriptive call to action labels than "Begin Checkout" and "Sign In."
1-800-Flowers
I-800-Flowers' checkout buttons are labeled "continue as guest" and "sign in and continue," appropriately.
Staples
Bright, bold buttons with descriptive labels draw the eye.
American Eagle Outfitters
American Eagle's bold green buttons are large and in-charge. Interestingly, the fields are not white, which draws the eye to the button labels to read them. This reduces the chance of the customer filling in the empty field without thinking. Love it.
Northern Tool
Be careful when styling buttons. Northern Tool makes its returning visitors call to action much bolder and bigger than the sad guest checkout. Guaranteed the users' eyes will be drawn to the button and the open fields first. Some may not even "see" the guest checkout option.
CDW
Watch your placement of design elements that look like calls to action. Verisign's trust seal looks like a big button, and with this placement, competes with the tiny call to action buttons.
Office Max
Office Max effectively places the security seal to be visible but visually separated from the checkout buttons.
Newegg
I have a few issues with Newegg. The options are stacked vertically, with guest checkout presented underneath the sign in. My guess is more folks will try typing in the returning visitor area first. Also, the buttons are both labeled "Submit." (Tip: Never use "Submit." There's always a softer, more descriptive way to label a call to action!)
"Re-enter" fields are tricky. They protect against typos but inflate the number of fields, which makes the form appear more clunky. From a usability and security perspective - there's no reason you need to "hide" input for the password during account creation. The password is being created, not used to authenticate, so the user should be able to see the chosen password.
CVS
Bold, red headlines from CVS may be more effective than black headlines. They stand out to the "scanner," and help you select the right panel.
Target
Target walks the thin line with its thin, vertical layout. Guest checkout is confusing, as returning customers are referred to as "returning guests." Also, the guest option is below the returning visitor, and may be pushed very far below the fold. Though I do like this design for a mobile device, if it were scaled down in options.
Notice this is actually a 4-option login screen, though it looks like a 2-panel. You can log in with your account, an Amazon account, create a new account or checkout as guest. Oh my! (Be careful when styling headlines in shaded bars - they are subject to "banner blindness," which is why this looks like a 2-panel option at a glance.
Sony
Sony is the only example of the bunch that actually uses in-field prompts that prevent user input errors. If you have password rules and you don't specify them, guaranteed some users will trip up by not including a number or attempt a password that is too short.
Apple
Finally, if you must have secondary calls to action, style them in a subtle color so they don't compete with the primary buttons. (Interesting that Apple would include a "Cancel" button - most usability pundits recommend against this).
I'll refrain from comment on most of these designs because I believe a "Checkout as guest (you can save your information in an account later)" option kills two birds with one call to action. This messaging eliminates the need for 3 checkout options. Nevertheless, you can glean inspiration from the following top retailers for your test - if you want to test this approach.
JC Penney
Office Depot
Macy's
Cabela's
Walgreens
Hayneedle
Shoebuy
Best Buy
Best Buy deserves an honorable mention (or I should say, honorable exception), as its presentation of 3 options smartly uses a 2 panel layout and the call to action buttons are bright and bold enough to be non-confusion. Bonus happy face sticker for the value proposition for creating an account - earn rewards points.
I'm often asked my opinion on one-page checkout. Folks especially want to know if there's empirical data that one-page is better than multi-step. I give the stock conversion optimization consultant answer of "you just have to test it yourself" because...you really do.
That said, your one-page has a pretty good chance of beating your multi-step checkout *wink, wink.* However, we're talking about sign-in usability here. Every one-pager will provide the option for returning visitors to log in (unless you provide only guest checkout, in which case you can ignore this entire blog post).
Let's play a little game of "spot the returning customer login," shall we?
CompUSA
Toys R Us
Kohl's
Coward Shoes
From a usability standpoint, one-page - though beloved - can make the returning customer option more difficult to find, or it can be overlooked altogether. GAP's design, however, stands out as one that has thought this issue through.
GAP
The point of this article isn't to nitpick designs, rather to show you several examples of the different approaches out there. My commentary highlights things you should think through when designing your test versions, not necessarily things you should test.
How you approach your test depends on:
How much traffic your sign in page receives. (How many "recipes" can you afford to test in a reasonable time with your given traffic.) You don't have to test all approaches.
What approach you're using now. If you're already using one-page, you should consider testing it against the radio buttons. If you're using 3-panel, test against 2-panel, radio button and one-page, if traffic supports. Use your existing page as your control, rather than redesigning it along with test pages. This way you can quantify the impact the redesign has over the status quo.
I recommend an A/B split test first to determine which performs best (you can test A/B/C/D). Once you've found a clear winner, you can conduct further A/B or multivariate testing on your sign in page, or move on to another section of your checkout.
Avoid testing sign in design and number of steps in checkout at the same time. This makes it no longer an A/B test, but a multivariate, which will take longer to complete, and it will be more difficult to pinpoint why a recipe won when there is more than one variable at play.
Looking for help with your ecommerce strategy and site optimization? The Elastic Path research and consulting division is available to enterprises selling digital goods and services. For more information, visit us at http://elasticpath.com/ecommerce-consulting/ or contact us at consulting@elasticpath.com.