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
Video lecture
Landing page UX testing: five-second, first-click, heatmaps and A/B tests
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
Transcript of the narration, chapter by chapter.
0:00 Landing page UX testing
Here's a question that saves marketing budgets. Before you spend ten thousand dollars sending people to a landing page, wouldn't you like to know whether they'll understand it? You can find out in an afternoon, for almost nothing. And after launch, you can see exactly where real visitors get stuck. In this lecture, you'll learn which testing method answers which question, how to run five-second and first-click tests, how to read heatmaps and session recordings responsibly, how to calculate whether an A/B test is even possible with your traffic, and how to use AI to speed up analysis without inventing findings.
0:44 Why it matters
Why does this matter? Because a landing page is really a hypothesis. We believe this headline, this proof and this button will help this audience decide. Testing checks the hypothesis before and after you spend money on it. Here's an analogy. A restaurant doesn't put a new dish on the menu without letting a few trusted diners taste it first. And after launch, the chef watches which plates come back half-eaten. Pre-launch tests are the tasting. Behavior analytics is watching the plates. And an A/B test is serving two versions to many diners and counting which one they finish.
1:27 Method by question
Choose the method by the question. Is the offer clear at a glance? That's a five-second test. Will people click the right thing first? A first-click test. Can people complete the task, and why not? A moderated usability test with about five people per round. Which of two directions do people understand better? A comprehension test with real questions, not just which do you prefer. Where do real visitors get stuck? Heatmaps and session recordings. Where do they drop off? Funnel analytics. And does a change improve conversion at scale? That's an A/B test. Here's the key idea. The wrong method gives you confident answers to the wrong question.
2:14 The five-second test
The five-second test. Show people the first mobile screen of your page for five seconds, then hide it. Ask three questions. What is this page offering? Who is it for? What would you do next? Code the answers as correct, partly correct or wrong. As a rule of thumb for a small test like this, if fewer than about half can say what the page offers, fix the headline before you buy traffic. You can run it with tools like Lyssna or Maze, or simply over a video call. Ten to twenty people per version is plenty for a clear signal.
2:58 First-click and preference tests
The first-click test. Give people a task, like you want to know the price for three staff members, where would you click first? Then record where they click. Research on first-click testing has found that a correct first click is a strong predictor of completing the task. So it's a fast way to check your labels, your navigation and where your call to action sits. And a warning about preference tests. Asking which design do you prefer mostly measures taste. If you're comparing two directions, ask comprehension questions, like what does this cost per month, and measure who gets it right.
3:42 Heatmaps and recordings
After launch, behavior analytics. Tools like Microsoft Clarity, Hotjar and Contentsquare show heatmaps of clicks and scrolling, plus session recordings of individual visits. Look for four signals. Rage clicks, repeated clicks in one spot, often on something that looks clickable but isn't. Dead clicks, which get no response. Scroll drop-off before a key section, like pricing. And hesitation on particular form fields. Use these tools responsibly. Mask form inputs and sensitive text, get consent where it's required, mention them in your privacy notice, and don't keep recordings longer than you need.
4:22 Can you A/B test at all?
Now A slash B tests. Show different versions to randomly split groups and compare outcomes. But first, a reality check: is your traffic big enough? Small improvements need big samples. Let's take an example. Your page converts three percent, and you hope for a twenty percent relative lift, to three point six percent. You'll need roughly fourteen thousand visitors per variant. At four thousand visitors a week, that's about seven weeks. If that isn't realistic, test a bolder change, test on a higher-traffic step, or use qualitative tests plus careful before and after monitoring. And never stop a test early because one version looks ahead.
5:08 Worked example 1: yoga studio
Worked example one, simple. A yoga studio's class pass page. A five-second test with ten people shows most can say it's yoga classes, but only a few notice it's for beginners, which is the whole point of the offer. The headline changes to first yoga class? Start with our beginner pass. A retest shows most people now mention beginners. Then a first-click test: find out how much the pass costs. Many people click schedule. So the team adds a visible price near the top. Two tests, one afternoon, no ad budget spent.
5:48 Worked example 2: bootcamp (illustrative)
Worked example two, a business scenario with illustrative numbers. A coding bootcamp in Lahore plans a large paid campaign. A five-second test with twelve people shows most think the page is for a university degree. A first-click test shows people clicking curriculum when asked about price. The team names the audience and outcome in the headline, adds a visible fees and installments link, and retests. Most people now describe the offer correctly. After launch, Clarity recordings show rage clicks on a testimonial photo, so they link it to the full case study. With enough traffic, they A/B test two pricing layouts.
6:32 Watch me do it: sample size in Python
Watch me do it. I open a terminal and run the sample size script from the lesson. It uses only Python's standard library. I enter a baseline conversion rate of three percent and a relative lift of twenty percent, with the usual five percent significance level and eighty percent power. It returns about fourteen thousand visitors per variant, and with my illustrative four thousand visitors a week, about seven weeks. Too long for this campaign. So instead, I write a test plan for a bolder change, a new headline and offer framing, and set a guardrail for refund requests. Then I set up a five-second test to check it first.
7:20 AI-assisted synthesis
One more speed-up: AI-assisted synthesis. After five moderated sessions, I paste anonymized notes into an approved AI assistant and ask for each participant's task success, where they hesitated, and verbatim quotes about confusion, then issues grouped with counts, like three out of five, and a suggested severity. The rule: no invented quotes. I check every quote and count against my notes before I share anything. AI makes the summary faster. It doesn't make it true. You do that part.
7:54 Common mistakes and measures
Common mistakes. Using preference votes as evidence. Running A/B tests on low traffic and trusting noisy winners. Stopping a test the moment one version looks ahead. Testing tiny changes, like button shades, when the headline is unclear. Recording sessions without masking or consent. And testing only after launch. How do you measure success? Before launch, the share of people who answer or click correctly. After launch, conversion by device and source, with guardrails. And across your program, how many issues you catch before launch versus after. A healthy habit moves discovery earlier.
8:34 Recap and try this now
Let's recap. Pick the test by the question. Five-second tests for clarity. First-click tests for labels and placement. Usability tests for why. Heatmaps and recordings for where real visitors get stuck, used responsibly. And A slash B tests for impact at scale, only after you've calculated the sample size. Use AI to speed up synthesis, and verify everything. Try this now. Run a five-second test with five people on your main landing page, and a first-click test on one key task. Then run the sample size script with your own numbers, and write a test plan you can actually complete.
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
| Question | Method | Typical sample | Tools (examples) |
|---|---|---|---|
| Is the offer clear at a glance? | Five-second test | 10–20 people per variant | Lyssna, Maze, or a video call |
| Will people click the right thing first? | First-click test | 15–30 people | Lyssna, Maze, Optimal Workshop |
| Can people complete the task? Why not? | Moderated usability test | 5 per round | Video 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 variant | Lyssna, Maze, survey tool |
| Where do real visitors get stuck? | Heatmaps and session recordings | All consenting traffic | Microsoft Clarity, Hotjar, Contentsquare |
| Where do visitors drop off? | Funnel analytics | All tracked traffic | GA4 funnel exploration |
| Does a change improve conversion at scale? | A/B test | Calculated in advance | VWO, 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:
- What is this page offering?
- Who is it for?
- 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 versionHands-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.
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.