Testing Checkout Sign-In Pages: Inspiration Gallery
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' 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 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.
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.
Two Checkout Options
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."
I-800-Flowers' checkout buttons are labeled "continue as guest" and "sign in and continue," appropriately.
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.
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.
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 effectively places the security seal to be visible but visually separated from the checkout buttons.
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.
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 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 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.
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).
Three and Four Checkout Options
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.
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.
Expanded (including one-page)
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?
Toys R Us
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.
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 firstname.lastname@example.org.