iHerb - Spiralyze

http://www.iherb.com/ Specialty/Other 5-Page 151 seconds

iHerb implements a five-page checkout, with pages for login, shipping address, shipping method, billing info, and review. This should be shrunken as much as possible, starting by eliminating the review page (nothing good happens there except checkout abandonments) and offering a guest checkout and reducing the friction caused by forced account creation.

Checkout Time Benchmark        Best Practice Heatmap        Detailed Walkthrough

Layout: 61% Layout: 61% Usability: 63% Usability: 63% Data Input: 64% Data Input: 64% Cart Conversion Loss -6.4%

Checkout Time Benchmark

Checkout Time in Seconds
(Shorter is Better)

Best Practice Heatmap

The iHerb Desktop Checkout complies with 62% of our recommended best practices.

Single-Page Checkout

iHerb implements a four-page checkout, with pages for shipping, payment method, billing info, and review.

Reduce Perceived Form Length

Form length is increased with poor layering (only using one column) and labelling the fields above.

Intuitive Layout

Mostly intuitive; the "country" field unconventionally starts the form.

Simplify Multi-Page Checkout

Iherb follows multi-page checkout principles, with prominent "Next" buttons, simple navigation, and an always-visible step summary.

Standardize Look and Feel

Checkout design thematically mirrors the main site.

Suppress Store Navigation

Although Iherb removed navigation back to the cart besides the logo, the "return to cart" option still exists.

Browser and Device Compatibility

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

Make Progress Obvious

Top navigation bar makes progress obvious.

Guest Checkout Default

iHerb requires that all customers create an account.

Buttons Provide Feedback

Buttons provide robust visual feedback.

Highlight the Active Field

Designates the active form field by animating the form field title to the top right corner.

Validate Correct Responses Inline

Informs only about missing fields, not correct or incorrect ones.

Auto-Format Numerical Fields

Credit card is autoformatted, but the phone number is not autoformatted.

Limit Data Inputs

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

Auto-Fill Compatibility

Somewhat compatible; in the name field, only first name autofilled, and address is not populated.

Offer Help Prominently

Gray "Have a Question" box sits at top of page, nothing else.

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

Google autopopulation features present.

Clear Shipping Options

Shipping information provided extremely clearly with cost, carriers, and helpful company logos.

Abandonment Emails

No post-purchase email was received.

Store Zip Code from Shipping Calculator

Zip code not saved from shipping calculator.

Provide Cost Breakdown

Indicates the cost breakdown throughout the checkout process.

Emphasize Free Things

Free shipping not strongly emphasized within shipping options or the price breakdown.

Detect Card Type

Automatically detects and displays card type.

Provide Prozac

No comforting text accompanies the final "Purchase" button.

Suppress Coupon Field

No prominent gift card entry area visible.

Checkout Walkthrough

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

Step 1

Login/Account Creation

Step 2

Shipping Address

Step 3

Shipping Selection

Step 4


Step 5