Call-to-action design: what we test first, and why

The first things we test on a call to action are, in order: the words on the button, whether the action matches what the visitor is ready to do, where the button sits on a phone screen, and whether it looks like something you can tap. Colour and shape come last. Changing "Submit" to "Get my quote" tells the visitor something new; changing the button from blue to green does not, and no colour rescues a button that asks for too much too soon.

This post covers each of those in the order we check them, for company websites where the action is an enquiry, a call or a quote request.

What should the button say?

The button text should say what the visitor gets, in the visitor's words, starting with a verb. Read it on its own, out of context: if it still makes sense, it is good enough.

Two rules sit behind the table. First, specific beats clever: "Book a site survey" will beat "Let's build something great" because the visitor knows what they are agreeing to. Second, do not promise what is not true. "Free quote" is fine if the quote is free; "Instant quote" is not if someone calls them back tomorrow.

The supporting line under or beside the button matters almost as much. "No obligation. We reply within one working day." answers the two worries most visitors have just before they tap. On the company websites we build, the button text and that line are written with the page copy, not added by the designer at the end.

Is the visitor ready for what you are asking?

A first-time visitor reading a service page is often not ready to book a call. They may be ready to see examples, check a price range or download a spec sheet. Asking for a meeting too early does not produce more meetings; it produces fewer clicks.

Think of the actions on a ladder, from low to high commitment:

1. See examples or a case study.
2. Check a price range or use a calculator.
3. Send a short enquiry or a WhatsApp message.
4. Request a quote with details.
5. Book a call or a site visit.

Each page gets one primary action, matched to where most of its visitors are, and one quieter secondary action one step lower on the ladder. A service page might lead with "Get a quote" and offer "See recent projects" beside it. A case study page might lead with "Talk to us about a project like this". The homepage usually leads with the main action and routes everyone else; our homepage structure guide covers the first screen.

If prices are not on the site, the "check a price" rung is missing and many visitors fall off the ladder there. Show prices on your website or not covers when a range helps.

Where should the call to action sit on a phone?

Most visitors to a company site are on a phone, so place the button for the phone first.

• In the first screen, below the headline and supporting line, with no need to scroll. Check it on a real mid-range phone, not a desktop browser shrunk down.
• After the proof, because a visitor who has just read a case study or a testimonial is at their most willing.
• At the end of the page, always. A visitor who scrolled to the bottom is interested and should not have to scroll back up.
• In the header, as a button rather than a menu item, so it is on every screen.

A sticky bar at the bottom of the screen with "Call" and "WhatsApp" or "Get a quote" works well on phones for businesses that sell by phone, because it sits where the thumb already is. Keep it slim, and make sure it does not cover the cookie banner, the chat button or the page's own buttons. Our post on mobile-first design covers the wider layout decisions.

Does it look like something you can tap?

A call to action has to look like a button, not a label. Three checks:

Contrast. The button must stand out from the background, and the text on it must be readable. White text on a pale brand colour often fails. The contrast checker tests both against the WCAG thresholds.

Size. The tap area needs to be large enough to hit with a thumb. WCAG 2.2 sets a minimum of 24 by 24 CSS pixels at level AA in its target size criterion; that is a floor, not a goal. We make primary buttons at least 44 to 48 pixels tall on mobile, with space around them so a thumb does not hit the neighbouring link.

One style for primary actions. If every button on the page is the same bright filled style, none of them is primary. Use the filled style for the one main action and an outline or a plain link for the secondary one. Ghost buttons (outline only) for the main action are a common reason a page gets no clicks.

One technical detail that matters for accessibility: a call to action that goes to another page should be a link styled as a button, and one that submits a form should be a real button. Screen readers announce them differently, and keyboard users expect them to behave differently. Website accessibility basics covers the rest.

How many calls to action should one page have?

One primary action, repeated as often as the page is long. A 400-word service page needs it twice, at the top and the bottom. A 1,500-word page may need it four times. Repeating the same action is fine; adding different ones is the problem.

"Get a quote", "Download the brochure", "Subscribe to the newsletter" and "Follow us" in the first screen give the visitor four decisions instead of one. Most will make none. Keep the newsletter in the footer, the brochure on the page where it is relevant, and the social links out of the way.

How do you know a change worked?

Measure the click and what follows it. In GA4, record a click on each call to action as an event, and record the enquiry itself (a thank-you page view or a form submission) as a key event. Clicks without enquiries mean the page after the button is the problem; enquiries without clicks mean visitors are getting in touch some other way.

For most company sites, a split test on button wording will not reach a reliable answer, because the traffic is too small; our guide to running a simple A/B test explains the sample sizes involved and what to do instead. A before-and-after comparison over six to eight weeks, with the same traffic sources, is usually the realistic option. Use the conversion rate calculator to compare the two periods and see what the change is worth.

If the button gets clicks and the enquiries still do not come, the problem is further along: the contact page or the form itself. And if nothing on the page gets clicked at all, the issue is usually before the button; traffic but no leads covers the full diagnosis, and our guide to planning a website shows where the call to action is decided: step 3, when you write down what each page must make its visitor do next.