Home Depot - Spiralyze

http://www.homedepot.com/ Home Goods 2-Page 110 seconds

Home Depot follows 73% of Desktop Checkout Best Practices. The biggest opportunities to reduce friction and cart abandonments are in making the guest checkout the default, and by better using space on the customer information page to reduce the perceived effort required to check out.

There are no distractions or unnecessary fields in Home Depot's checkout - the navigation is removed, minor fields like promo codes are hidden, and forms are ordered intuitively and as expected. That said, forms can still be re-organized to feel shorter for users, by taking up less vertical space and placing the field labels inside each field. There is also a lack of clear shipping information aside from the cost, as well as a lack of any reassurance or "Prozac" near the final "Place Order" button.

Checkout Time Benchmark        Best Practice Heatmap        Detailed Walkthrough

Layout: 83% Layout: 83% Usability: 75% Usability: 75% Data Input: 64% Data Input: 64% Cart Conversion Loss -4.4%

Checkout Time Benchmark

Checkout Time in Seconds
(Shorter is Better)

Best Practice Heatmap

The Home Depot Desktop Checkout complies with 74% of our recommended best practices.

Single-Page Checkout

Home Depot implemented a 2-page checkout: one page for login/guest checkout, and a second page for shipping and payment info.

Reduce Perceived Form Length

On the shipping page, having phone, email, and ZIP on different lines increases the form length and perceived effort.

Intuitive Layout

Form ordering is intuitive and expected.

Simplify Multi-Page Checkout

Home Depot follows multi-page checkout principles, with prominent "Continue" buttons, protection from errors eating form data, and a progress indicator.

Standardize Look and Feel

Design fits thematically with the rest of the HomeDepot.com website.

Suppress Store Navigation

Home Depot hides its default menu, leaving only its linked logo as a link back.

Browser and Device Compatibility

Home Depot follows multi-page checkout principles, with prominent "Continue" buttons, protection from errors eating form data, and a progress indicator.

Make Progress Obvious

With only two pages, Home Depot makes progress apparent for users.

Guest Checkout Default

Target allows customers to either log in or guest checkout, but fails to make the latter the default option.

Buttons Provide Feedback

"Place Order" has no hover effect, but responds to clicks. It is greyed out until the form has been fully completed.

Highlight the Active Field

Active form fields get a bolder border around them.

Validate Correct Responses Inline

Home Depot informs users about form errors, but does not validate correctly filled forms.

Auto-Format Numerical Fields

Phone number and credit card numbers are auto-formatted appropriately.

Limit Data Inputs

Form field discards extra spaces/punctuation if unnecessary.

Offer Help Prominently

Live support is visible, but tucked into the bottom right corner of the screen. It might not be as obvious on a larger screen.

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

No wholly unnecessary fields are present.

Auto-Populate Address

Auto-populates via zip code, and also as the user begins typing in the address bar.

Clear Shipping Options

Little information given about shipping other than cost.

Abandonment Emails

No post-purchase email was received.

Store Zip Code from Shipping Calculator

If zip code is required for item availability, the relevant shipping address fields are auto-populated.

Provide Cost Breakdown

Price breakdown displayed in full.

Emphasize Free Things

In "order summary," free shipping option should be made more obvious - not immediately apparent that there was free shipping.

Detect Card Type

Card type automatically recognized.

Provide Prozac

No reassurance before final "Submit Order" button.

Suppress Coupon Field

Option for gift card / store credit hidden behind link.

Checkout Walkthrough

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

Step 1

Login/Guest Selection

Step 2

Shipping Address

Step 3