H&M - Spiralyze

http://www.hm.com/us/ Apparel 3-Page 153 seconds

H&M implements a three-step accordion process, with panels for account creation, delivery information, and payment. What could be a straightforward checkout is marred by multiple distractions and unnecessary fields.

The first page of the checkout is where most of the friction is. The entire navigation is still visible, account creation is mandatory, and unnecessary fields include a particularly pointless "date of birth" field. The apparent length of the form is also increased by the layout, which has a single column with one field per row. Cleaning up the distractions and extras would do well for H&M.

Checkout Time Benchmark        Best Practice Heatmap        Detailed Walkthrough

Layout: 56% Layout: 56% Usability: 63% Usability: 63% Data Input: 32% Data Input: 32% Cart Conversion Loss -8.5%

Checkout Time Benchmark

Checkout Time in Seconds
(Shorter is Better)

Best Practice Heatmap

The H&M Desktop Checkout complies with 50% of our recommended best practices.

Single-Page Checkout

H&M implements a four-step checkout, asking for personal information, delivery, and payment, all preceded by a login screen. Though the major components form an accordion, the final submission step lies on its own page, slowing down the checkout.

Reduce Perceived Form Length

H&M's use of one column and leaving each form field on its own line (including shorter ones like zip code) increase the perceived effort associated with the checkout.

Intuitive Layout

The form is mostly intuitive, but includes field like date of birth and secondary phone number that stray from checkout flow convention.

Simplify Multi-Page Checkout

The ease of navigating between steps and a top navigation is appreciated; however, the call to action buttons' colors blend in to the checkout's color scheme and fail to stand out.

Standardize Look and Feel

Checkout design thematically mirrors the main site.

Suppress Store Navigation

H&M leaves no clickable way back to the cart, suppressing all menus and even unlinking its logo.

Browser and Device Compatibility

Good mobile site and desktop is good for all but the smallest of browser windows

Make Progress Obvious

The length of the H&M form ultimately pushes the accordion headers below the browser window, effectively hiding the navigation from view.

Guest Checkout Default

H&M mandates that customers create an account.

Buttons Provide Feedback

The main buttons respond clearly to a customer hovering over them.

Highlight the Active Field

Fields highlighted minimally by default browser settings.

Validate Correct Responses Inline

H&M displays error messages only corresponding to incorrect fields.

Auto-Format Numerical Fields

No numbers, including dates, are auto-formatted.

Limit Data Inputs

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

Offer Help Prominently

Prominent "Chat With Us" callout stuck to the right side of the browser.

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 secondary phone number, company name, and date of birth.

Auto-Populate Address

Fails to autopopulate address.

Clear Shipping Options

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

Abandonment Emails

No specific abandonment email sent.

Store Zip Code from Shipping Calculator

Zip code not saved from store selector.

Provide Cost Breakdown

Indicates clear cost breakdown, with all items, shipping, and tax, from the first step.

Emphasize Free Things

Free shipping and handling left as "$0" in the order summary. Free shipping received based on order total does not stand out.

Detect Card Type

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

Provide Prozac

No reassuring text accompanies the "Buy" button; rather, H&M warns that clicking "Complete Purchase" is final, an unnecessary warning that might cause anxiety.

Suppress Coupon Field

No gift card entry field readily visible.

Checkout Walkthrough

Click the thumbnails for an annotated walkthrough of H&M Desktop Checkout's notable features.

Step 1

Login/Account Creations

Step 2


Step 3