Discover what Attention Insight MCP can do for your workflow ?
add to cart button

Is Your Add to Cart Button Being Noticed? A CTA Visibility Case Study

Ask an e-commerce owner which element on a product page absolutely needs to be seen, and the “Add to Cart” button would probably be near the top of the list. It is the action that moves a visitor from considering a product to taking the next step toward purchase.

Baymard Institute treats making the primary Add to Cart button prominent and unique as an essential product page guideline. Its research on button design points to a similar gap further down the funnel: 48% of e-commerce sites neglect at least one element needed to draw attention to the primary checkout button, such as prominence, styling, placement or microcopy.

And perhaps that is exactly the problem: CTA button visibility is so fundamental that it is easy to take for granted.

The button is there. It has a color. It looks clickable. Surely people see it.

But CTA optimization may receive less attention than we assume. In a July 2026 analysis of UI experiments detected across hundreds of companies, Lazyweb Research identified the CTA as only the fifth most-tested page area, while the hero was tested nearly twice as often.

So what if the element we rely on to drive the next step is quietly losing the competition for attention?

For an e-commerce marketer, that possibility may be scarier than The Shining. But unlike a horror movie, this is something we can actually investigate.

In this case study, we look at a desktop product page from ŌMAKA Naturkosmetik, a German natural cosmetics brand specializing in vegan care for curly and Afro hair. The page sells a hair care set for curly and Afro hair. Using Attention Insight’s predicted-attention data, we examine how visible the CTA is and identify hypotheses worth testing.

1. What should visitors notice first?

There is no research-backed order of attention that fits every product page. The right hierarchy depends on what the page needs to achieve.

For a product page, a practical starting point is the sequence of questions visitors need answered before they buy:

What is this? How much does it cost? How do I get it?

Defining the expected order before looking at the results keeps the analysis honest: the maps test the hypothesis instead of shaping it.

2. Where does attention go?

add to cart button

The page was scanned in Current view with the Attention Insight Chrome extension V3.

The Attention Heatmap shows the strongest predicted attention around the price and the solid shampoo box. The logo also attracts a moderate share of attention.

The “Add to Cart” button tells a different story. It sits in a cold area. An Area of Interest around it, created in the full analysis, shows that the CTA receives 2.0% of predicted attention in this view.

The product and price receive the attention expected from the first two steps. The question is whether attention reaches the next step.

3. What gets noticed in the first seconds?

add to cart button

The Focus Map makes the gap easier to see.

The product title, price, variant selector and product images remain visible, meaning they are more likely to be noticed in the first seconds. Most of the Add to Cart button stays under the dark overlay.

That does not mean visitors will never find the button. It means the button is unlikely to be among the first elements they notice.

The product and price are likely to be noticed. The next step is much less obvious.

4. Is contrast part of the problem?

add to cart button

The Contrast Map, available in the full analysis, adds another clue.

The CTA zone is marked at 2.4, below the 3:1 minimum the tool uses for non-text elements. For comparison, zones around the product title reach values of roughly 9-20, while the price and supporting information sit mostly around 6-8.

Visually, the result makes sense. The button follows the brand palette, with light, widely spaced lettering on a tan background. It fits naturally into the design, but it does not strongly separate itself from the surrounding elements.

Contrast and attention do not always move together. A CTA can have strong contrast and still receive little predicted attention.

Here, however, both signals point in the same direction: low contrast and low predicted attention.

That makes contrast a useful first variable to test.

5. Or is something else overshadowing the CTA?

Contrast is not the only possible explanation.

The Add to Cart button may also be losing attention to stronger elements around it. The Attention Heatmap shows the price and product image taking the strongest predicted attention.

On a product page, that is not necessarily a problem. Those elements help answer the first two questions visitors are likely to have before buying.

The Focus Score of 77 also suggests that attention is relatively concentrated rather than broadly scattered.

So the pattern does not look like attention is simply spread evenly across too many elements. Attention is relatively concentrated; the CTA is just not among the strongest elements receiving it.

The analysis alone cannot determine whether contrast or competition is the main reason. But contrast offers a clear variable that can be changed without disrupting the rest of the page hierarchy.

6. What is the hypothesis?

The analysis points to a straightforward hypothesis.

  • Observation: The CTA receives 2.0% of predicted attention and sits in a low-contrast zone, while the price and product image attract the strongest attention.
  • Hypothesis: Increasing the CTA’s contrast, for example with a darker button fill or a bolder, higher-contrast label, may make the next step easier to notice without moving away from the brand palette.

Keeping the change focused matters. Changing one variable at a time makes it easier to understand what produced the difference.

7. How can the change be checked?

After changing the CTA, scan the page again using the same view and screen width.

The most useful comparison points are the Attention Heatmap, the Focus Map, the Contrast Map, and the CTA’s Attention %.

If the CTA becomes visible in the Focus Map and its share of predicted attention increases while the product and price remain prominent, the new version is closer to the intended hierarchy.

Ready to check your CTA? Install the extension and run your first scan.

About Author

See design through the
eyes of users

Optimize visuals, validate concepts, fix attention errors, and prove design decisions to stakeholders before launch.

Discover attention metrics
for your design

Get clear recommendations to improve
News & updates
Subscribe to our newsletter
Days
Hours
Minutes
Seconds
Subscribe to the FIGMA HERO monthly plan and get 40% off with code AT40 for next 12 months. Offer ends September 30 at 23:59 (UTC+2). How do I apply discount?