about me
my process
portfolio
BLOG
contact

How important is CTA placement on your commercial website

Article excerpt or TLDR:

Due to several UX laws and people's natural tendencies toward browsing in a certain way, these psychological tips can help you correctly place your CTA on a most visible spot, improving your conversion rate. From understanding that above the fold isn't a be all end all solution, applying Jacob's law and the Gutenberg principle into your CTA placement to understanding that what is written in the CTA also plays a significant part in people's click through rates, as well as the font being used. All these little details can add up and help you improve your CTA positioning and click through rate.

A button written call to action right next to a sign that reads: "How important is CTA placement on your commercial website"

If you’ve spent any time on the internet, you’re aware that a good call to action (CTA) can make or break a commercial website.

Every section of your site has the goal of enticing your visitor to either take action or leave the page and go elsewhere. However, many people underestimate the importance of CTA placement.

Having your CTA prominently displayed may be one of the most crucial aspects of your entire website.

Visitors tend to skim over a web page, missing essential information. This is especially true for commercial websites.

Many visitors, for example, hurry through your CTA and do not convert.

In this piece, I’ll show you precisely where you should position your CTA based on psychological triggers, as well as where you shouldn’t. We will also touch on other important aspects many often overlook.

What is a call to action and why it’s so important where it’s placed?

First, think about what you want from people who land on your site. What particular action do you want them to take while here? It’s not called a call to action for nothing!

So, make sure that when people land on your site, they instantly know what action you expect them to take and where they should do it.

If this is not clear enough, their brain cannot process any other information and both you and your product will lose out on potential sales!

The placement of the CTA on your landing page directly influences the success of your conversion funnel. A bottleneck of sorts, where a visitor can directly move from the decision stage (thinking about buying your product or service) to make a purchase.

If you have ever been to any e-commerce website, you have probably noticed that sometimes the “add to cart” button is at the top of the page and sometimes it’s placed right next to a particular product.

Trying to understand why this is or whether it matters is like trying to answer why a certain TV show is popular or not. The reasons are many and varied, but two main things will always hold:

  1. The site visitor has to always know where they can buy your product.
  2. It should be obvious for them to go there.

Why’s that?

Because of Jacob’s law:

“Users spend most of their time on other sites. This means that users prefer your site to work the same way as all the other sites they already know.”

I’m sure that you already had some annoying browsing instances. Like where on your phone you instinctively went to the upper-right corner searching for the menu bar and it wasn’t there.

What? It should be there.

That’s Jacob’s law. We are all already subconsciously taught how to surf the web. When a website tries to deviate from these predetermined rules, we’re confused and frustrated.

What’s worse, we’ll leave the site in search of a more pleasing browsing experience.

Now that we’ve laid down the basics, let’s take a closer look at some of the most common CTA placement issues and how to overcome them.

Where should you place CTA on your commercial website?

First, let’s delve into the most common (and heated) discussion regarding your CTA placement - above the fold or below it?

Above the fold means the first section of the website a user sees upon visiting, the main section if you will, before the user scrolls down (below the fold).

Image of a laptop explaining above the fold and below the fold meaning.
Image taken from this article

For many, many years before careful web & UX research studies, the common mantra was to almost only place your CTA above the fold. Your potential buyers first see this, so they must immediately see where to buy, right?

Wrong. According to MECLABS research, longer landing pages with a CTA below the fold provide 220% more leads to a common above the fold, shorter landing page.

Why? Because your visitors don’t know you yet. I’m sure you’ve experienced a pushy salesperson that immediately annoyed you upon entering the store. Begone, annoying sales agent. I don’t know if I even like your store decorations, let alone about your once-in-a-lifetime offer.

The point is, you first need to provide information about your offer. Let your visitor get to know you and your offer and then make the sale.

If you can provide coherent and clear information above the fold alongside your CTA, then go for it. But the point still stands. The above/below the fold has nothing to do with proper CTA placement. It’s all about customer’s motivation.

Moving on, if you have to decide, should your CTA be placed left or right of the page?

Here, another UX concept can help us - the Gutenberg Diagram.

People like to skim and scroll with their eyes, moving from the left to the right creating a sort of Z letter with their skimming.

Gutenberg diagram shown
Image taken from this article

Because of this natural tendency for our eyes to go right, then diagonally, an evident spot for a CTA is to the right. There, our eyes stop for a moment before moving to another section of the page.

This will give your CTA a more prominent look and draw more eyes to it.

Call to action images

Research from MAXG tested three different calls to action - link, button and call to action image.

Image showing three different CTAs - link, button and image.
Image taken from MAXG research article

Link CTAs converted at a considerably higher rate, 7.72%, but subsequently failed to deliver the submission, converting just 26.8% of landing page visitors into new leads.

Button CTAs converted at 2.65% and only 16.9% of the time into leads; they were by far the lowest-performing category for us.

