What’s the biggest mistake I see among online retailers’ mobile sites?
“Invisible” guest checkout.
That’s guest checkout that exists, but is buried so far, it’s too easy to miss.
Why hiding guest checkout is terrible, just terrible
Hiding guest checkout in the first screen after this action amps the perceived difficulty of completing a purchase — a major source of friction, as it gives the impression that registration is required. And we know required registration is a major reason for checkout abandonment.
An Econsultancy survey found 26% of UK buyers would abandon checkout when forced to register, and Baymard Institute’s user testing found 30% did abandon checkout when forced to register. A poll conducted by Webcredible found 29% would abandon if presented with required reg. (And these are desktop experiences. Users may be even more unwilling to register on mobile where form filling is more tedious).
Sure, motivated customers will scroll in hopes to find guest checkout, but undoubtedly hidden guest options are hurting conversion. Even on desktop with guest checkout in view above the fold, our own testing found making guest checkout the default option lift conversion by 22%.
You have to make it very obvious how easy checkout is on your mobile site.
Design for Portrait First
On mobile (excluding tablet), limited screen size means you’re working with a short fold. It’s critical that guest checkout is visible in the first screen in portrait mode. 90% of mobile use is in portrait mode.
I’m amazed at how frequently the log-in screens of top online retailers’ mobile sites either hid guest checkout or presented a cut-off call-to-action.
Macy’s does explain that an account (using the unconventional label “profile”) can be created during checkout, but you can’t rely on customers to read instructions.
L.L. Bean’s near-identical layout has a more efficient use of space.
OfficeMax comes so close…but its “Continue As Guest” button is cut off (left), and a very simple tweak to the design would leave so much more room for the button (right).
Visual cues are king. Labeling CTAs as “Sign in and Checkout” and “Checkout as Guest” are your safest bets.
Avoid ambiguity. What is the difference between Express Checkout and Checkout? Remember, Web users don’t always read instructions.
Also avoid “Check Out Now.” This doesn’t clearly communicate Guest Checkout. (Again, Cabela’s guest option slips below the portrait fold, but the title Check Out Now does not suggest there’s a guest option below.
Buttons should clearly state what action they execute. “Continue” should be replaced by “Continue as Guest” / “Guest Checkout” and “Sign In” respectively. Though these buttons seem to clearly connect to their respective options, it takes more cognition to determine which button does what. Worst case, the second Continue button may be interpreted as password recovery.
Give guest checkout equal or greater prominence
The weighting of calls-to-action is important. Many A/B tests have shown that CTAs styled as gray buttons and hyperlinks get noticed and clicked less.
Guest checkout shouldn’t be treated as a secondary call-to-action, as Grainger, Office Depot and Sears present.
If anything, guest checkout should be the primary call-to-action. Because even registered customers want to use guest checkout. Sign In requires customers to remember both an email and password combination. Research by Janrain cites 45% of US adults admit to leaving a website instead of attempting to recover a password.
UIE’s user testing of Amazon’s log-in process revealed repeat customers had difficulty remembering both email and passwords, often recalling neither one. Only 40% attempted to recover the password. The rest abandoned or attempted to create a new account.
Even a site as frequented as Amazon has a customer-can’t-remember-password problem – up to 45% of its customer base has multiple accounts, some have 10 accounts!
Considering password reset requires checking email, such a process is painful on desktop, and devastating on mobile. Of the attempted password resets in the test, only 25% bothered to check email, and only 20% completed checkout.
A worthwhile test, if you’re not already displaying guest checkout first is to redesign it as such.
Ride the “Amazon”
Barnes and Noble uses the tried-and-tested Amazon approach that requires all customers, new and returning, to input an email address in the first step. This not only is simple but supports cart recovery efforts, especially helpful for mobile users if your ecommerce system can populate cart contents across device types.
Skip the log in splash screen
or, rather than use a sign-in splash screen, simply begin with the first checkout step, with an option for returning visitors to log in.
Kohl’s uses this approach, but its design is problematic. The CTA boldly says “Sign In,” while the instructions (which few will read) explain you can continue as a guest below. It’s not clear enough that the guest is in the appropriate checkout flow.
Another problem is Web users have a tendency to automatically try to fill in open fields they see. Some will try to begin their checkout process with the email field.
Victoria’s Secret doesn’t use open email/password fields. Both Sign In and PayPal options are clearly visible, but more fields are exposed, the customer can begin guest checkout (as it is labeled) right from that first step.
However, I suggest this screen could be redesigned to make it more clear that one is in the Guest Checkout flow, by using a bold label to separate it from Sign In and PayPal.
Sony also fast-tracks customers to the first step of checkout, showing a stepped progress indicator.
If you’re not going to use a log-in screen, make sure it’s very clear that a guest can begin checkout.
1. Test your checkout log in screen on major devices – you have no excuse. There are plenty of mobile device emulators you can use for free.
2. Ensure your guest checkout option is visible above the fold in portrait mode on each device.
3. If necessary, redesign your log-in screen to pull as much content above the portrait fold as you can.
4. Consider A/B testing alternative ways to present Sign In and Guest Checkout options. e.g. presenting guest checkout first, skipping the splash screen, trying the “Amazon” approach, or changing call-to-action labeling and color.