Skip to content
Critly

Calls to Action

Many heroes end in three buttons the same size and color: "Get started", "Learn more" and "Book a demo". Each one was somebody's priority. Together they ask the reader to choose before they know what any of them does.

Give a page that persuades one primary action, label it with what happens after the click, and repeat it where the reader decides; keep every other action quieter, so nobody has to guess which button matters or what it does.

Button label
Solid buttons in the hero
Promises
Could be a sign-up form, a tour, a sales call or the pricing page. The reader has to click to find out.
Leads
Nothing. 3 different actions wear the same solid button, so the reader has to pick one before knowing what any of them does.

Start from "Get started" with three solid buttons and squint. Nothing leads. Drop to one solid button and the page has a point. Then switch the label to the specific one and read what it promises.

Name what happens next

In Nielsen Norman Group's testing, a "Get started" button drew clicks from people with almost any goal, then dropped them into a sign-up flow most of them didn't want yet. Some had come to read about the company, some to find a detail. The authors' summary: "a link is a promise." A vague label gets the click and breaks the promise on the next screen.

Kate Moran's four S's say the same thing about any label: say specifically what's on the other side, and make sure the next screen delivers it. For a call to action that usually means naming the thing and, where it matters, the commitment: "Start a 14-day trial", "Book a 20-minute demo", "Try Maker free for 30 days". Put the reassurance people look for ("No card needed") in a short line next to the button, not in the label. Microcopy covers verb-first labels in general.

The label also decides who clicks. "Book a demo" and "Start a trial" suit different buyers, so pick the one that fits how this product is bought. A self-serve tool that hides behind a demo form makes the reader wait for a meeting to see what a trial would have shown them in a minute.

One action leads

Squint at the first screen (the taste pass shows how). The heaviest shape should be the primary action. Repeating that same action in the nav, after the proof and on the recommended plan doesn't compete with it, because it's the same promise each time. A different action at the same weight does compete. Atlassian's rule is one primary button per area, and it works for marketing pages too.

Secondary actions still matter. Some readers want the tour, the docs or a sales call first. Give them an outline button or a text link so they can find it, and let the primary carry the weight. On a pricing page each plan has its own button, and only the recommended plan's is solid.

Repeat it where people decide

People don't decide at the top. Some are ready after the headline, more after the proof, the pricing or the answer to their last objection. Put the same action at the end of the sections that answer those questions and at the foot of the page, so the reader never has to scroll back to act.

On a long page, a button that stays on screen can help. Conversion Rate Experts ran one test on a very long sales page where adding a sticky call to action increased sales by 25%. That is one page and one test, so treat it as a reason to try it on long pages, not a rule for every page. On a phone a sticky bar takes up space the reader is trying to read in, so keep it to one slim row.

The button needs every state: hover, focus, pressed, and loading. After the click, show something within 100ms. A primary button that seems to do nothing for a second looks broken at the moment the reader decided to act.

Resources

Search concepts

Search for a command to run...