Tomás rents out kayaks on a lake two hours from the city. His new booking page is lovely: a photo of flat water at seven in the morning, prices, a map, a short note about life jackets.
At the bottom sits a grey outlined button. It says “Submit”.
His visitors scroll, look, scroll back up. Some send him an email instead, asking whether the button books the kayak or just sends a question. A few ask whether they will be charged straight away. One couple simply turns up on a Saturday, because they were sure they had booked.
Nothing on the page is broken. The button just never said what it does.
Tomás and his lake are imagined. The research, laws and court rulings below are real.
The button has one job
A call to action, or CTA, is the control that moves someone to the next step: book, buy, ask, call. On most small-business pages there is one that matters more than all the others. Everything above it is an argument. The button is where the visitor answers.
That answer depends on three things working together. The words tell people what will happen. The look tells them it can be pressed. The place and size decide how easily they find and hit it. Get one wrong and the other two have to work harder.
There is also a fourth thing that many guides skip: in the EU, the UK and the US, some buttons are regulated. For an online order in the EU, the label on the final button is a legal requirement, and a court has ruled on a single word. We will get there.
Do this: write down the single action you want a first-time visitor to take. If you have three candidates, pick one as primary and demote the others. You can still offer them; they just should not compete for the same glance.
Say what happens next
The most common CTA failure is not ugliness. It is vagueness.
In 2017, Aurora Harley and Kim Flaherty of Nielsen Norman Group pulled together observations from several of their usability studies into an article titled “Get Started” Stops Users. They watched people click generic “Get started” buttons hoping to learn what a company offered, and land instead in quizzes, sign-up flows or sales funnels. The click counted as a conversion. The visitor felt tricked. Their summary line is worth pinning above your desk: a link is a promise, and setting the wrong expectation may win superficial conversions without keeping customers.
“Learn more” has a related problem. Katie Sherwin's 2015 NN/g article “Learn More” Links: You Can Do Better points out that the phrase does not say what you will learn, that a page full of identical “Learn more” links leaves people unsure whether they lead to different places, and that screen-reader users who pull up a list of links hear the same words over and over. WCAG 2.2 makes a version of this a requirement: under success criterion 2.4.4 Link Purpose (In Context), the purpose of each link must be clear from its text alone or together with its programmatic context.
Describes the form, not the outcome. Does this book a kayak, send a question or charge a card?
Could mean a quiz, an account, a demo or a payment. NN/g watched people use it hoping to learn more, then end up in a funnel.
A specific verb and a specific result. The visitor knows the click is safe and what they will see next.
Clear about the commitment. Appropriate when the click really does start a purchase.
A good label usually starts with a verb and ends with the thing the visitor gets: “Get my quote”, “Book a 20-minute call”, “See prices”, “Download the menu (PDF, 2 MB)”. If the click costs money, say so. If it does not, saying “Free, no card needed” near the button removes a fear you may not know people have.
One small accessibility rule helps here as well. WCAG 2.5.3 Label in Name requires that a control's accessible name contains the words shown on it. If your button reads “Book now” but its hidden label says “Submit form”, people using voice control who say “click Book now” will get nothing.
Do this: read your button label out of context. Could a stranger say what will happen when they press it, and whether it costs money? If not, rewrite it with a verb and an outcome.
The famous “my” versus “your” test
You may have read that changing “your” to “my” in a button lifts conversions by 90%. The claim traces back to a single test.
In a 2013 article on the Unbounce blog, conversion optimizer Michael Aagaard described a test on an Unbounce pay-per-click landing page. The only change was the possessive: “your” became “my”, so the button read “Start my free 30 day trial”. After three weeks, the article reports, the click-through rate on the button rose by 90%.
The article does not report a sample size, a confidence level or what happened to completed trial sign-ups after the click. It is an honest practitioner write-up of a single test, not evidence that first-person labels work everywhere. Treat it as a hypothesis worth testing on your own page.
There is a plausible mechanism. “Start my trial” is written from the visitor's side of the screen, as if they were saying it. It is also shorter to process than a sentence about “your” anything. But a plausible story plus one test is still one test.
The more reliable lesson from the same article is quieter: the button copy should describe the value the visitor gets, in words they would use. Whether that comes out as “my” or “your” matters much less than whether it says something specific.
Do this: if you have the traffic for an A/B test, try a first-person label, and judge it by completed bookings or enquiries, not button clicks. If you do not have the traffic, choose the clearer wording and move on.
Make it look pressable
Don Norman made “affordance” a design word in his 1988 book The Psychology of Everyday Things, better known by its later title The Design of Everyday Things. He then spent years watching designers misuse it. In a 2008 essay for Interactions, Signifiers, not affordances, he argued that what designers usually mean is a signifier: in his words, an indicator or signal that people can interpret meaningfully. A button can be clicked whether or not it looks like a button. The signifier is what tells you so.
On the web, signifiers are mostly visual conventions: a filled shape, contrast with the background, a label that reads like an action, a cursor change, a visible focus ring for keyboard users. Strip them away for the sake of minimalism and people slow down.
Kate Moran tested exactly that for NN/g in 2017, published as Flat UI Elements Attract Less Attention and Cause Uncertainty. Seventy-one participants used versions of nine real web pages on a desktop computer while an eye tracker recorded their gaze. Each page existed in a strong-signifier version and a weak-signifier version, with things like text-only links or ghost buttons. Each participant saw one version of each page.
The effect was not uniform. Moran found the biggest differences on dense pages with inconsistent layouts and low-contrast targets, and little difference on simple pages with traditional layouts and high-contrast targets. That is useful: a minimal design is not the problem in itself; a minimal design that hides what is clickable is.
Button or link? Let the code tell the truth
Under the hood, HTML has two different elements for this, and they are not interchangeable. In the HTML standard, an a element with an href represents a hyperlink: it takes you somewhere. A button element represents a button: it does something here, such as submitting a form or opening a dialog.
Visually you can style either one as a pill. Behaviorally they differ: links open in new tabs, can be bookmarked and are announced as links; buttons respond to the space bar and are announced as buttons. A “Book a kayak” CTA that scrolls to a booking form is a link. The “Pay and book” control at the end of that form is a button. Using the right one costs nothing and saves keyboard and screen-reader users from surprises.
Do this: squint at your page. If you cannot spot the primary action in a second, give it a filled shape and strong contrast. Check that links go places and buttons do things.
Stand out by being the only one
In 1933, the German psychologist Hedwig von Restorff published a study of memory for lists, in the journal Psychologische Forschung. It gave its name to the isolation effect: if all but one item in a list are similar, the different one is remembered better.
Von Restorff studied memory, not clicking. Her participants learned lists in which one item differed from the rest, and that item was recalled better. As R. Reed Hunt showed in a 1995 re-reading of the original German paper, she presented evidence that the odd item did not need to be perceptually striking for the effect to appear, and argued that its difference only matters in the context of how similar everything around it is.
Designers borrow the effect to argue that a CTA should look different from everything else. That is reasonable, with one condition Hunt's re-reading makes plain: difference only works against a background of sameness. A page where five elements each shout in their own color has no odd one out.
That is the practical case for one primary CTA per view. Give the main action the filled, high-contrast style and use it for nothing else. Give secondary actions a quieter style, such as an outlined “ghost” button or a plain text link. Moran's study is a reminder not to make the quiet style so quiet that people stop seeing it, so keep secondary buttons legible and obviously interactive, just less heavy.
Color is part of this, but the famous “red button beats green” stories are not a law. What matters is contrast with the surroundings and consistency across the page. For more on how attention spreads over a page, see Attention and whitespace, and for why visitors ignore anything that looks like an ad, banner blindness.
Do this: count the filled buttons visible on your first screen. If there is more than one style competing for “primary”, keep one and turn the rest into outlines or links.
Size, distance and where it sits
In 1954, Paul Fitts asked sixteen right-handed college men to tap two metal plates alternately with a stylus, as fast as they could without missing. He varied the plates' width from a quarter of an inch to two inches, and the distance between them from two to sixteen inches. Movement time rose in a strikingly regular way with distance and fell with width.
The time to hit a target grows with the logarithm of its distance (D) divided by its width (W). Doubling the size of a target has the same effect as halving the distance to it. Fitts measured arm movements with a stylus; later work, notably I. Scott MacKenzie's 1992 review, showed that a closely related formula describes pointing with a mouse and other devices.
For a CTA, Fitts gives three practical rules. Make the primary button generously sized, especially its height on phones. Put it near where the eye and hand already are, such as directly under the price or the last line of the form. And leave space around small controls so a near miss does not hit the wrong thing.
WCAG 2.2 added a floor for that last point. Success criterion 2.5.8 Target Size (Minimum), Level AA, requires pointer targets of at least 24 by 24 CSS pixels, with exceptions such as enough spacing around a smaller target or links inside a sentence. Treat 24 pixels as the legal-ish minimum, not the goal; a primary CTA should be comfortably larger. For thumbs specifically, see Mobile and thumbs.
Above the fold, and again below it
Where should the button go? NN/g's Therese Fessenden analysed more than 130,000 eye fixations from 120 participants on a 1920×1080 screen for the 2018 article Scrolling and Attention. About 57% of viewing time was spent above the fold, and 74% within the first two screenfuls.
So the first screen deserves a clear primary CTA; it gets the most looks. But people do scroll, and many are not ready to act until they have read your prices, your proof and your answers to their worries. Repeat the same CTA, with the same words, after those sections. Repeating the same action is not clutter. Adding a different action at every scroll stop is.
Do this: place your primary CTA in the first screen and once more after your strongest proof or your prices. On phones, check that its height is at least as large as a fingertip and that nothing tappable crowds it.
The order button is regulated
Back to Tomás, whose booking page is about to take payment online. In the EU, the label on his final button is not a style choice.
For distance contracts concluded by electronic means that oblige the consumer to pay, the trader must ensure that the consumer explicitly acknowledges the obligation to pay. If the order is placed by activating a button, it must be labelled in an easily legible way only with the words “order with obligation to pay” or a corresponding unambiguous formulation. If the trader does not comply, the consumer is not bound by the contract or order. The same article requires the key information, including the total price, to be shown clearly and prominently directly before the order.
Source: Directive 2011/83/EU, consolidated text. General information, not legal advice; check your own jurisdiction.
Germany implemented this as the so-called Button-Lösung in §312j(3) of the Civil Code (BGB): the button must be labelled with nothing other than “zahlungspflichtig bestellen” (order with obligation to pay) or an equally unambiguous wording. §312j(4) adds that the contract only comes into existence if the trader meets that duty.
One word, one ruling: “Buchung abschließen”
The case that tested this involved a hotel booking. In 2019 a guest reserved several rooms at a German hotel through booking.com. His final click was on a button labelled “Buchung abschließen”, which means “complete booking”. He did not show up, and the hotel's operator, Fuhrmann-2, billed him a cancellation fee of €2,240. A local court in Bottrop asked the Court of Justice of the EU whether the button met the directive.
In Case C-249/21, Fuhrmann-2, judgment of 7 April 2022, the Court held that only the words on the button itself count. Context elsewhere on the page does not rescue a vague label. It left the final call to the German court, but set the test: does “booking”, in everyday German and for the average consumer, necessarily and systematically mean an obligation to pay? If not, “complete booking” is ambiguous and does not satisfy the rule. The referring court had already noted that “booking” is often used for free reservations.
This is the final step of Tomás's checkout. Pick a label for the button and read what a user and an EU lawyer might think of it.
No label chosen yet
Each option gets a short usability note and a note on EU Art. 8(2). The legal notes are simplified general information, not legal advice.
What counts as a “corresponding unambiguous formulation” is decided nationally and case by case, so check guidance for your country. The safe pattern is easy to remember: a verb that clearly means paying or buying, ideally with the amount.
Do this: if you sell to EU consumers online, make the last button say plainly that the click is a paid order, and show the total price, including VAT and delivery, right above it.
Buttons for leaving, too
Lawmakers have also turned their attention to the opposite button: the one for getting out.
If a website lets consumers conclude a contract for an ongoing paid service, such as a subscription or membership, the trader must provide a cancellation button labelled with nothing other than “Verträge hier kündigen” (cancel contracts here) or equivalent. It must lead directly to a confirmation page with a second button, “jetzt kündigen” (cancel now). If the buttons and page are missing, the consumer may cancel at any time without notice.
Source: §312k BGB. Not legal advice.
From 2026 the EU goes further, for every online distance contract and not just subscriptions. Directive (EU) 2023/2673 inserted a new Article 11a into the Consumer Rights Directive, which member states must apply from 19 June 2026.
For distance contracts concluded through an online interface, the trader must offer a withdrawal function labelled “withdraw from contract here” or an unambiguous equivalent, continuously available throughout the withdrawal period, prominently displayed and easily accessible. It lets the consumer send a withdrawal statement giving or confirming their name, the contract concerned and how they want to receive confirmation. A second control, labelled only “confirm withdrawal” or equivalent, submits it, and the trader must acknowledge receipt on a durable medium, such as email, without undue delay. Germany implemented this in a new §356a BGB, with the labels “Vertrag widerrufen” and “Widerruf bestätigen”.
Sources: Directive (EU) 2023/2673, Arts. 1 and 2; §356a BGB. Not legal advice; national wording differs.
The United States: no click-to-cancel rule, but ROSCA still applies
The US Federal Trade Commission issued an amended Negative Option Rule, widely called “click to cancel”, on 16 October 2024. On 8 July 2025, days before its main compliance date, the US Court of Appeals for the Eighth Circuit vacated it in Custom Communications, Inc. v. FTC, on procedural grounds: the court held that the FTC had skipped a required preliminary regulatory analysis. In March 2026 the FTC published an advance notice of proposed rulemaking to start again. An advance notice is a request for comments, not a rule.
What still binds US sellers is the Restore Online Shoppers' Confidence Act (ROSCA), 15 U.S.C. §8403. For online sales with a negative option feature, such as automatic renewal, a seller must clearly and conspicuously disclose all material terms before taking billing information, obtain express informed consent before charging, and provide simple mechanisms to stop recurring charges. State automatic-renewal laws may add more.
The design lesson matches the legal one: a cancel button that is as easy to find as the sign-up button is not a favor to customers. In more and more places it is the rule. For the wider topic of honest pressure, see Defaults, nudges and honest urgency.
Do this: if you sell subscriptions or anything online in the EU, find your cancellation and withdrawal paths and time how long they take. If leaving takes more clicks than joining, fix it before a regulator or a customer points it out.
What to change tomorrow
Rename the main button
Replace “Submit”, “Send” or “Get started” with a verb plus an outcome: “Check availability”, “Get my quote”, “Book a 20-minute call”. Say if it is free.
Make one button the loudest thing
One filled, high-contrast style for the primary action. Outlined or text styles for everything else, still clearly clickable.
Check size and spacing on a phone
Primary CTA comfortably above the 24 × 24 CSS pixel floor of WCAG 2.5.8, close to the content it relates to, with nothing tappable crowding it.
Place it twice
Once in the first screen, once after your prices or proof, with identical wording.
Use the right element
Links go somewhere, buttons do something. Make the visible label part of the accessible name.
Fix the final order button
For EU consumer sales, label it so that it unambiguously means paying, ideally with the amount, and show the total price just above it.
Audit the exits
Subscriptions in Germany need the §312k cancellation button. Online contracts in the EU need the Art. 11a withdrawal function since 19 June 2026. In the US, follow ROSCA's simple-cancellation requirement.
Tomás changed his grey “Submit” to a dark “Check Saturday availability” under the price, and the final step now reads “Pay €48 and book”. The emails asking what the button does stopped. The couple who turned up unannounced would have known they had not booked.
What the research supports
Fitts's law is one of the most robust findings in human movement research and supports large, nearby targets. NN/g's eye-tracking study supports strong clickability signifiers, especially on busy pages. The isolation effect is a memory finding that designers extend, reasonably, to visual distinctiveness. Advice on specific labels rests mainly on usability observation and single A/B tests, such as the much-quoted “my” versus “your” result, which measured clicks on one page. The legal requirements are not research questions: they are in force where stated.
Sources
- Fitts, P. M. (1954). The information capacity of the human motor system in controlling the amplitude of movement. Journal of Experimental Psychology, 47(6), 381–391. Full paper consulted for the reciprocal tapping procedure, participants and the index of difficulty.
- MacKenzie, I. S. (1992). Fitts' law as a research and design tool in human-computer interaction. Human–Computer Interaction, 7(1), 91–139. Bibliographic record consulted for the application to pointing devices.
- von Restorff, H. (1933). Über die Wirkung von Bereichsbildungen im Spurenfeld. Psychologische Forschung, 18, 299–342. Cited via Hunt (1995); the German original was not read in full.
- Hunt, R. R. (1995). The subtlety of distinctiveness: What von Restorff really did. Psychonomic Bulletin & Review, 2(1), 105–112. Abstract consulted for what the original study showed.
- Norman, D. (2008). Signifiers, not affordances. Interactions, 15(6). Essay consulted for the definition of signifiers.
- Moran, K. (2017). Flat UI Elements Attract Less Attention and Cause Uncertainty. Nielsen Norman Group. Method, sample and results consulted.
- Harley, A. & Flaherty, K. (2017). “Get Started” Stops Users. Nielsen Norman Group. Usability observations and recommendations consulted.
- Sherwin, K. (2015). “Learn More” Links: You Can Do Better. Nielsen Norman Group. Guidance on generic link labels consulted.
- Aagaard, M. (2013). How to Design Call to Action Buttons that Convert. Unbounce blog. Consulted for the single “your/my” test, its metric and what is not reported.
- Fessenden, T. (2018). Scrolling and Attention. Nielsen Norman Group. Viewing-time shares above the fold consulted.
- W3C (2023). Web Content Accessibility Guidelines (WCAG) 2.2. Success criteria 2.4.4, 2.5.3 and 2.5.8 consulted.
- WHATWG. HTML Living Standard. Definitions of the
aandbuttonelements consulted. - European Parliament and Council (2011). Directive 2011/83/EU on consumer rights, consolidated version of 28 May 2022. Articles 6(1)(e) and 8(2) consulted.
- Court of Justice of the EU (2022). Case C-249/21, Fuhrmann-2 GmbH v B., judgment of 7 April 2022. Facts (in English and German), paragraphs 11–17 and 32–33 and the operative part consulted.
- European Parliament and Council (2023). Directive (EU) 2023/2673. New Article 11a and the transposition and application dates consulted.
- Bürgerliches Gesetzbuch. §312j, §312k and §356a. Official text consulted for button wording and consequences.
- United States Code. 15 U.S.C. §8403 (Restore Online Shoppers' Confidence Act). Statutory text consulted.
- Latham & Watkins (2025). Eighth Circuit Vacates FTC Click-to-Cancel Rule. Consulted for the rule's issue date, the decision date and case name.
- Covington & Burling (2026). FTC Launches New Rulemaking on the Negative Option Rule. Consulted for the March 2026 advance notice.
Sources checked 18 October 2026. Legal sections are general information, not legal advice; check the rules in your own jurisdiction and with a qualified adviser. The kayak business and all button mock-ups are fictional; the figures are original illustrations.