Designing buttons: how to ensure customers click correctly

The call-to-action button (CTA) is the intersection of the interface and business goals. No matter how well a page is presented, if customers do not recognize the button, do not understand what they will gain by clicking it, or cannot tap it on their phones, then all the content before it fails to achieve its purpose. This page helps you understand three core elements and avoid the most common mistakes.

Three essential factors

A sufficiently good button needs to meet three criteria in this order:

• Looks clickable: customers judge what can be clicked based on their past experiences, shapes with borders or high-contrast backgrounds, and familiar contexts. If a button looks like regular text or a decorative tag, most customers will overlook it. The Nielsen Norman Group calls this signal "affordance": the interface needs to signal correctly so customers don't have to guess.
• Large enough to tap: According to Fitts's Law (1954), the time to reach a target depends on the distance and size of that target. Small targets increase the rate of missed taps, especially on mobile. Apple recommends a touch area of about 44 pixels, while Android suggests around 48 density units. This is a practical threshold, not an option.
• Labels that convey results: customers read button labels in less than a second and decide whether to click. "Get free consultation", "View price list", "Download capability profile" informs customers what they will receive after clicking. "Send", "Continue", "OK" do not provide any information.

Button labels should be written in the customer's language and describe the outcome, not the technical actions behind it.

Practical experience.

Hierarchy: one primary, the others less prominent

When a page has multiple buttons that stand out equally, customers become distracted and often do not choose any. Therefore, each page, or each main section of a page, should revolve around one primary action.

• The primary action button: solid background color, high contrast, positioned where the customer can see it after reading the most important part.
• The secondary action button: use a border style without a background, or an underlined link style, to exist without competing for attention.
• Not distributing evenly: if everything is large and equally prominent, the visual hierarchy collapses, and customers do not know which step to take first.

The position and decision flow.

Placing the button in the right spot does not mean putting it in the top right corner or at the bottom of the page by default. The right placement is where the customer needs to make a decision after they have read enough information to do so.

• If the page presents a brief service, the main button can appear early at the beginning.
• If the page needs to present a lot of persuasive content first, the main button should be placed after that persuasive section, not hidden at the end when most customers have already left.
• On mobile, prioritize placing buttons within thumb reach, avoiding corners of the screen that are difficult to reach with one hand.

The most common error

• Technical labels instead of results: "Send", "Agree", "OK" convey nothing. Customers hesitate and overlook.
• Too many main buttons: when everything is important, nothing is important. Choose one.
• Button lacks clickable signals: The button looks like regular text or decorative tags, customers read it but do not click.
• Touch area too small or too close together: on mobile, two buttons next to each other without sufficient space lead to frequent mis-touches.
• Hide important buttons at the very bottom: Most customers do not scroll to the bottom of long pages. A button placed there is effectively non-existent.

No button guarantees a conversion rate, as the outcome also depends on content, pricing, and the trustworthiness of the page. What a button can do is make the next step obvious and easy to tap, so when customers are ready to decide, nothing holds them back.

This article is for reference. The scope, pricing, and specific commitments of Sinh Vũ are detailed in the proposal and signed contract.