← All articles

UX friction: a page-by-page diagnosis of your site

Friction is not found at random: each type of page has its typical failures. Where to look, screen by screen, and how to check each hypothesis in your data.

Dots Papers cover for the article on diagnosing UX friction page by page, UX / CRO section

In brief

  • Friction is not spread evenly. Each type of screen has its typical failures: you look where it breaks, not everywhere.
  • Six screens to review. Home page, listing page, product or service page, form, checkout, mobile.
  • One symptom, one probable cause, one check. Spotting is done by eye, confirmation in your data, never the other way round.
  • An hour is enough for the first pass. A/B tests come after the diagnosis, not before.

A marketing manager shows us their traffic curve: it has doubled in a year. Their quote-request curve has not moved a millimetre. Their conclusion: the site needs rebuilding.

In most of the cases we open, the problem is not spread across the whole site. It is concentrated on one or two screens and has a precise name: a missing price, an unusable filter, one field too many.

Finding these blockages requires neither an expensive tool nor a large volume of traffic, only knowing what to look at screen by screen: the friction on a home page has nothing to do with the friction on a form. That is the purpose of this review, which complements our UX and CRO approach.

The home page: what must be understood in five seconds

A home page deals with three questions: what do you sell, to whom, and what is the next action. If they cannot be read without scrolling, the visitor leaves.

The test takes five minutes. Show the page to an outsider, leave it on screen for five seconds, hide it, then ask: what does this company sell, and what are you being offered to do? Three people are enough to see a pattern emerge.

The problem rarely comes from a lack of information, more often from an excess: a carousel that rotates every four seconds, four competing buttons on the first screen, a slogan that would suit any sector.

The listing page: the blockage comes from sorting, not from the catalogue

On a category page, the visitor is not trying to see all your products: they are trying to eliminate as many as possible, as fast as possible. Your filters are the tool they use for that.

Three failures come up again and again. The filters reflect your internal organisation (by range, by supplier) instead of the customer’s decision criteria (price, size, lead time, use). The default sort is arbitrary, often the order in which items were added to the catalogue, and that is a subject in itself: the order in which your products appear decides what sells.

The third is more discreet: the number of results is not displayed, so nobody knows whether the filter did anything.

Then look at the density of the cards. A grid reduced to a photo and a name forces people to open every page to compare: price, one differentiating criterion and availability remove those back-and-forths.

The product or service page: the information whose absence kills the decision

A purchase decision gets stuck on an unanswered question. Four families of information concentrate the blockages: price, lead time, guarantee, proof.

A missing price is the most costly case on service pages. “Quote on request” shifts onto the visitor the risk of wasting their time, whereas a range or a priced example of a typical project qualifies better than a form.

Lead time follows the same logic: delivery, response to a request, length of a project. The guarantee covers returns, withdrawal, after-sales service. Proof means dated reviews and named customer cases, not a wall of logos.

To spot the gaps, list the five questions most often asked on the phone and look for their answers on the page.

The mistake not to make Testing a button’s colour on a page that does not show the price. An A/B test compares two versions of the same page: it does not find the missing information, it reproduces it in both variants. Spotting comes before testing. The traffic volume needed is covered in our guide to CRO with low traffic.

The form: every field has a price

A form is judged field by field. For each one, ask a single question: what happens if I do not ask for it now? If the answer is “we will ask at the first conversation”, the field goes.

Fields added “to qualify” (title, company, headcount, budget) mostly qualify the visitors who give up.

Three settings weigh as much as length. Real-time validation, which shows the error when you leave the field and not after clicking Send. The content of the message: “Expected format: 06 12 34 56 78” rather than “Invalid field”. Keeping the data entered if the page reloads.

The mobile keyboard is set in one line of code. A phone field with type="tel" opens the numeric keypad, an email field with type="email" shows the at sign, and the autocomplete attribute lets the browser fill in name and address. Without them, everything is typed with a thumb, on the alphabetical keyboard.

The checkout or appointment booking: where they leave

The leak points in a checkout are few and always the same: mandatory account creation, shipping costs discovered late, choice of delivery method, payment step. For appointment booking, add the calendar with no slot before three weeks.

Spotting means going through the journey yourself, all the way to a real payment, on your phone, on a mobile network, and noting every place where you have to look for information or go back. The detail of the e-commerce steps is developed in our article on the purchase journey, from first click to order.

Confirmation is then read in the figures. The principle: compare two segments of your own audience on the same step, not your rate with a market average.

Checkout step What you pull out What should alert you
Basket to sign-in Pass-through rate, new visitors versus known customers A marked gap: the mandatory account is the brake
Sign-in to delivery Pass-through rate by device Mobile drops off on this step only
Delivery to payment Pass-through rate by delivery method One option concentrates the abandonments: its price is discovered here
Payment to confirmation Failure rate by payment method One method fails more than the others, or authentication breaks the return
All steps Time spent on the step One step longer than another with fewer fields
How to read it: each row compares two segments of the same site, never a market figure.

