The brain is lazy. Design for that.
Your viewer's brain wants to spend as little energy as possible. Psychologists have spent a century mapping the shortcuts it takes. Learn them and you'll know why designs work, not just that they do.
Watch your brain group things for you
- Chaos costs energy12 random dots. Your brain has to inspect each one. It's tiring, and nothing stands out.
- ProximityMove them closer: you see 3 groups instantly. Same dots, nothing else changed. Spacing is your strongest tool.
- SimilarityA perfect grid, but colour and shape split it into columns. Things that look alike feel related.
- Common regionDraw a box behind some and they become a team. This is why "cards" work in every app.
- Isolation effectMake ONE thing different and the eye goes there in a split second (von Restorff, 1933). That's how buttons get clicked.
What the eye sees before you think
Some visual differences get processed in under a quarter of a second, before conscious thought. Scientists call these pre-attentive attributes. They are your main tools for grabbing attention.
Colour
Size
Orientation
You found each one instantly, without "searching". That's pre-attention. Other attributes that work the same way are shape, motion, enclosure and position.
Anne Treisman showed that simple features like colour and orientation pop out in parallel, all at once. Combinations of features ("the red and tilted one") need slow, one-by-one searching. Lesson: make the important thing different in one obvious way.
Treisman, A. & Gelade, G. (1980). A feature-integration theory of attention. Cognitive Psychology, 12(1).In a class photo where everyone wears white, you spot the kid in the red jumper straight away. If you want people to see something, give it the red jumper, and give it to only one thing.
The brain groups things automatically
In the 1920s, German psychologists (Wertheimer, Köhler, Koffka) found that we see wholes, not parts. "Gestalt" roughly means "shape" or "whole". These rules are why your layouts feel organised or messy.
Proximity
Things close together belong together. You see two groups, not 15 dots. Spacing is your strongest grouping tool.
Similarity
Things that look alike seem related. That's why all links should share one style and all buttons another.
Closure
Your brain fills gaps to complete shapes. Logos like WWF's panda and IBM's stripes rely on this.
Continuity
The eye follows lines and curves. You see two smooth waves, not four bent pieces. Use it to lead eyes across a page.
Figure / ground
We split everything into object and background. Clever logos (FedEx's hidden arrow) play with both.
Common region
A shared box or background beats proximity. The dots are evenly spaced, yet the box makes two pairs. This is why cards work.
Symmetry
Symmetrical shapes read as one stable object. Symmetry feels calm and formal; asymmetry feels dynamic.
Common fate
Things that move together belong together. That's why animated items in a group should move as one.
People don't read. They scan.
Eye-tracking studies show that on screens people mostly skim, in predictable shapes.
F-pattern
On text-heavy pages: across the top, a shorter line across, then down the left. Put key words at the start of lines and headings.
Z-pattern
On simple pages (posters, landing heroes): top-left → top-right → diagonal → bottom-right. Put the call-to-action where the Z ends.
Jakob Nielsen's 2006 eye-tracking of 232 users found the F-shaped pattern on text-heavy pages. NN/g's later work (2017) stresses it's a symptom of bad formatting. Good headings, bullets and bold keywords break it into easier patterns.
Nielsen, J. (2006). F-Shaped Pattern For Reading Web Content. Pernice, K. (2017). F-Shaped Pattern of Reading on the Web: Misunderstood, But Still Relevant. nngroup.comEight psychology laws every designer quotes
Hick's Law
The more choices, the longer it takes to decide. Cut options. A menu with 4 items beats one with 14.
Fitts's Law
Big, close targets are faster to hit. Make important buttons large and near where the cursor or thumb already is.
Working memory
We juggle only a few chunks at once (Miller said 7±2; newer research by Cowan says about 4). Chunk info: phone numbers are 3-3-4 for a reason.
Isolation effect
The one thing that's different gets remembered. One highlighted pricing plan, one red button.
Aesthetic-usability
People rate good-looking interfaces as easier to use, even when they're not. Beauty buys you forgiveness.
Jakob's Law
Users spend most of their time on other sites, so they expect yours to work the same. Be original in style, conventional in behaviour.
Serial position
We remember the first and last items in a list best. Put key items at the start and end of navs and slides.
Cognitive load
Every extra element costs brain energy. Remove anything that doesn't help the message. Clutter is a tax.
Simple and familiar wins
Lindgaard and colleagues flashed web pages for just 50ms. People's ratings of visual appeal were highly consistent with ratings made after 500ms. The gut decision about looks happens almost instantly. Note: this measured visual appeal, not trust or buying.
Lindgaard, G., Fernandes, G., Dudek, C., & Brown, J. (2006). Behaviour & Information Technology, 25(2), 115–126.Researchers at Google and the University of Basel found that sites with low visual complexity and high prototypicality (looking like what people expect for that kind of site) were judged most beautiful, within 17–50ms.
Tuch, A. N. et al. (2012). The role of visual complexity and prototypicality regarding first impression of websites. International Journal of Human-Computer Studies, 70(11).Don Norman says people respond to design on three levels. Visceral is "ooh, pretty" (instant, about looks). Behavioural is "this is easy" (about use). Reflective is "this says something about me" (about meaning and identity). Great brands hit all three.
Norman, D. A. (2004). Emotional Design: Why We Love (or Hate) Everyday Things. Basic Books.When you walk into a new classroom you decide "nice teacher" or "scary teacher" in about one second, just from how the room looks. Websites get judged the same way. A tidy room that looks like a normal classroom feels safest.
There's also an old industrial-design rule from Raymond Loewy called MAYA: "Most Advanced Yet Acceptable". Push things forward, but keep them familiar enough that people still get it.
Homework
Gestalt hunt
Find one logo for each Gestalt principle. Hint: FedEx, WWF, NBC, Unilever, Spotify.
Five-second test
Show a friend any homepage for 5 seconds, then hide it. Ask what the site was about and what they remember. That's a real UX research method.
Break Hick's Law
Find an app or menu with too many choices. Sketch a version with half as many.
Draw the Z
Screenshot three landing pages and draw where your eye actually went. Is it an F, a Z, or chaos?