Design Psychology
Key question
Where do people look first?
Attention is scarce. Every page, every poster and every screen competes with countless other stimuli for it. What catches the eye first often decides whether something is read, understood and used.
Learning objective: You will direct attention deliberately through contrast, size, and position, and identify when visual prominence and importance do not align.
Attention is a scarce resource.
3.1 / Abnormality
What stands out is seen first.
We cannot pay attention to everything at the same time, so we are constantly filtering. Two forces work together: stimuli that stand out strongly from their surroundings attract our gaze (stimulus-driven). At the same time, we look for what matches our goal (goal-driven).
Salience refers to how strongly a stimulus stands out from its surroundings, for example through colour, brightness, size, shape or movement. A single red element amongst grey ones immediately catches the eye (pop-out). Research into feature searches, such as that by Anne Treisman, shows that such individual features are found very quickly.
The implication for design: use contrast sparingly. When everything stands out, nothing stands out.
When everything is loud, you can't hear a thing.
3.2 / Reading patterns
People rarely read pages from top to bottom.
Eye-tracking studies by the Nielsen Norman Group show two typical patterns, depending on whether a page is driven by text or imagery:
TEXT-HEAVY PAGES
F-sample
A full-width line, a shorter one underneath, then the gaze moves down along the left margin.
VISUALLY POWERFUL LAYOUTS
Z-pattern
From top left to top right, diagonally to bottom left and finally to bottom right.
These patterns are tendencies, not rules. They depend on the task, layout, content, and prior knowledge. Anyone searching with a specific goal in mind reads differently from someone who is just browsing. A clear structure can change the pattern.
For design, this means: placing key words at the beginning of lines and paragraphs, using meaningful subheadings, and not hiding important information in the bottom right-hand corner.
Patterns are tendencies; the task decides.
3.3 / Hierarchy
Hierarchy says: This first, that afterwards.
Visual hierarchy organises content by importance. Four key elements take centre stage:
01
Size
Bigger looks more important.
02
Contrast
Stronger contrast catches the eye.
03
Position
In Western reading order, the top and left are often noticed first.
04
White space
White space around an element highlights it whilst also grouping it.
A simple typographic hierarchy uses three levels: heading, subheading, body text. More levels require good justification.
A practical test: squint your eyes or blur the layout. What remains visible? That's what people will see first. Does it match what should be most important?
Hierarchy is a choice, not an accident.
3.4 / Blind Spots
We miss more than we think.
01
Change blindness
People often overlook large changes in an image when a brief disruption occurs at the same time. Inattentional blindness is closely related: in the well-known experiment by Simons and Chabris (1999), around half of the observers failed to notice a gorilla whilst focusing on another task.
02
Banner blindness
Users overlook elements that look like adverts or are placed where adverts are expected, even when the information is important to them (Benway & Lane, 1998).
In terms of design, this means: display feedback and changes (confirmations, error messages) clearly and close to the point of action. Do not place important information in ad formats or typical advertising areas.
What is not expected is often not seen.
Exercise
Apply, evaluate, transfer
Task: Squint test and redesign. Choose a design (website, poster or app screen).
STEP 1
Display the design for five seconds, then cover it up and note down what stood out from memory.
STEP 2
Compare the responses of several people. What was mentioned, and what was forgotten?
STEP 3
Determine what should stand out first, and restructure the hierarchy using size, contrast, position, and white space.
STEP 4
Repeat the test with other people.
Evaluation: Has the memory changed? Which remedy had the strongest effect? Small groups provide indications, but no proof.