Design Principles
The Squint Test
Squint at a page until it blurs — the most visually dominant elements should be the most important ones.
Where it comes from
It isn't the work of one researcher but a studio technique handed down through design practice — a quick, low-tech way to check visual hierarchy that's been taught for decades and popularised in usability writing such as Steve Krug's Don't Make Me Think.
Why it matters for your website
A useful quick test: squint at your page until it blurs. Whatever stands out most is where visitors' eyes land first. If that isn't your headline and primary call to action, your visual hierarchy is working against you.
Visitors don't really read a new page — they triage it. In the first instant, before any words are processed, the eye is pulled toward whatever carries the most visual weight: the biggest, boldest, highest-contrast thing on screen. The squint test simply makes that split-second glance visible to you.
When the loudest element is a stock photo, a cookie banner, or a row of identical buttons, that first glance is spent on the wrong thing — and you rarely get a second one. Fixing hierarchy is one of the cheapest, highest-leverage changes you can make, because it costs layout attention, not new content.
Wrong vs right
Squint at the homepage and three things compete equally: a stock hero image, a cookie banner, and a newsletter pop-up. The headline and the 'Start free' button blur into the background.
Squint and the headline plus one bright primary button dominate. Everything else recedes. The eye is led to the thing that matters first.
A dashboard where every card has the same weight, border and colour — squinting reveals an even grey field with no entry point.
The single most important metric is larger and higher-contrast; the rest are quieter. Squinting, you know exactly where to look first.
A pricing page where all three plans shout equally — same size, same colour button — so the eye has nowhere to land and no plan feels like the choice.
One plan is raised and accented; the others sit back. The squint reveals a clear recommended path.
Understanding The Squint Test
Visual hierarchy is the order in which elements compete for attention, and it's set almost entirely by a handful of levers: size, weight, colour, contrast and the space around things. The squint test works because blurring the page strips away the detail and leaves only that weighting — so you see what a visitor's eye sees in the first half-second, before they've read a word.
To run it, squint until the page goes soft, apply a heavy blur in any image tool, or simply step back from the screen. Note which shapes still stand out. Ideally that's two things, in order: your core message, then your primary action. If everything blurs into one even field, you don't have a weak hierarchy — you have none.
The fix is usually subtraction, not addition. A failed squint test is rarely solved by making the important thing bigger and bigger; it's solved by quietening everything that's competing with it — toning down secondary buttons, removing decoration, giving the one thing that matters more contrast and more space. It sits close to the Gestalt figure-ground principle and to the disciplined use of whitespace.
How Kweri checks it
Kweri's UX lens reviews the first screen the way the squint test does — it captures your page and assesses whether the most visually dominant elements are the ones that matter (your value proposition and primary action), or whether decoration, banners and secondary content are pulling focus. This is genuinely a judgement call rather than a measurement, so Kweri treats it as a heuristic critique: it tells you what appears to dominate and why that may be working against your goal, and it's honest that hierarchy is a designer's call, not a number a tool can score outright.
FAQ
What is the squint test in design?
The squint test is a quick check of visual hierarchy: you blur your view of a page (by squinting, stepping back, or applying a blur) and see which elements still stand out. Those are what visitors notice first.
How do I actually run a squint test?
Literally squint at your screen until the page blurs, step back from it, or apply a heavy blur in any image tool. Note which shapes and areas still stand out — those are what visitors register first.
What is visual hierarchy?
Visual hierarchy is the arrangement of elements to signal their order of importance, using size, weight, colour, contrast and spacing. Good hierarchy guides the eye to the most important thing first.
What should dominate after I squint?
Usually your core message (the headline) and your primary call to action. If a stock image, an ad, or a cookie banner wins instead, your hierarchy is spending attention on the wrong things.
How do I fix a page that fails the squint test?
Usually by subtracting emphasis rather than adding it: quieten competing buttons and decoration, then give the single most important element more contrast and more space so it clearly wins the glance.
Related principles
The eye separates a subject (figure) from its surroundings (ground) — that separation must be unambiguous.
Space around and between elements is not wasted — it creates hierarchy, grouping, and focus.
People scan web pages rather than read them — structure content so scanners still get the point.
Attribution & sources
Identified by Established design-practice technique. Catalogued from Design practice (popularised in usability writing such as Steve Krug's Don't Make Me Think).
There's no single canonical source — the squint test is a long-standing studio technique for checking visual hierarchy, widely taught and written about rather than owned by one author.
See The Squint Test on your own site
Run a free Kweri audit — a plain-English review of your site’s speed, accessibility, SEO and design, ranked by what to fix first. No login, no jargon.
Run a free audit →