fbpx

Boosting the e-commerce buy button

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 much 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.

But we also see hidden numbers. People who spend much time exploring the product but never put it in the basket.

Visitors inspect the product for a long time but never put it in the basket

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 NeuroVision analysis shows us what’s wrong:

Visual saliency to the buy button (middle right) is not sufficiently high. 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 act as an action trigger.

So something needs to be done!

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.
  • Distance the important element from other things.

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

NeuroVision visual saliency analysis of updated button design. Here, you can see that see that the buy button has a much higher visual saliency, though without drawing much from the main products. This shows a good priority between product and action attention.

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.

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.

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.

On the right side, you can see how Amazon does it: they are making a light gray that frames in the action buttons. The gray is not strong but enough to make this space stand out and get more attention.

Join our mailing list

Subscribe to our marketing newsletter to get the latest tips and advice delivered to your inbox each month! 

Copyright © Neurons Inc 2019. All Rights Reserved

Scroll to Top