UI/UX Design Basics for MarketersLanding-page UX and mobile-first design · Lesson 14 of 21

Landing page UX testing: five-second, first-click, heatmaps and A/B tests

Article · 10 min · 9 min lecture

Video lecture

Landing page UX testing: five-second, first-click, heatmaps and A/B tests

13 chapters · about 9 min · full transcript

Coming soon

Chapter 1 of 13

Landing page UX testing

  • Know before you spend
  • Right method for each question
  • Five-second, first-click, heatmaps
  • A/B tests that are actually possible

The narrated lecture is in production

Every chapter is scripted and ready. Browse the chapters and read the full transcript now — the video will appear here when it’s published.

Chapters

Test before you spend, and keep testing after you launch

A landing page is a hypothesis about what visitors need to decide. Before a campaign, you can test that hypothesis cheaply with quick, focused methods. After launch, behavior analytics and experiments tell you whether it holds at scale. This lesson gives you a practical testing toolkit for landing pages, with the right method for each question and the maths to know when an A/B test is even worth running.

Choose the method by the question

QuestionMethodTypical sampleTools (examples)
Is the offer clear at a glance?Five-second test10–20 people per variantLyssna, Maze, or a video call
Will people click the right thing first?First-click test15–30 peopleLyssna, Maze, Optimal Workshop
Can people complete the task? Why not?Moderated usability test5 per roundVideo call + prototype or staging page
Which of two directions do people understand better?Comprehension test with questions (not just "which do you prefer?")15–30 per variantLyssna, Maze, survey tool
Where do real visitors get stuck?Heatmaps and session recordingsAll consenting trafficMicrosoft Clarity, Hotjar, Contentsquare
Where do visitors drop off?Funnel analyticsAll tracked trafficGA4 funnel exploration
Does a change improve conversion at scale?A/B testCalculated in advanceVWO, Optimizely, AB Tasty, PostHog, GrowthBook

Tool availability and pricing change; check current plans. Google Optimize was discontinued in September 2023, so older tutorials that rely on it are out of date.

Five-second and first-click tests

A five-second test shows the page (usually a screenshot of the first mobile screen) for five seconds and then asks:

  1. What is this page offering?
  2. Who is it for?
  3. What would you do next?

Code the answers as correct, partly correct or wrong. If fewer than about half of participants can say what the page offers, fix the headline before spending on traffic. (This is a rule of thumb for a small qualitative test, not a statistical threshold.)

A first-click test asks participants to complete a task ("You want to know the price for three staff members. Where would you click first?") and records where they click. A correct first click strongly predicts task success, so it's a fast check of labels and CTA placement.

Preference tests: handle with care

"Which design do you prefer?" mostly measures taste. If you compare two directions, ask comprehension questions ("What does this cost per month?") and measure correctness, not just votes.

Behavior analytics on live pages

Heatmaps show where people click, move and scroll; session recordings show individual journeys. Look for:

  • Rage clicks (repeated clicks in one spot) — often a non-clickable element that looks clickable, or a broken button.
  • Dead clicks — clicks with no response.
  • Scroll drop-off before the key section (for example, pricing).
  • Form hesitation on particular fields.

Use responsibly: mask form inputs and sensitive text, obtain consent where required, disclose use in your privacy notice, and limit retention.

Hands-on: will an A/B test even work? Calculate sample size first

Small sites often cannot detect small improvements. Before you run a test, estimate how many visitors each variant needs. This script uses only Python's standard library:

from statistics import NormalDist
from math import sqrt, ceil

def sample_size_per_variant(baseline_rate: float, relative_lift: float,
                            alpha: float = 0.05, power: float = 0.8) -> int:
    """Visitors needed per variant for a two-sided test of two proportions."""
    if not (0 < baseline_rate < 1) or relative_lift <= 0:
        raise ValueError("baseline_rate must be between 0 and 1; relative_lift must be > 0")
    p1 = baseline_rate
    p2 = baseline_rate * (1 + relative_lift)
    if p2 >= 1:
        raise ValueError("The expected rate must stay below 100%")
    z_alpha = NormalDist().inv_cdf(1 - alpha / 2)
    z_beta = NormalDist().inv_cdf(power)
    p_bar = (p1 + p2) / 2
    numerator = (z_alpha * sqrt(2 * p_bar * (1 - p_bar))
                 + z_beta * sqrt(p1 * (1 - p1) + p2 * (1 - p2))) ** 2
    return ceil(numerator / (p2 - p1) ** 2)

