HSN - Spiralyze

http://www.hsn.com/ General Retail 3-Page 109 seconds

HSN uses a middle-of-the-pack 3-page checkout. Individual forms are designed well, helped by layered fields and labels inside the fields. This layout results in a clear, accessible checkout process. While the layout is smooth, functionality is lacking. There is no auto-fill implemented for address, and form data is not accepted robustly or live-validated.

HSN could simplify the checkout by condensing it to a single page, and by smoothing out the process with functional implementations. Including but not limited to: auto-fill compatibility, live field validation, and more robust input acceptance.

Checkout Time Benchmark        Best Practice Heatmap        Detailed Walkthrough

Layout: 89% Layout: 89% Usability: 38% Usability: 38% Data Input: 55% Data Input: 55% Cart Conversion Loss -6.7%

Checkout Time Benchmark

Checkout Time in Seconds
(Shorter is Better)

Best Practice Heatmap

The HSN Desktop Checkout complies with 60% of our recommended best practices.

Single-Page Checkout

HSN implements a three-page checkout, with pages for login, shipping/payment, and order review.

Reduce Perceived Form Length

Reduces the perceived length by layering fields and labelling them inside.

Intuitive Layout

Form ordering is intuitive and expected.

Simplify Multi-Page Checkout

Effectively implements a one-page checkout, making it easy to scroll and view various stages during the checkout process itself.

Standardize Look and Feel

Checkout design thematically mirrors the main site.

Suppress Store Navigation

HSN hides its default menu, leaving only its linked logo as a way back.

Browser and Device Compatibility

Responsive design handles both mobile devices and large screen desktops adequately.

Make Progress Obvious

Makes completion status obvious with a progress bar at the top that fills in as the customer completes pages.

Guest Checkout Default

HSN allows customers to guest checkout, but fails to make it the default option.

Buttons Provide Feedback

Buttons do not respond to user interaction.

Highlight the Active Field

Fails to highlight the active field in any manner.

Validate Correct Responses Inline

No validation of responses whatsoever.

Auto-Format Numerical Fields

No numbers are auto-formatted.

Limit Data Inputs

Credit card, phone number, zip code, and CVV form fields all accept punctuation and spaces as valid characters.

Offer Help Prominently

Customer service helpline is prominent in header

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

Sends abandonment email with call to action and accompanying discount.

Store Zip Code from Shipping Calculator

N/A - No shipping calculator / early zipcode entry opportunity present.

Provide Cost Breakdown

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

Emphasize Free Things

Does not highlight the discount or the free items in any way, leaving free items as "$0.00."

Detect Card Type

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

Provide Prozac

No comforting text accompanies the final "Purchase" button.

Suppress Coupon Field

Gift card entry area left highly visible and accessible in the last step of the checkout, enticing customers to leave the checkout and hunt for discounts.

Checkout Walkthrough

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

Step 1

Login/Account Creation

Step 2


Step 3

Address/Billing (cont'd)

Step 4