These measurements are only valid if the checkout is correctly instrumented. Check that each step fires an event in Google Analytics 4, which requires a tagging plan kept up to date. If the number of orders measured is clearly lower than in your back office, deal with the measurement loss first: that is the subject of our article on tracking reliability.

Mobile: what breaks on a small screen and nowhere else

Mobile does not need a separate audit, but the same journey redone with three extra constraints: the thumb, the keyboard and the network.

Touch targets first. Success criterion 2.5.8 of the WCAG 2.2 guidelines, published by the W3C in October 2023, sets a minimum target of 24 by 24 CSS pixels; Apple (44 points) and Google (48 dp) are stricter. Menu links packed together or a tiny close cross produce missed taps, invisible in your statistics.

One nuance applies to this whole review: what is only an annoyance for most visitors becomes a hard stop for those who navigate by keyboard or with a screen reader. A step that can only be passed with a mouse does not slow them down, it takes them out of the journey, and leaves no trace in your statistics. That is the subject of our article on checkout accessibility.

Then weight. Google’s Core Web Vitals set the LCP threshold at 2.5 seconds and, since March 2024, the INP threshold at 200 milliseconds. These thresholds are not judged on a single measurement: the assessment uses the 75th percentile of your real visitors over 28 days, which is enough to tip a page into amber even though it has not slowed down. Measure on a throttled network and on an entry-level phone, and above all measure after each fix: on our own site, two speed optimisations out of six changed nothing at all and were removed.

The quickest to fix remains floating elements: a consent banner that is hard to close, a chat bubble sitting on the add-to-basket button, a fixed bar that eats a third of the screen.

The spotting grid, by type of page

Type of page Observable symptom Probable cause Check to make
Home Short visits, even on brand traffic Unreadable value proposition, main action drowned out Five-second test on three people
Listing page Many views, few clicks through to product pages Filters modelled on internal organisation, arbitrary sort Count the clicks needed to get to ten results
Product or service page Long visits with no action Price, lead time, guarantee or proof missing Check the page against the five most-asked questions
Form Forms started then abandoned Unnecessary qualification fields, errors shown after sending Fill it in with a deliberate mistake
Checkout Drop concentrated on a single step Mandatory account, costs discovered late, payment failure Pass-through rate by device and by segment
Mobile Large conversion gap with desktop Touch targets too small, heavy pages, floating elements Redo the purchase on a phone, on a throttled network
The grid we use in our UX audits. Each symptom is a hypothesis that the right-hand column confirms or rules out.

Your hour of spotting, in order

  1. The figures. Conversion rate over the last 90 days by device, then your ten most-viewed pages.
  2. The home page. Five-second test on three outsiders, answers noted word for word.
  3. The listing page. Take the most visited, narrow it down to ten results, count the clicks.
  4. The product page. Tick off price, lead time, guarantee, proof, then the five most-asked questions.
  5. The form. Count the fields, enter a deliberate error, test which keyboard appears on a phone.
  6. The mobile journey. Go all the way to payment or booking on your phone, noting every hesitation.

What to remember At the end of the hour, you have ten to fifteen points. Sort them into two columns: missing information (to add, without testing) and presentation choices (to test). The first column gets fixed within the week and almost always produces the quickest gain.

Frequently asked questions

How much traffic do you need for this diagnosis?

No particular threshold. The review described here is direct observation: it works with 200 visitors a month as well as with 200,000. It is the next phase, the A/B test, that requires volume.

Do you need a heatmap or session recording tool?

Useful, but not necessary to start: an hour spent redoing your own journeys on a phone surfaces most of the structural friction. If you install this type of tool, deal with consent at installation, because session recording captures personal data.

Which page should you start with if you only have an hour?

The one immediately before your conversion: the form for a service business, the checkout for an online shop. That is where traffic is most qualified, so where friction costs most.

Does this diagnosis replace an A/B test?

No, it comes before it. The diagnosis is for finding hypotheses, the test for deciding between two options when the right answer is not obvious. Adding missing information is not tested, it is fixed.

What you do with these findings

A list of frictions is only useful once sorted. Missing information goes straight to fixing, with no protocol. Presentation choices go into a test queue, by traffic volume.

Redo this review twice a year, and after every major release. Friction does not arrive at random: it arrives with additions, one more field in a form, one more banner on mobile.

When the diagnosis points to the checkout, which happens often, the fix is rarely cosmetic: it takes fewer steps and fewer fields. Our PrestaShop clients then use the one-page checkout published by Datafirefly Limited, our agency’s sister company. But measure the friction first, otherwise you change checkout without knowing what you are fixing.

Unsure about the friction in your journey? We always start by redoing your purchase journey on mobile, screen by screen, before looking at a single statistic. Let’s talk.

Want to apply this to your own business?

Get in touch →

Further reading

Leave a comment

Your email address will not be published. Required fields are marked *

3 × four =