Skip to content

Improve website buttons by checking actions and completed inquiries

Summary

Improve website buttons with accurate labels, suitable activation areas, and keyboard access. Measure completed inquiries alongside clicks and input errors.

Published

Describe the action and evaluate what happens after the click

Make the action clear and operable by pointer and keyboard. For inquiries, measure clicks and completed submissions as separate stages. More clicks alone leave the inquiry outcome unresolved.

Opening a pricing page and submitting an inquiry have different roles. Establish the operation before choosing its appearance.

Match the label and element to the operation

Use links for page navigation and buttons for actions such as submitting a form. W3C's button pattern distinguishes these roles. A button-shaped link to a pricing page can still say View pricing. (W3C button pattern)

Distinguish a booking commitment from a discussion request

A form that only requests a conversation needs wording consistent with that action, such as Send inquiry. See Microcopy for examples.

Statements such as free or takes one minute need support from the actual charge and input process. Add accurate explanations of what follows the action.

Provide an adequate activation area and keyboard access

Distinguish label size from the clickable area. Where padding forms part of the activation area, measure the full region.

Provide size or appropriate spacing for small controls

WCAG 2.2 Level AA generally specifies a 24-by-24 CSS-pixel target, with exceptions including spacing, inline links, and equivalent controls. CSS pixels are layout units. Use the minimum alongside an assessment of actual operation. (W3C target size)

Make keyboard focus visible. Check standard button activation with Enter and Space, keeping its behavior distinct from a navigation link.

Verify the action and receipt of the inquiry

After changing wording, placement, or supporting copy, check rendering, activation, and the submission result. Repeated click events and people who complete an inquiry are different counts.

Use consistent denominators and outcomes

State whether the click-rate denominator represents exposed people or sessions. Define the completion-rate unit as well. See A/B test design for a comparison over the same period.

If clicks rise while completions fall, investigate input errors, pricing, and receipt instructions. Correct the affected field or explanation, then verify inquiry delivery after publication.

SpreadSite is a no-code website builder that lets you create, publish, and update a website from Google Sheets using ready-made templates.

To build a website while checking the path from service information to an inquiry, give SpreadSite a try!

Build a website with SpreadSite →

Frequently asked questions

Q: Which button color should I choose?

A: Choose a readable combination that identifies the action within the page. Evaluate adoption through operation and measured outcomes.

Q: Does a higher click rate mean success?

A: For an inquiry goal, evaluate completed submissions and input errors as well. Click counts and people completing a submission are different metrics.

Q: Is a 24-pixel mobile button sufficient?

A: 24 by 24 CSS pixels is the general WCAG minimum. Design the area with spacing, users, and operating context in mind.

Q: Should View pricing be a button element?

A: Use a link when navigating to a pricing page. Match the element role to the operation, whatever its visual shape.

Sources

Build a website with Google Sheets using SpreadSite