Module 1: Perception

What the user sees before thinking

Learning objectives: By the end of this module, you will be able to:

Audit the visual hierarchy of a screen, identifying which elements grab attention before conscious thought.
Anticipate which zones and elements the user will ignore through selective attention.
Tell apart an interface that is genuinely clear from one that is merely pleasant to look at: a difference that, as we'll see, contaminates your research if you don't control for it.

Estimated time: 1-1.5 hours

There's a comfortable assumption almost all of us fall into when we design: that the user looks at our screen, reads it, and then decides. As if there were a rational moment where they evaluate what we put in front of them.

But the research tells us the human mind doesn't work that way. Before the user "thinks" anything about your interface, their brain has already organized, grouped, prioritized and discarded a good part of what's on screen. That work happens in milliseconds and without asking permission: by the time the person becomes aware of what they're seeing, they're already getting an edited version.

This module is about that layer that comes before thought. We'll look at four perception phenomena that govern the first glance. But I want to be clear from the start about something that repeats throughout the course: these phenomena tend to get called "laws", and the word promises more than they deliver. They describe strong, well-documented tendencies, not mechanical certainties. A good designer uses them to form hypotheses, not to close an argument.

1.1. The front-page editor analogy

Imagine that between the world and your consciousness there's a newspaper editor who never consults you. Your eyes capture far more than you get to process; that editor, in milliseconds, builds the front page for you.

And why does it do that work for you? Because conscious processing is slow and expensive, and far more information comes in through the eyes than the brain can attend to at once. The editor filters so you can act fast instead of freezing in front of every screen. The flip side, the one that concerns us as designers, is that the filtering runs by the editor's rules, not by what you'd like the user to look at.

It does four things, and each one matches a phenomenon we care about:

It decides what goes in the headline and what ends up in a small box at the bottom. That's visual hierarchy: not all elements weigh the same, and the weight is assigned by perception before logic.
It groups related stories under a single block. Those are the Gestalt principles: the eye joins what's close together or looks alike, and reads it as "one single thing".
It bins whatever looks like filler or advertising, without reading it. That's selective attention (and its most studied version on screens, banner blindness).
And if the front page is well designed, it makes you trust that the stories are well written, even if you haven't read them. That's the aesthetic-usability effect, the most treacherous of the four.

You never negotiate with this editor. You get the edit and you believe it's the world.

1.2. How to audit the perception of a screen

Here's a procedure you can run on any screen in a few minutes: your phone company's site, your own site, a client's, whatever app you have open right now.

Step 1: the squint test

Squint until the screen goes blurry. What still stands out is what the editor put on the front page; what dissolves doesn't exist in the first glance.

Its limit: it tells you what stands out, not whether what stands out is the right thing. A button can win the squint test and still be the wrong element.

Step 2: map the grouping (Gestalt)

Identify which elements the eye reads as a single block through proximity or similarity. Then ask yourself whether that visual grouping matches the actual logical relationship.

Its limit: Gestalt principles sometimes compete with each other (proximity versus similarity), and when they clash there's no rule that says which one wins. The grouping you see may not be the one the user sees.

Mark the zones that "look like a banner": top strip, side columns, anything with an advertising aesthetic. The user won't look there, no matter how important the thing you put in it.

Its limit: banner blindness is learned, and today people ignore anything that looks like an ad, legitimate content included. The problem isn't always position: sometimes it's that your useful element dressed up as advertising.

Step 4: separate pretty from usable (aesthetic-usability effect)

Ask yourself honestly whether you're judging the screen as clear or only as pleasant.

Its limit, and why it's the hardest step: this bias operates on you too, and on your users during a test. A good-looking interface makes people report that it's more usable than it is, and makes them forgive or fail to mention real problems. You don't fix this with more self-awareness; you fix it with method, and that's what the next example is about.

1.3. Case study: "PlataClara" (fintech)

PlataClara is a fictional neobank (any resemblance to a real one is exactly the point). Its account-opening screen was, objectively, well designed: careful typography, generous spacing, a friendly illustration. In moderated usability tests, almost every participant described it as "clear", "clean", "easy". And yet the rate of people who completed the sign-up was low.

The team ran the perceptual audit:

Squint test: squinting, the "Open account" button weighed about the same as three secondary links ("See plans", "Help", "Log in"). There was no headline. The front-page editor didn't know which was the main story.
Gestalt: the regulator's seal sat, through proximity, next to the footer with the legal terms. The eye grouped it with "fine print", not with "this is trustworthy".
Selective attention: that same seal lived in the top right corner, the banner zone par excellence. Nobody saw it.
Aesthetic-usability: here was the trap. The team almost shelved the problem, because the qualitative evidence said "it's all clear". What was happening is that the screen was so pleasant that participants reported a clarity their behavior didn't confirm.

Fixing hierarchy and position is the easy part: one CTA with real weight, secondaries demoted to text, seal out of the banner zone. The part that matters to you as a researcher is the other one: the team stopped believing "it's clear" and went to look at behavior (where people dropped off, which field they stalled on). The qualitative and the quantitative data contradicted each other, and the contradiction was the finding. Crossing both sources and chasing where they don't line up is, as far as I've seen, the best defense against this bias.

1.4. Application activity (15 minutes)

Pick a screen you use every day (your banking app, an online store, your work tool) or one you designed yourself.

Run the squint test on it and note: what stays on the front page? what disappears?
Identify an element you thought was prominent and that doesn't actually win the first glance.
Mark a zone that "looks like a banner" and check whether something important is hiding there.

Suggested solution: there's no single right answer, but a good result almost always includes an uncomfortable finding. The most common one is realizing that your main CTA is competing with two or three elements of the same weight, or that something you considered visible (a notice, a seal, a key link) landed in a blind zone. If you finished the activity without any uncomfortable finding, you probably looked at the screen as its author and not as its user: try again with someone else's screen.

1.5. References

Wagemans, J., et al. (2012). A century of Gestalt psychology in visual perception: I. Perceptual grouping and figure–ground organization. Psychological Bulletin, 138(6).
Benway, J. P., & Lane, D. M. (1998). Banner blindness: Web searchers often miss "obvious" links. ITG Newsletter.
Kurosu, M., & Kashimura, K. (1995). Apparent usability vs. inherent usability: experimental analysis on the determinants of the apparent usability. CHI '95 Conference Companion.
Tractinsky, N., Katz, A. S., & Ikar, D. (2000). What is beautiful is usable. Interacting with Computers, 13(2), 127–145.
Ware, C. (2012). Information Visualization: Perception for Design (3rd ed.). Morgan Kaufmann.

Additional material. The psychology underneath this module is taught in full, for free, in MIT's Introduction to Psychology (9.00SC): Vision I, Vision II and Attention. It's psychology, not UX: you go there for the foundation, not for the design recipe.