Call to Action (CTA) – Definition & Guide

A call to action in UX design is a button, link, or interactive element that directs users toward a specific next step – signing up, purchasing, downloading, or continuing – and is designed to be the clearest, most visually prominent path forward on the screen.

Why It Matters

Every screen in a product has a purpose, and that purpose needs a CTA to convert intent into action. Without a clear call to action, users who are ready to proceed have to guess what to do next. That guesswork introduces friction, reduces conversion, and undermines the entire design of the surrounding page.

A well-designed CTA does three things simultaneously: it tells users what will happen (“Start Free Trial”), it communicates why they should do it (implied by the surrounding context – the value proposition, the pricing, the testimonials), and it makes the action physically easy to take through appropriate size, placement, and visual prominence.

The difference between a mediocre CTA and an effective one isn’t always dramatic. Changing button copy from “Submit” to “Get My Free Report” consistently outperforms in tests, not because of any trick, but because “Get My Free Report” tells users what they receive, while “Submit” tells them nothing.

How It Works

Visual hierarchy: The primary CTA should be the most visually prominent interactive element on the screen. This means the highest contrast, the largest button, and the most prominent placement. Everything else on the page should visually support or defer to the CTA.

Actionable copy: CTA labels should describe the outcome, not the action. “Start Free Trial” is better than “Click Here.” “Download the Guide” is better than “Submit.” “Book a Demo” is better than “Learn More.” The user should know what they get before they click.

Color and contrast: The CTA button color should create clear contrast against its background and against secondary buttons on the same screen. This doesn’t require a specific color – what matters is that it stands out. See color theory for how to build contrast into a color system rather than choosing arbitrary “high-converting” colors.

Size and touch target: The button needs to be large enough to tap easily on mobile. Apple’s Human Interface Guidelines recommend a minimum 44×44pt touch target; Google’s Material Design specifies 48×48dp. Smaller targets create unnecessary miss-taps. Fitts’s Law also applies: larger targets that are easier to reach are clicked more often, not just more accurately.

Primary vs. Secondary CTAs

Most screens have one primary CTA and optionally one secondary CTA. The primary CTA represents the main goal of the screen (sign up, buy, continue). The secondary CTA offers an alternative that serves a real user need without competing with the primary (learn more, compare plans, maybe later).

The visual distinction must be unambiguous: primary CTAs use filled buttons in the brand’s primary action color; secondary CTAs use outlined or ghost buttons, text links, or lower-contrast fills. When primary and secondary buttons look equally prominent, users hesitate – neither feels clearly preferred.

The one primary CTA principle: Each screen should have a single most-important action. Multiple competing primary actions create decision paralysis (Hick’s Law applied to CTAs) and dilute the visual hierarchy that makes the CTA findable. If you genuinely have two equally important actions, consider whether they belong on the same screen.

Mobile CTA Placement

On mobile, thumb reach determines usability. The center and lower portion of the screen is the natural thumb zone for most right-handed users holding a phone with one hand. Placing primary CTAs at the bottom of the screen – the “sticky CTA” pattern common in mobile apps – keeps the action within comfortable reach.

Top-of-screen CTAs require an unnatural thumb stretch on phones larger than 5 inches, which is now most phones. Floating CTAs fixed to the bottom of the viewport (outside the content scroll) ensure the action is always reachable regardless of scroll position.

Real-World Example

Dropbox’s homepage (in its earlier, high-conversion iterations) is a widely cited example of CTA clarity. The page featured a single above-the-fold CTA: “Sign up for free.” One button, one action, strong contrast against a clean background, brief surrounding copy explaining the value. No competing buttons, no secondary actions fighting for attention.

The clarity was deliberate. Dropbox’s growth team tested extensively and found that every additional link, button, or choice on the landing page reduced signup conversion. The final design removed even the navigation bar – recognizing that a user who clicked away from the landing page was a lost opportunity. The page existed to convert a single action, and everything on it either supported that action or was removed.

How to Apply

Use one primary CTA per screen. If you have two equally important actions, reconsider whether they belong on the same screen or whether one is genuinely primary.
Write outcome-oriented button labels. Replace “Submit,” “Continue,” and “Click Here” with labels that describe what the user gets: “Create My Account,” “See Pricing,” “Download the Report.”
Ensure visible contrast between primary and secondary buttons. Primary buttons filled, secondary buttons outlined or text-only. If both look similar, neither reads as primary.
Place mobile CTAs within the thumb zone. Test your CTA placement on actual devices, not just design mockups. A button that looks well-placed in Figma may require an uncomfortable reach on a physical phone.
Watch for dark pattern CTAs in your own designs. Confirmshaming (“No thanks, I don’t want to save money”), misdirection (making the reject option hard to find), and disguised unsubscribe links are common CTAs misused to manipulate rather than guide. They erode trust even when they improve short-term conversion metrics.

Common Mistakes

Multiple primary CTAs competing for attention. When every button on the page looks like a primary action, none of them are. Users experience decision paralysis, and conversion drops. Visual hierarchy isn’t decoration – it’s function.

Generic button labels. “Submit,” “OK,” and “Continue” tell users nothing. They’ve already read the surrounding context; the button label should confirm what they’re committing to, not just acknowledge that they pressed something.

Ignoring Fitts’s Law on mobile. A CTA that’s technically visible on screen but requires a stretch or a precise tap will convert less than one that’s comfortably reachable. Size and placement are not polish – they’re usability.

Affordance – how the visual design of a CTA signals that it’s interactive and what it does
Color Theory – how to build button contrast into a systematic color palette
Fitts’s Law – why CTA size and placement directly affect engagement
Dark Pattern – what CTAs become when designed to manipulate rather than guide
Cognitive Load – why multiple competing CTAs reduce rather than increase conversion