Barnes and Noble - Spiralyze

http://www.barnesandnoble.com/ Specialty/Other 4-Page 113 seconds

Barnes and Noble implements a four-page checkout, with pages for shipping, delivery options, payment, and review. The biggest opportunity for improvement for Barnes & Noble's checkout would be to condense it to a single-page checkout and make guest checkout the default mode.

Checkout Time Benchmark        Best Practice Heatmap        Detailed Walkthrough

Layout: 72% Layout: 72% Usability: 63% Usability: 63% Data Input: 45% Data Input: 45% Cart Conversion Loss -6.8%

Checkout Time Benchmark

Checkout Time in Seconds
(Shorter is Better)

Best Practice Heatmap

The Barnes and Noble Desktop Checkout complies with 60% of our recommended best practices.

Single-Page Checkout

Barnes and Noble implements a four-page checkout, with pages for shipping, delivery options, payment, and review.

Reduce Perceived Form Length

Reduces the perceived length by layering fields, but labels the fields above.

Intuitive Layout

Mostly conventional; phone and company in the address field interrupt the normal flow from name to address.

Simplify Multi-Page Checkout

Barnes and Noble simplifies the multi-stage checkout with prominent continue buttons, a simple navigation, and an always-visible step summary.

Standardize Look and Feel

Checkout design thematically mirrors the main site.

Suppress Store Navigation

Barnes and Noble leaves only its logo as a clickable way back to the cart.

Browser and Device Compatibility

Adapts well to mobile browsers and stretched-out desktop browsers.

Make Progress Obvious

A clear navigation allows the user to quickly grasp his position in the checkout.

Guest Checkout Default

Barnes and Noble allows a recognizable guest checkout option, but forces customers to actively choose it.

Buttons Provide Feedback

Responsive buttons when hovered over.

Highlight the Active Field

Barnes and Noble accentuates the active field with a dark green border.

Validate Correct Responses Inline

Barnes and Noble immediately notifies a customer about incorrect fields with a red border, but neglects validating correct ones.

Auto-Format Numerical Fields

No numbers are auto-formatted.

Limit Data Inputs

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

Offer Help Prominently

The footer offers some customer service options; however, a customer must leave the checkout to access these, rather than being able to view them on the page itself.

Display Clear Error Messages

Error is explained clearly, and incorrect fields are highlighted

Match Shipping and Billing by Default

Matches shipping and billing addresses by default.

Trim Unnecessary Form Fields

Includes no unnecessary form fields.

Auto-Populate Address

Fails to autopopulate address.

Clear Shipping Options

Shipping information is given; however, carrier name is not provided.

Abandonment Emails

No post-purchase email was received.

Store Zip Code from Shipping Calculator

Zip code not saved from store selector.

Provide Cost Breakdown

Indicates full price breakdown, with estimates for tax and shipping, throughout the entirety of the checkout.

Emphasize Free Things

Writes "Free" and mentions the discount, but does not highlight it enough.

Detect Card Type

Automatically recognizes card type, but provides no indication to the user of doing so.

Provide Prozac

Barnes and Noble fails to reassure the customer before the final purchase.

Suppress Coupon Field

Gift card and coupon code entry field is prominent in the checkout - positioned at the top of the payment section.

Checkout Walkthrough

Click the thumbnails for an annotated walkthrough of Barnes and Noble Desktop Checkout's notable features.

Step 1

Login/Guest Selection

Step 2

Shipping Address

Step 3

Shipping Selection

Step 4

Payment

Step 5

Review

[]