Answer 36 of 50
Determining Optimal CTA Button Placement and Design in Web Design
There is no single optimal position or color for a call-to-action button, but there are clear minimums and a reliable method. Make the primary button large enough to hit, distinct from everything around it, labeled with what happens next, and placed where visitors have the information they need to act. Then test placement and wording on your own traffic, because that is where the measurable differences show up.
Size: platform guidance and WCAG are different numbers
The sizes quoted for touch targets come from different sources with different units:
| Source | Minimum | Unit |
|---|---|---|
| WCAG 2.2 success criterion 2.5.8, Target Size (Minimum), Level AA | 24 by 24, or enough spacing, with exceptions | CSS pixels |
| WCAG 2.2 success criterion 2.5.5, Target Size (Enhanced), Level AAA | 44 by 44, with exceptions | CSS pixels |
| Apple Human Interface Guidelines | A hit region of at least 44 by 44 | Points |
| Android accessibility guidance | A touch target of at least 48 by 48 | Density-independent pixels (dp) |
The sources: W3C’s Understanding pages for 2.5.8 and 2.5.5, Apple’s button guidelines, and Android’s guide to making apps more accessible, which adds “Larger is even better.” For a primary call to action on the web, 44 by 44 CSS pixels meets both WCAG rows; Android’s 48 dp figure is guidance for native apps, in a different unit.
Size also matters for speed of use. Fitts’s law, as the Interaction Design Foundation’s summary puts it, makes the time to reach a target “a function of the distance to the target divided by the size of the target”, so a larger button placed close to where attention already is gets reached faster.
Mobile placement: the thumb-zone chart is outdated
Thumb-zone diagrams that mark the lower right as “easy” trace back to Steven Hoober’s 2013 UXmatters study of how people hold their phones, which found 49% one-handed use, 36% cradled, and 15% two-handed. In a February 2017 reply on that article, Hoober wrote: “Please, please everyone ignore those drawings.” His later research labels the familiar chart “well-known, but incorrect” and reports that people “are better at tapping at the center of the screen”, so targets there can be smaller, about 7 millimeters, while corner targets need to be about 12 millimeters.
What that means in practice:
- Make primary buttons full-width or centered on phones rather than tucked into a corner.
- Give anything near an edge or corner a larger target.
- A button fixed to the bottom of the screen stays reachable while people scroll, at the cost of permanent screen space; keep it small in height and make sure it does not cover the element a keyboard user has focused (WCAG 2.4.11).
Distinct from everything around it
A primary button needs to stand out from its surroundings, which depends more on the page’s palette than on any particular hue. Why a “winning” button color from someone else’s test does not automatically transfer to your page is covered in color psychology in web design, and the broader rules of emphasis in visual hierarchy principles.
Two contrast rules apply to every button. The label text needs 4.5:1 against the button background at WCAG AA (3:1 if it counts as large text). And the visual information that identifies a control, such as a ghost button’s outline, needs “a contrast ratio of at least 3:1 against adjacent color(s)” under 1.4.11 Non-text Contrast. Check a ghost button over a photo against both the lightest and darkest areas behind it.
Primary and secondary actions
Apple’s guidelines give a rule that works on the web as well: distinguish the preferred choice by style rather than size, because “placing two buttons of different sizes near each other can make the interface look confusing and inconsistent.” Two buttons side by side read as a set when they are the same size; give the preferred one the filled, high-contrast style and the alternative an outline or text style.
How many to show? Keep one primary action per section and at most one or two secondary ones. The popular claim that three options cause “decision paralysis” is stronger than the evidence: a 2010 meta-analysis by Scheibehenne, Greifeneder, and Todd of 63 conditions from 50 experiments (5,036 participants) found “a mean effect size of virtually zero” for choice overload, with considerable variation between studies. The practical reason to limit buttons is clarity of priority, not paralysis.
Copy that says what happens next
“Submit” and “Click here” say nothing about the result. Start with labels that name the action and its outcome: “Start free trial,” “Get pricing,” “Download the checklist.” Specific promises, such as “Get your quote within one business day,” help only if they are true every time. Whether first-person wording (“Start my trial”) beats second-person is something to test, not assume. Nielsen Norman Group’s article on making clickable elements recognizable is a useful check that the button looks like a button at all.
Placement along the page
Match button positions to where visitors are in their decision:
| Position | Serves | Watch for |
|---|---|---|
| Top of the page | Visitors who arrived ready to act | Asking before the page has explained anything |
| After a key section | Visitors persuaded by that section | Breaking up the reading flow too often |
| End of the page | Visitors who needed all the information | Being the only button on a long page |
| Fixed or sticky | Long pages and checkout steps | Screen space on phones, and covering focused elements |
Order of side-by-side buttons is a convention question. Nielsen Norman Group’s article on OK and Cancel order concludes that “Following platform conventions is more important than optimizing an individual dialog box”, so pick one order and use it everywhere on the site. The structure of a single-goal page around its call to action is covered in landing page design elements that drive conversions.
States: hover, focus, press, and loading
- Focus. Keyboard users need to see which button is selected. WCAG 2.4.7, Focus Visible (Level AA), requires a mode of operation “where the keyboard focus indicator is visible.” Never remove the outline without replacing it.
- Hover. Confirms the button is clickable on devices with a pointer; touch screens have no hover, so the button has to look clickable without it.
- Press. Apple’s guidance says a custom button without a press state “can feel unresponsive”.
- Loading. If a click starts a process, change the label (“Sending”) and prevent double submission.
Truthful urgency, and where it becomes illegal
Countdown timers that reset and “only 3 left” messages that are not true are more than bad practice in some markets. In the EU, the Unfair Commercial Practices Directive’s Annex I, the list of practices considered unfair in all circumstances, includes “Falsely stating that a product will only be available for a very limited time” to elicit an immediate decision. Use urgency only when the deadline or stock limit is real.
Testing
Test copy and placement before color, since the contrast rules above already settle the main color questions. Run each test long enough and on enough traffic to separate a real difference from noise; the setup and stopping rules are covered in how A/B testing should guide design decisions.
Start with a primary button at least 44 by 44 CSS pixels, centered or full-width on phones, with contrasting text and a visible focus state, labeled with what happens next and placed after the content that earns the click; then test wording and position on your own pages.