Image CTAs (graphically produced pictures used as CTA links) converted at a rate of 2.96%, which was extremely similar to the average but caused the greatest conversion rate, at 56.6%.

When visitors arrive at the landing page, image-based CTAs convert them into leads at a higher-than-average rate.

If your CTA conversion rate is low, consider replacing link or button CTAs on your high-traffic web pages with call to action images.

They should be eye-catching, clear, and concisely communicate the desired action. Use the imagery to your advantage, picking a visual that corresponds to your business, and the desired action.

But where do you find these CTA images?

There are plenty of stock photo websites that offer thousands of high-quality images for free. For example, Unsplash or Pexels are the two of the most popular ones with a tremendous offer of various stock photos to download. Just don’t forget to attribute the author!

Overall, using an image as a CTA is great because it breaks up the monotony of text-heavy pages. They provide a significant conversion boost and can be designed to look more professional than common button CTAs.

Apart from thinking about the visual aspect of your CTA, another often forgotten quality is the written word. From using actionable words to entice the users to click to pick specific fonts to emphasize your offer and be in tune with your overall brand theme.

Use actionable verbs in the first person

Words have power, and this is especially true for CTAs.

You must use terms that convey a sense of urgency and direction in your offer. The following are some call-to-action terms or phrases that increase conversions:

  • Get
  • Visit
  • Now
  • Learn
  • Last
  • Today
  • Buy
  • Shop
  • Try

And here’s a list of powerful call-to-action phrases:

  • Get a Free Quote Today
  • Join Now
  • Learn More
  • Register Now
  • Reserve Now
  • See it in Action
  • Sign-up Here
  • Start Now
  • Take the Tour
  • Talk to an Expert
  • Watch Our Tutorial

You may also take advantage of unique deals and time-limited orders. This applies a sort of pressure called FOMO (fear of missing out) and motivates individuals to act since they don’t want to miss out.

According to research, FOMO is more prevalent among millennials. Be aware of this when thinking about your target market.

According to Eventbrite, 69% of millennials experience the phenomenon, and a comparable survey showed that 60% of millennials make impulsive purchases because of it.

While this can help you get more clicks, don’t go overboard and start abusing this technique, as it can easily backfire. Proclaiming a 90% limited time offer sounds too good to be true, making your visitors suspicious of the quality of your offer.

Perform A/B testing by having two different CTA phrases and compare their conversion rate over time.

Best font for the call to action

Once you’ve decided what you want your call to action button to say, it’s time to decide on the font. The optimal typeface for a call to action is determined by the message and picture you want to convey.

Some typefaces are more suited to certain situations than others. Here are a few font families and what they are best suited for:

Bold and italicized font

Verdana font CTA
Verdana font CTA

Bold and italicized fonts such as Verdana are well-known for emphasizing text. This effect can also highlight your call to action. Your visitors will see it immediately because it stands out from the rest of the text on the site.

Monospace font

Courier New font CTA
Courier New font CTA

Monospace fonts, such as Courier New, are used primarily for coding purposes. They are often associated with typewriters and make a commercial website look antiquated, which may be ideal if you’re trying to sell luxury goods or something that has a vintage feel.

Sans serif font

Open Sans font CTA
Open Sans font CTA

Sans serif fonts like Arial, Helvetica and Futura evoke modernity and simplicity. Because these typefaces have no flourishes, they’re easy to read and highly legible. The drawback is that they can sometimes look boring and difficult to stand out from the rest of the text.

Script font

Allison Script font CTA
Allison Script font CTA

Script is another popular option for CTA buttons. It has an old-world feel and is soft and feminine in tone. Since script is often used with hand-drawn graphics, it’s not always well-suited for modern web design trends, but if you can pull it off, it looks beautiful!

What’s next

It’s no secret that you need to be using calls-to-action on all of your pages. Whether you’re selling your product, pushing them to a lead capturing form or just trying to engage more with an active blog, a CTA is some of the most important content on your page (if not the most important, business-wise).

But for placing your CTA, the devil is in the details. There are a lot of facets to the best call to action placements; however, there is no one perfect placement for all scenarios. The best placement for you will depend on your market, audience, and overall web design.

But to sum it up - Keep it simple; if you want to convert, then your call to action should be well informed, clear, and placed on the page where your customers expect it. Do this and you’re well on your way to kicking your conversion rates up a few notches.

If you need help in tackling this issue on your commercial website, you can always reach me here for a free exploratory call. We will analyze your current setup and see how we can improve it through clever design and content.

This could also be interesting to you

5 Environmental branding myths that can hurt your brand

Read More
A roman statue on the right side with a sign on the left that reads: "5 Environmental branding myths that can hurt your brand".

4 reasons why your green startup needs a great website

Read More
The blog title "4 reasons why your green startup needs a great website" in front of a picture of kiwi fruit.