Optimizing Checkout Login Screen Design

Ecommerce checkout design and usability have a significant impact on cart abandonment and conversion rate. Make sure you’re not losing customers at the first step.

The importance of offering guest checkout

For most ecommerce sites, required registration is a conversion killer. A US consumer survey by Baymard Institute reports 35% of shoppers bail when forced to create an account.

While the brand strength of sites like Walmart, Zappos and QVC may mitigate some of the friction of their required registration policies, even the giants risk losing digital sales when a guest option isn’t offered.

Unless you have a non-negotiable use case for required registration (such as B2B requirements), allow shoppers to checkout as a guest, ideally with the option to save their information in an account.

5 ways to design your first checkout step

In my own survey of 100 top ecommerce sites’ checkout flows (retailers that require checkout excluded from this sample), I found five general approaches to the first step of checkout: the 3-way, the 2-way, the Amazon, the Bypass and the Universal. What are the pros and cons of each?

The 3-way (17% of checkouts)

The 3-way approach welcomes returning visitors, and asks new customers to choose between checking out as a guest or creating an account.

If you’re a student of Steve Krug’s Don’t Make Me Think, you’re scratching your head why any ecommerce sites would force an ambiguous choice on customers — especially since most modern ecommerce platforms support the option of saving information to an account within guest checkout, making pre-checkout registration unnecessary.

Another pitfall of 3-way login is layout. Today, most sites are responsive, which collapse three-column layouts to a single column. When guest checkout is presented last, the option can slip far below the portrait fold (the bottom of the first screen when the phone is in portrait orientation).

In the example above (and below), guest checkout appears last. On mobile (below), guest checkout appears in the third scroll of the screen. Only mobile shoppers that are adventurous enough to scroll past both Sign In and Sign Up sections will discover it.

A 2-option sign in mitigates both UX issues.

The 2-way (39% of checkouts)

Favored by 39% of retailers tested, the 2-way carries the same mobile usability issue as the 3-way. Two-thirds of checkouts using the 2-way approach present sign in first, which frequently pushes the guest option below the portrait fold.

While this is fine on desktop, on mobile, presenting Sign In first on mobile typically pushes guest checkout below the first-screen fold.

Sign in and guest checkout both visible above the fold on desktop

Guest checkout hidden below the fold on mobile

Even if you have a higher percentage of returning customers than new, showing guest checkout first is the safer option. New customers want reassurance they can complete checkout as quick as possible, and returning customers appreciate guest checkout when they forget their password.

Think password recovery links are enough? 75% of Amazon customers who requested their account passwords never complete their order. A survey by Janrain found 92% of customers report abandoning a site rather than attempting a password recovery. Given shoppers’ aversion to creating new accounts, offering a quick guest checkout option is important for conversion.

If you’re using the 2-way option, it’s important to follow a few best practices.

1. Leverage labels

Our brains take shortcuts — that means we often gloss over titles and text blocks, and hone right in on juicy, colorful calls-to-action first. Label buttons specifically with “Sign In” and “Checkout as Guest” (or “Guest Checkout”) versus the less specific “Continue” or “Checkout.”

2. Ask for email first

Capturing email pre-checkout ensures cart recovery emails can be sent should anything go awry past step one.

3. Let customers know they can save their information in an account

Web users don’t always read. But when they do, it’s a good idea to inform them they can save their information in an account for faster checkout next time, and to bank any loyalty points you may offer.

4. Think mobile

Ideally, your design fits both returning and new customer options above the mobile fold.

If your eye is keen, you’ll notice the above design would be improved by presenting New Customers first, and labeling the returning customer button “Sign In.” Otherwise, this is a solid, mobile-friendly design.

5. Nix tabs

All checkouts should avoid hiding content, steps or options behind tabs. ASOS’ candy-colored social and email buttons call for all the attention. At worst, returning customers will sign up a second time with a social account because they overlooked their own login area. Can you spot it?

6. Double down on social sign-on

If you support social login, ensure you double-up and offer it for both new and returning customers.

And don’t forget that labels matter. Use the appropriate “Sign In” and “Join” labels for each section, respectively.

The Amazon (8% of checkouts)

Potentially the most profitable UX enhancement of all time, The Amazon is famously credited for salvaging $300 million in annual sales.

The Amazon puts both new and returning customers through the same paces, with everyone entering an email first (smart), and returning customers entering their password.

But proof that there are no sacred cows, even the ‘Zon itself has recently ditched this screen for a more mobile-centric view. For Amazon, minimizing the create account button is less of a risk — every man, woman, child and goldfish on Earth already has an account. Just because Amazon does something, doesn’t mean it’s best practice for everyone!

Nevertheless, a solid 8% of test checkouts embrace the “old Amazon” way, and mistakes are frequent.

For example, CVS’ guest option confuses customers with competing calls-to-action. What’s the difference between Continue and Create Account? (Remember, don’t make them think).

Vitamin Shoppe slips two options for first-time customers, and makes them wordy to boot (remember, don’t make them think).

Best Buy does better for clarity, but misses the email capture.

While the Amazon approach done right can be effective, it is a mobile world. If Amazon’s recent update is any indication, it should definitely be tested against alternative login approaches for responsive and mobile-specific ecommerce sites.

The Bypass (32% of checkouts)

One-third of checkouts skip the gated first step and take customers directly to the checkout flow, with the option for returning customers to sign in.

While this approach removes the friction of the 2-way and 3-way, it’s easy for the login area to go unnoticed due to “banner blindness.” Our shortcut-loving brains often begin filling form fields out without thinking. Web users rarely scan every pixel of a page, so placing the login box in a right rail (above) doesn’t give it enough visibility.

Jazzing up the box with color (below) doesn’t help. Our brains love white space, and this only makes the guest form fields grab stand out even more.

Placing Log In above the Shipping or Billing fields (whichever you present first) is your best bet. In the example below, the Log In call to action pops thanks to the bold colored background, yet is not so prominent that it distracts guest shoppers.

Of course, the best bypasses consider mobile context. Linens N’ Things’ responsive checkout presents tappable buttons, clearly labeled for both guests and registered users (with guests first) across all devices.

The drawback to the Bypass is that email addresses are rarely collected from guests early in the checkout process. 80sTees is a great example how to do it right.

The “Universal” (6% of checkouts)

Six percent of test sites use no login at all — all checkouts are guest checkouts. While this eliminates the first step, it does force returning customers to provide their information every. single. time. For this reason, it’s not ideal.

Which approach is best?

The goal of checkout’s first step is to successfully move new and returning customers to the next step, and not lose customers due to usability or design problems.

Regardless of the specific design you apply, keep the following best practices in mind:

  • Both new and returning customers should be able to quickly identify their login option above the fold, without scrolling, whether on desktop or mobile (especially returning customers within a “Bypass” checkout)
  • New customers should not be asked to decide between creating an account or using guest checkout (unless saving information in a new account is not possible with the ecommerce platform)
  • Buttons should be clearly labeled with specific text, versus “Continue” or “Checkout”
  • Email should be captured as early as possible in the flow

Of course, there’s flexibility to design (and test designs) for the first step of login. Stay tuned for our upcoming Ecommerce Illustrated chapter on checkout testing tips. Have you subscribed?

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *