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. Each step goes after one of the four phenomena the front-page editor runs on, and each one has a limit worth knowing before you trust the result.

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.

Why it works: it's an old technique among visual and interaction designers, and the logic behind it is simple. When you defocus, the brain stops processing fine detail (legible text, above all) and is left only with masses of contrast, colour and the dominant groupings. Shifting perspective that way exposes how visual weight is distributed, which at normal attention slips past you because you're reading the content instead of looking at the composition.

Its limit: it tells you what stands out, not whether what stands out is the right thing. A secondary button can win the squint test just by being heavily saturated, stealing attention from the element that actually matters. Visual hierarchy should correspond to the hierarchy of the user's tasks, and that correspondence is a decision you make, not a result the test hands you.

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.

Why it works: our vision is optimised to find structure fast. Gestalt principles describe how the brain imposes order by grouping: proximity says that objects physically close together tend to be perceived as one unit, and similarity, that we group elements sharing shape, colour or size. When information is presented using those rules, the user doesn't have to scrutinise the screen; they scan it and understand it with almost no conscious effort.

Its limit: Gestalt principles sometimes compete with each other (proximity versus similarity), and when they clash there's no universal rule that says which one wins. The grouping you see may not be the one the user sees. And if you visually group elements with no functional relationship, what you produce isn't neutrality but ambiguity, which is more expensive: the user spends cognitive load decoding a relationship that never existed.

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

Why it works: data comes into the brain through every sensory channel at once, and to avoid collapsing it uses selective attention as a bottleneck: it actively filters out whatever it considers irrelevant to the goal at hand. On screens that produced fast, fairly stable reading patterns (the most cited is the F-shaped pattern, which the Nielsen Norman Group identified in 2006: a horizontal sweep across the top, then vertically down the left side). Banner blindness is a by-product of that filter: we learned to ignore the peripheral areas, the right column especially, because historically that's where advertising lived, not content.

Its limit: it's learned behaviour, and for that reason quite predictive, but the problem doesn't reduce to physical position. Sometimes the opposite happens: a genuinely useful element (a help button, a download link) was designed with so much colour or visual noise that the user's brain classified it as an ad and filtered it out. They didn't ignore it for where it was, but for how it looked.

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

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

Why it works: the aesthetic-usability effect is a well-documented bias. Kurosu and Kashimura (1995) showed that a system's apparent usability is strongly conditioned by its visual attributes, and Donald Norman explains it in Emotional Design through the brain's visceral level, which processes beauty automatically: what we find pleasing puts us in a better mood, and in a better mood we're more creative and more tolerant of minor difficulties. Naming the bias is the first step towards being able to look at it.

Its limit, and why it's the hardest step: the bias operates on you as the auditor and on your users during a test. If an interface is easy on the eye, people report that it's extremely easy to use, forgive real problems, and — worse for your research — assume the errors are their own fault rather than the system's, so they never even mention them. Telling whether a screen works or whether we merely like it isn't solved with self-awareness; it's solved with method and empirical evidence, 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), 1172–1217.
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, 292–293.
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.
Johnson, J. (2010). Designing with the Mind in Mind: Simple Guide to Understanding User Interface Design Rules. Morgan Kaufmann.
Norman, D. A. (2004). Emotional Design: Why We Love (or Hate) Everyday Things. Basic Books.
Cooper, A., Reimann, R., Cronin, D., & Noessel, C. (2014). About Face: The Essentials of Interaction Design (4th ed.). John Wiley & Sons.
Pernice, K. (2017). F-shaped pattern of reading on the web: Misunderstood, but still relevant (even on mobile). Nielsen Norman Group. nngroup.com

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.