Results: With or without the sticky “add to cart” button?

With sticky "add to cart" button

Click here to enlarge

Without sticky "add to cart" button

Click here to enlarge

With or without the sticky "add to cart" button?

Loading ... Loading ...

Difference Between Versions:

Version A – With sticky “add to cart” button
Version B – Without sticky “add to cart” button

Note, original images were in dutch. The button text has been translated in the screenshots provided


Key Performance Indicator (KPI): 

Completed orders


Test Goal:

Increase the number of shoppers completing a purchase

 

Traffic Source:

Mobile visitors from direct, search, referral, organic, paid, affiliate, social, and existing email list

 

Audience: 

Mostly females visitors between 25-34 years of age, but also a large group of customers in the 55-64 age range

 

Organization: 

Miss Etam - a popular Dutch women's fashion retailer

Sign-up for the newsletter to get FREE A/B tests and more valuable content delivered to you every other week.

I agree to the Terms & Conditions.

Become a More Successful Digital Marketer

Pro Members get exclusive access to the full library of Archived Tests, helpful resources, plus personally connect with industry experts to get your specific questions answered. Get the Pro Advantage

Get Your A/B Test Featured!

Have your A/B test showcased. You'll get a great case study write-up, your logo prominently featured, linkbacks to your site, and social media promo, giving you valuable, free brand exposure. Submit Your Test
This week’s Featured Test is brought to you by:

Test Run By

De Nieuwe Zaak

Test Run For

Miss Etam

Test Run On

Visual Website Optimizer (VWO)

WINNING VERSION

A

Poll Results - The Best Guesses:

With or without the sticky "add to cart" button?

  • Version A
  • Version B
Loading ... Loading ...

Test Details & Background:

The Dutch digital commerce agency, De Nieuwe Zaak ran this smart shopping cart test for their client, Miss Etam, the popular Dutch women’s fashion retailer.

After conducting a data-driven analysis, the agency saw the drop-off rate on the Miss Etam’s product detail page was 8% higher on mobile, than desktop.

Wanting to close this mobile conversion gap, and encourage more mobile visitors to add products to their shopping cart, the testing team wondered if adding a “sticky,” or persistent, Call To Action (CTA), that scrolled with the user, would help.


Hypothesis:

The team suspected showing mobile visitors a sticky “add to cart” and size selector button would make the CTA more prominent, consequently making the action of adding products to the cart easier. As a result, more shoppers would add to cart, and ultimately go on to make a purchase.

However, the team also acknowledged adding the big, bold button on mobile devices could backfire. With such limited screen real estate, the added element could distract visitors, diminishing conversions.

So, decided to test what was best.


 

Test Set-up:

To determine the effect of adding the sticky CTA, an A/B test was set-up and ran on Visual Website Optimizer (VWO).

The study ran for 2 weeks. During this time, over 36,000 saw either version A or B. Traffic was split 50/50.

Half of shoppers were directed to the product detail page WITHOUT the sticky bar. This version featured the size selection option, and add to cart button below the product image. Visitors had to scroll to see it. The above the fold view looked like this:

miss_etam-version-b-lg

 

The other half of visitors saw the exact same product detail page, but WITH the added sticky size selection and “add to cart” button. The page looked like this:

miss_etam-version_a-lg

(Note, the original CTA was in Dutch. The “add to cart” text was translated to English for these screenshots).

Completed orders were tracked across both versions.


The Real-Life Results:

Winner: Version A – with the sticky CTA, stuck out as the big winner.

Simply adding the sticky CTA resulted in a 4.1% increase in completed orders, compared to the version without it.

Results achieved 91% confidence.


How Trustworthy Are The Results?

Given the fact the sample size was quite large (36,000 visitors), traffic was split 50/50, and the test was run for an adequate amount of time (2 weeks), the test appears to hold strong validity.

However, results only achieved 91% confidence. That means there’s a 9% chance the results would not hold true with a different sample population tested. That’s a fair bit of uncertainty. So, as a general best practice, testers should aim to achieve results with 95%+ confidence.


Analysis:

Why did adding the sticky CTA have such a positive impact on completed orders?

There’s likely a couple reasons:

1. Shoppers didn’t have to think

In the words of the renowned usability expert, Steve Krug, “don’t make me think!”

As soon as you make your shoppers exert a high cognitive load — and have figure out how to do something simple — like add a product to their cart, you’ve lost the battle. Shoppers may abandon the site because there’s too much conversion friction; in other words, they can’t quickly, and easily, figure out how to take the next step. So, they don’t.

Making key elements and actions, like add to cart buttons, highly visually prominent helps guide your users. Doing so clearly directs them on what to do next.

When the element is sticky, and persistently scrolls with the user, it can’t be ignored. So, users don’t need to fumble around, scrolling up and down, trying to figure out how to add the product to the cart. It’s right there in front of them.

Sounds obvious. But, making key elements exceedingly obvious is often overlooked by web designers who are far more familiar with the site than your customers will ever be.

When creating, evaluating, or testing effective design, remember: make it so your users don’t need to think.

2. The winning design followed a logical visual flow

In this test, moving the sizing selection option up, and making it sticky, with the “add to cart” button, made perfect sense. The visual design followed a logical flow.

Users could first scroll through the different image previews. Then, easily select their size, and, next, add the item to their cart. And, presto, go on to make a purchase.

In the alternative version, without the sticky bar, visitors had to several extra steps they had to combat. They had to first decide whether they wanted to thumb through the image previews — even if they have already used the image selector arrows to do so. Then, with sustained focus, they needed to scroll down and find the size selector. And finally, hunt for the add to cart button.

These additional steps may have created distraction, or confusion along the way.

That said, it was risky to add the sticky CTA button. It itself was a potentially distracting, and very prominent visual design element. It took up a lot of space on small mobile screens. And, could have dramatically diminished conversions, if shoppers needed more information before feeling ready to add to their carts.

It’s, therefore, always wise to test both if and where you should put a sticky CTA, on your mobile site.


Tangible Takeaway & Immediate Application

A sticky CTA on a product detail page can help prompt more browsers to become buyers. However, don’t just blindly place a sticky bar on your site. Test first to determine if and where a sticky CTA is optimal on your site.


What Do You Think?

Why do you think the version with the sticky CTA won? Share your thoughts in the comments section below.

Poll Results - The Best Guesses:

With or without the sticky "add to cart" button?

  • Version A
  • Version B
Loading ... Loading ...

Sign-up for the newsletter to get FREE gamified A/B tests and more valuable content delivered to you every other week.

I agree to the Terms & Conditions.

Become a More Successful Digital Marketer

Pro Members get exclusive access to the full library of Archived Tests, helpful resources, plus personally connect with industry experts to get your specific questions answered. Get the Pro Advantage

Get Your A/B Test Featured!

Have your A/B test showcased. You'll get a great case study write-up, your logo prominently featured, linkbacks to your site, and social media promo, giving you valuable, free brand exposure. Submit Your Test

4
COMMENTS: Tell Us Your Thoughts.

avatar
3 Comment threads
1 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
3 Comment authors
Deborah OSholomAkiva Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
Sholom
Member
Sholom

I chose B because I felt that the sticky add to cart was applying too much pressure on the customer.

Other Tests You Might Enjoy

Test Run By

De Nieuwe Zaak

Test Run For

Miss Etam

Test Run On

Visual Website Optimizer (VWO)