Designing buttons: how to ensure customers click correctly

The call-to-action button (which leads the customer to the next step) is where the interface meets business goals. No matter how well the page is presented, if the customer does not recognize the button, does not understand what they will get by clicking it, or cannot tap it on their phone, then all the content before it is wasted. Sinh Vũ created this page to help you understand three core factors 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 hit: According to Fitts's Law (1954), the time to reach a target depends on the distance and size of that target. A small target increases the rate of missed touches, especially on mobile. Apple recommends a touch area of about 44 pixels, Android about 48 density units. Sinh Vũ considers this 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, Sinh Vũ Studio

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. This is why Sinh Vũ always designs according to the principle of having one primary action on each page or each main section of the page.

• 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.

The viewpoint of Sinh Vũ

In the design process, Sinh Vũ builds each page around a specific action: the page is not just for reading, but to lead the customer to a clear next step. The main button is labeled as an invitation, not a technical command. "Schedule a meeting" is easier to click than "Submit." "Get the capability profile" is clearer than "Download."

Sinh Vũ does not promise a specific conversion figure, as results depend on many factors beyond the button. However, the principle is to make the next step always obvious and easy to reach, so when customers are ready to decide, nothing holds them back.