if __name__ == "__main__":
    n = sample_size_per_variant(baseline_rate=0.03, relative_lift=0.20)
    weekly_visitors = 4000            # illustrative: visitors to this page per week
    weeks = ceil(2 * n / weekly_visitors)
    print(f"~{n} visitors per variant; about {weeks} week(s) at {weekly_visitors}/week")

With a 3% baseline and a hoped-for 20% relative lift (3.0% → 3.6%), the answer is roughly 14,000 visitors per variant. A page with 4,000 visitors a week would need about seven weeks. If that's unrealistic, test a bolder change, use a higher-traffic step, or rely on qualitative testing and careful before/after monitoring.

An A/B test plan you can copy

Hypothesis:    Because 7/10 five-second-test participants couldn't say who the course is for,
               adding the audience to the headline will increase enrollment starts on mobile.
Primary metric:     Enrollment starts / landing-page visitors (mobile, paid social)
Guardrails:         Refund requests within 14 days; page LCP; bounce to support
Sample size/duration: calculated in advance; run whole weeks; no peeking-based stopping
Decision rule:      Ship if the variant wins at the pre-set significance and guardrails hold
Segments to check:  Device, new vs returning, language version

Hands-on: AI-assisted synthesis of test sessions

After five moderated sessions, paste anonymized notes or transcripts into an approved AI assistant:

These are anonymized notes from 5 usability sessions on a landing page (task: book a free call).
For each participant, list: task success (yes/partial/no), where they hesitated, and any direct quotes
about confusion (verbatim only). Then group issues across participants with a count (e.g., 3/5)
and suggest a severity (high/medium/low) with a one-line reason. Do not invent quotes.

Verify every quote and count against your notes before sharing.

Worked example: a bootcamp landing page in Lahore

A coding bootcamp plans a large paid campaign. A five-second test with 12 people shows most think the page is for a university degree. A first-click test shows many people click "Curriculum" when asked about price. The team rewrites the headline to name the audience and outcome, adds a visible "Fees and installments" link, and retests: most participants now describe the offer correctly. After launch, Clarity recordings reveal rage clicks on a non-clickable testimonial photo; the team links it to the full case study. With enough traffic, they then A/B test two pricing layouts using the plan above. (Illustrative scenario.)

How to measure success

For pre-launch tests, measure the share of participants who answer correctly or click correctly first. For live pages, measure conversion by device and source, with guardrails. Across the program, track how many issues you catch before launch versus after — a healthy testing habit moves discovery earlier.

Key takeaways

  • Choose the test by the question: five-second for clarity, first-click for labels, usability tests for why, analytics for where, A/B tests for impact at scale.
  • Preference votes measure taste; ask comprehension questions instead.
  • Heatmaps and recordings reveal rage clicks, dead clicks and scroll drop-off; mask sensitive data and respect consent.
  • Calculate A/B sample size before testing; low-traffic pages need bolder changes or qualitative methods.
  • Use AI to speed up synthesis, but verify every quote and count.

Check your understanding

Quick questions to lock in the lesson. They don’t count towards your certificate.

  1. You want to know whether visitors understand what your landing page offers within a glance. Which method fits best?
  2. Your page gets about 1,500 visitors a month with a 2% conversion rate. You want to detect a 10% relative lift. What is the most sensible approach?
  3. Session recordings show repeated clicks on a testimonial photo that does nothing. What does this most likely indicate?

Put it into practice

Run a five-second test with five people on your main landing page, a first-click test on one key task, and use the Python script to calculate whether an A/B test is feasible with your traffic. Write the resulting test plan.

Enrol for free to save your progress

Reading is always free. Enrol to keep your place, take the final assessment and earn a verifiable certificate.