Suppress Store Navigation - Spiralyze

Suppress Store Navigation

Layout High Priority 10% Adoption 10 Seconds Saved

Don’t distract users when they are trying to giving you their money – Once in the checkout, remove distractions.
Conversion Opportunity 0.6%

Once the user has started the checkout process, your website’s goal is to usher them quickly through the checkout, and let them give you their money. Don’t distract them from that. If you rich aunt Augusta was telling you about the trust fund she is setting up for you, you wouldn’t change the subject.

A sales clerk at Nordstrom would never tell a customer in the checkout line with an armload of Prada about all the great stuff they might have missed in the sale rack. The customer might go look, but now they’re further from checking out. Then they get that phone call saying Little Timmy fell down a well and they need to leave immediately, and your sales clerk is eating Ramen tonight.

The same applies to websites. Your user is sitting at home getting ready to enter their credit card number, but then they notice the sale category in your navigation bar that they didn’t see earlier. So they leave the checkout to look. Then the doorbell rings, or their enthusiasm fades, and cart is abandon.

Don’t try and distract your users from checking out, or you might succeed.

Cutting the nav reduces distractions and thus reduces checkout abandonments.

Usage

Eliminating distractions is Web Design 101. When a user reaches a checkout, get rid of your navigation bar. No category links, not “continue shopping” buttons, and no sales/ads that take them away from the checkout page.

Most sites still leave a shrunken logo that links to the homepage and a discreet cart icon that sends users back to the cart. In some instances, sites use a text link to the effect of “Return to Shopping” or “Return to Cart.” Anything more than this is just encouraging users to leave the cart. This like a brick and mortar store putting a sign in the checkout line that says “Hey, wanna get out of line and go look around some more?” Don’t do that.

Of course, the worst offenders leave their entire header with a navigation bar and their current promotion intact throughout the checkout. This is nothing more than a distraction that will result in fewer conversion.

Home Depot removes their navigation during checkout. All that is left in the header is a single Home Depot logo that links to their homepage.

Kohl’s hides their normal navbar, but leaves a text link in the top left labelled “Continue Shopping.”

Adoption

0
20%
40%
60%
80%
100%

Suppress Store Navigation has an 10% adoption rate among our benchmark group.

Best Practices

Hide Everything

Hide EVERYTHING that could distract users from giving you their money. Your navigation bar should be completely missing from the checkout, as should any ads or upsells – keep those for the cart page or sooner.

...Including the Cart

Even the cart should be hidden. It's another chance for the user to go backwards and change their mind.

Shrink Any Logos and Icons

Leaving a linked logo and a cart icon is understandable, but it’s important to shrink these and make them subtle. Don’t encourage your user to get distracted.

Examples

Good

Newegg Example

Newegg’s checkout page header is empty but for a logo. No distractions here.

Etsy Example

Etsy removes all aspects of the header besides a linked logo.

Okay

Kohl's Example

Kohl’s smartly removes their nav bar, but leaves a prominently located “Continue Shopping” link.

Bad

Forever 21 Example

Forever 21 leaves their entire navigation bar intact throughout the checkout. They’re just begging for customers to get distracted and leave the checkout.