Zappos - Spiralyze

http://www.zappos.com/ Apparel Vertical Accordion 156 seconds

Zappos has an accordion checkout marred by forced account creation and poorly organized forms.

Forcing account creations adds the steps of creating a username and password, and is an immediate source of friction at the top of the checkout. Inside the checkout, fields are organized in a one-per-row way that makes the checkout feel even longer.

There are also multiple distractions, including an ever-present navigation bar and a highly visible coupon code field, both of which can tease customers away from the checkout process.

Checkout Time Benchmark        Best Practice Heatmap        Detailed Walkthrough

Layout: 44% Layout: 44% Usability: 56% Usability: 56% Data Input: 41% Data Input: 41% Cart Conversion Loss -9%

Checkout Time Benchmark

Checkout Time in Seconds
(Shorter is Better)

Best Practice Heatmap

The Zappos Desktop Checkout complies with 47% of our recommended best practices.

Single-Page Checkout

Zappos implements a vertical accordion style checkout, with steps for shipping options, shipping address, gift, summary, and order completion.

Reduce Perceived Form Length

The use of one column and no layering somewhat lengthens the forn.

Intuitive Layout

Form design mostly intuitive; shipping options given first disrupts the usual flow.

Simplify Multi-Page Checkout

Form design mostly intuitive; shipping options given first disrupts the usual flow.

Standardize Look and Feel

Checkout design thematically mirrors the main site.

Suppress Store Navigation

Zappos does not supress its default menu.

Browser and Device Compatibility

Responds well to all but shrunk desktop browser window.

Make Progress Obvious

Though Zappos' checkout is one page, it is vertically long, making progress difficult to ascertain.

Guest Checkout Default

Zappos forces customers to create accounts before purchase.

Buttons Provide Feedback

Buttons within the checkout respond well to hover.

Highlight the Active Field

Highlights the active field with a blue shadow.

Validate Correct Responses Inline

Only error corrected on the phone number field; no positive feedback given.

Auto-Format Numerical Fields

No numbers are auto-formatted.

Limit Data Inputs

Credit card, expiration date, and CVV form fields all accept punctuation, spaces, and other non-numerical characters as valid characters.

Offer Help Prominently

Offer of help somewhat hidden at the top of the screen, above the main checkout area. Not as prominent as possible.

Display Clear Error Messages

Error is explained clearly, and incorrect fields are highlighted

Match Shipping and Billing by Default

Users must actively select if they want their billing addresses to match their shipping.

Trim Unnecessary Form Fields

Includes no unnecessary form fields.

Auto-Populate Address

Fails to autopopulate address.

Clear Shipping Options

Includes no unnecessary form fields.

Abandonment Emails

No specific abandonment email sent.

Store Zip Code from Shipping Calculator

No specific abandonment email sent.

Provide Cost Breakdown

Cost breakdown only presented right above the "Submit my Order" button, not throughout the checkout.

Emphasize Free Things

Clearly mentions free shipping and discounts at the beginning of the checkout and within the cart summary.

Detect Card Type

Clearly mentions free shipping and discounts at the beginning of the checkout and within the cart summary.

Provide Prozac

Zappos includes some reassuring elements near (but not next to) the "Submit my Order" button, including their safe shopping guarantee as well as free/shipping returns.

Suppress Coupon Field

The gift card/coupon field is open and located visibly next to credit card entry.

Checkout Walkthrough

Click the thumbnails for an annotated walkthrough of Zappos Desktop Checkout's notable features.

Step 1

Login/Account Creation

Step 2

Address

Step 3

Payment

Step 4

Submit Order

[]
[]