Website design principles that get clicks

What is a CTA, and what should it say?

CTA means call to action: the invitation to take a next step, such as request a quote, book a consultation or compare plans. It can be a button or a clearly labelled link. The wording should describe the action and match the destination.

Compare "Click here" with "Request a roof inspection", or "Submit" with "Send my enquiry". The second versions explain the task. These are copy examples, not measured conversion results. Match the language to the actual service: do not label a general contact form "Book now" if it cannot confirm a booking.

Choose a primary CTA and give supporting actions less visual emphasis. A visitor who needs details may want to read a price guide first; that option can support the main decision without competing with it. GOV.UK's button guidance recommends descriptive action labels and cautions against multiple equally prominent primary actions.

• GOV.UK Design System: button labels and priorities ↗

Build a hierarchy that answers the buying questions

Use this page brief before designing: "This page helps [audience] understand [offer] so they can [next step]." For a fictional repair business, that might be: "This page helps local laptop owners understand repair options so they can request an assessment." For an online shop, the next step might be choosing the right size or checking delivery.

Start with a descriptive headline, a short explanation of who the offer helps and a clear next step. Follow with the facts a visitor needs: scope, cost or how pricing is agreed, location if relevant, timing and what happens after contact. Use headings that reveal the content rather than decorative slogans.

A fictional service page might use: "Laptop repairs in your area", "Tell us the fault and your model", then "Request an assessment". Beneath that, explain the assessment process and any charge before visitors commit. Do not invent a turnaround, price or location to make the layout look complete.

Create a sensible reading order on mobile as well as desktop. Let essential information remain visible and put supporting detail in clear sections or accessible accordions. Avoid hiding the offer, important restrictions or the next step in a slider or an unexplained icon.

Design buttons and links people can use

Give controls enough room to see and select, including space between nearby actions. Check text contrast, focus visibility and whether the page works with a keyboard. A button should still be recognisable without relying on colour alone, and the selected action should have a clear name.

Use links for navigation and buttons for operations such as submitting a form. Give links meaningful wording so the destination makes sense in context. Avoid a page full of identical "Learn more" labels when each destination is different.

W3C's WCAG 2.2 guidance explains target sizing, spacing and exceptions; do not treat one pixel measurement as proof that an entire site is accessible. Check the actual journey at different screen widths, zoom levels and input methods. If an external link opens a new tab, make that behaviour understandable to visitors.

• W3C: target size and spacing ↗
• W3C: understandable link purpose ↗

Reduce form friction without removing useful information

Ask for the information required for the next conversation, rather than everything the business might eventually need. An initial design enquiry may need a name, reply address and a short description of the project. A detailed procurement process may legitimately need more; explain why.

Use visible labels, mark optional fields and show clear error messages that help people fix the issue. Preserve entered information when validation fails. After submission, show an honest confirmation and explain the next step. Do not imply that an appointment is booked when the form only sends a request.

Explain how contact details will be used, and keep marketing choices separate from the enquiry. Test the journey from a visitor's perspective, including missing fields, slow connections and a small screen. Never use fake urgency, preselected extras or misleading labels to increase clicks.

• W3C: accessible forms tutorial ↗

Use real evidence and keep the page responsive

Help visitors make a decision with genuine examples, clear service details and accurate business information. Use real customer feedback with permission and actual work photographs where they matter. Stock photographs can set a mood, but should not be presented as proof of completed projects or a team that does not exist.

Keep important content available quickly. Optimise images, avoid loading unnecessary scripts and reserve space for media so the page does not jump while someone is trying to select a control. Check mobile behaviour with real content rather than a short placeholder headline.

Core Web Vitals describe loading performance, responsiveness and visual stability. Use them to investigate user experience alongside practical observation; a good score is not a guarantee of bookings, accessibility or search position. Start by finding the slowest or most disruptive part of the actual customer journey.

• web.dev: understanding Core Web Vitals ↗

Measure clicks that lead somewhere useful

Define the action you want to improve: a completed enquiry, a confirmed booking, a purchase or a useful resource download. A button click is an intermediate signal. If people click but abandon the next screen, investigate the wording, destination and task instead of celebrating the click count.

For an illustrative calculation, 40 CTA clicks from 800 page visits is a 5% click rate. If eight of those visitors complete an enquiry, click-to-enquiry completion is 20%, and visit-to-enquiry completion is 1%. These are fictional numbers, not performance benchmarks. Use consistent periods and definitions, and account for repeat visits and automated traffic.

Keep a simple experiment record: page and audience; current problem; proposed change; primary outcome; observation period; and result. Change one meaningful element at a time when practical. Small samples and seasonal changes limit what you can conclude. Use privacy-appropriate measurement and do not install tracking merely because a tool makes it easy.