Boosting the e-commerce buy button

Thomas Z. Ramsøy

March 26, 2021

While e-commerce is on the rise across the globe, the industry has come to realize that we need good design principles from this new "store" experience. As the customer journey is very different between online stores and brick-and-mortar stores, we show how you can start by boosting the buy button.

The surge of e-commerce

We are getting more used to purchasing goods online. Especially after the COVID-19 virus pandemic, online sales have been surging over 30% in the US alone. Indeed, estimates show that e-commerce businesses should anticipate a 265% growth rate, from $1.3 trillion in 2014 to $4.9 trillion in 2021!

Still, there are many challenges ahead in ensuring that online shoppers actually make their choices. Our understanding of online shoppers is still in its infancy, but it is clear that our models from in-store purchasing do not apply directly to e-commerce.

Product liked, purchase not happening

As many e-commerce owners know, shoppers are spending a long time browsing their pages and products, but very often don't put an item in the basket. Sometimes this is because it's not the right product or the right price, or some other reason.

What we have seen is that often, the online store misses a crucial opportunity: the purchasing trigger! When looking, you can see that the buy button is there, so why are so few using it? Here, a bit of visual attention magic is needed.

When the buy button fails

Below you can see a website that shows the typical pattern where visitors inspect the product for a long time but never put it in the basket.

A quick analysis shows us what's wrong:

Visual saliency to the buy button ("Add to bag") is not sufficiently high on this website. This means that visitors are not likely to see the buy button, and may end up inspecting the product but not feel triggered to act.

As you can see, the buy/basket button is not standing out in the analysis. From this, it's clear that it will not get automatic attention, and visitors need to actively look for it. This is a failed trigger: a button that is very visible will also trigger an action.

Boosting the buy button with visual saliency

To add visual saliency to an element, a few tricks can be used:

  • Increase the contrast and sharp angles, but with consideration to overall look and feel.
  • Try out different color combinations.
  • Make the background a single color and/or blurred out.
  • Reduce the number of competing elements.
  • Rearrange and distance the important element from other things.

After trying many different iterations, you can end with a result like what you see below:

Neurons visual saliency analysis of an updated button positioning. Here, you can see that the buy button has a much higher visual saliency, though without drawing away attention from other assets. This was achieved by moving the buy button to an area that already had much attention: the price and product information.

Complexity is key

When considering adding focus to certain elements, it's important to also consider the background. As in the examples shown here, the main website has a very simple background and overall design with few visual elements. When using this type of interface, the changes one makes will typically have a very strong and noticeable effect.

Things often look different if you have a busy with a more busy background, and with many visual elements. Here, changes are more likely to make more subtle differences in visual attention. To make single elements stand out more, there are mainly two maneuvers you can make:

  1. Increase visual saliency of the element itself
  2. Decrease the complexity of the surroundings

Both these changes have more dramatic effects on attention towards the desired element. But they come with potential drawbacks. If you boost visual saliency to an element such as a product or a checkout button, it will typically look more dominating and even misplaced on the page. Conversely, if you reduce the overall complexity of the website, the overall look and feel of the website might be different from what you want.

Typically, a combination of both should be considered, such as both reducing context complexity and increasing element saliency.

But there's another trick that is possible: make a bit of space for your element and frame it in.

Below, you can see how Amazon does it: they are framing the action buttons with a light gray line. The gray is faint, but effective enough to make this space stand out and get more attention.

The Amazon choice frame is a very well-made callout solution for e-commerce. Here, a light gray frame delineates the orange (highly salient) buttons from the rest of the page. This makes us automatically look at this region as something separate and in its own right. Amazon often makes this even better by using a 1-click purchase decision.

Optimize attention to the buttons on your website with Neurons AI analysis tool! Book a demo today to see how it works.

Boosting the e-commerce buy button

Neurons Icon

Ready to drive revenue with creatives that work?

Get a free demo
ArrowRight