The lecture's thesis, stated twice: information is not neutral. The eye filters, selects and changes data to make an interpretation of the world. Anything you “see” in an interface is a construction — which is both why design works and why it fails.
01The eye as a physical instrument
- Light reflects from objects; the image is focused upside down on the retina. The eye transforms light into electrical energy.
- Rods handle low-light (scotopic) vision; cones handle colour. The retina also contains ganglion cells that detect pattern and movement.
- Pattern filters. Certain neurons act as filters: they pass middle frequencies better than higher and lower ones, and mutual suppression corrects the random noise of individual cells by averaging over the larger group. This is why the Hermann grid produces grey spots that are not in the image.
- Brightness is a subjective reaction to levels of light; it is affected by the luminance of the object and measured by the just noticeable difference. Visual acuity increases with luminance, as does perceived flashing.
- Law of visual angle: tan(θ/2) = s/2d, i.e. s = 2d·tan(θ/2). Visual angle indicates how much of the view the object occupies; it relates size to distance.
- Size constancy: familiar objects are perceived as constant in size despite changes in visual angle. Overlap and other cues help size and depth perception.
02Colour: three dimensions and one misconception
| Dimension | Definition |
|---|---|
| Hue | Based on the wavelength of light — what we call the colour name |
| Intensity | Lighter or darker |
| Saturation | Purity of the hue in a colour; the higher the saturation, the purer the colour |
- Colour is not a property of the physics of light. It is the human interpretation of different energetic frequencies (short and long waves) that hit a cell. Cones are sensitive to those wavelengths; mutual suppression applies again.
- Blue acuity is the lowest. Small blue text on a dark background is a design error, and this is the fact behind “use colour carefully; reading acuity for blue is low”.
- 8% of males and 1% of females are colour blind. Never encode meaning in hue alone.
- After-images. Stare at red and the red cones tire; the cyan cones keep firing, so you see a cyan ghost. Complementary colours in the RGB model explain the effect — it is adaptation plus mutual suppression, not a property of the screen.
03Constructing 3D from a 2D retina
The retina is a sphere, the image is upside down and shrunk, and there are two of them from different angles. To merge them, the images enter the optic chiasm: left goes right, right goes left. Before the signal leaves the visual cortex it must be flipped, rotated and resized.
So 3D vision is not a property of the retinal image. It is assembled from:
- Slicing up — eye fixations sample the scene in jumps.
- Imputing missing data from memory — a concept-driven percept fills the gaps between fixations. You do not see a stable picture; you see a model updated by samples.
- Shrinking images — retinal size is not actual size.
- Taking them from different angles — two eyes, two viewpoints.
- Splitting, merging, flipping, rotating, resizing — the wiring and the cortical work.
- Size, depth and overlap — visual angle plus distance plus occlusion.
- Size constancy — known objects keep their size despite visual angle.
- Optic flow — expanding flow makes the body lean forward and signals “we go forward”; contracting flow signals “backward”.
- Motion parallax — the object closest to the eye “moves” most because its retinal path is longer. The brain reads: short path behind long path, therefore depth. This is why the moon travels with you and the nearby dog appears to move more.
- Direction of leaving the visual field — the side on which an object leaves cues its motion: the side of your direction means it goes with you; the opposite side means it stays behind.
04Gestalt principles: how grouping happens
Patterns are formed according to a preference for one organisation over another. Learn the seven names and, more importantly, the perceptual bias each one encodes.
| Principle | Statement | Interface consequence |
|---|---|---|
| Similarity | Items that are similar tend to be grouped together. | Same background colour “ties” options together even when nothing else does — American football formations can be read off a grid of names. |
| Proximity | Objects near each other tend to be grouped together. | Spacing creates groups, so unrelated controls must not be close. Users miss controls that sit too near a bigger block. |
| Symmetry | Symmetrical images are perceived collectively, in spite of distance. | Three black symmetrical shapes on white are seen as figures; the white shapes are not. |
| Continuity | Lines are seen as following the smoothest path. | A line through a crossing is one line, not two; connecting elements creates flow. |
| Closure | Objects grouped together are seen as a whole; gaps are ignored and lines completed. | Icons need not be complete; logos survive cropping. It also makes you see figures that are not there. |
| Smallness | Smaller areas tend to be seen as figures against a larger background. | “Seeing” the vase is easier when it is the smaller region; figure/ground depends on relative area. |
| Surroundedness | Areas surrounded by others tend to be seen as independent figures. | Badges, selection highlights and the word “TIE” hidden in a black field all exploit it. |
The bias that isn't in the data
“Which part of this signal is most important?” People read high as more important than low and up as more important than down, although nothing in the graph says so. Those are interpretation biases, not features of the chart — and they are why a badly scaled axis misleads even when every number is correct.
05From data to information
We speak about data as if it were lying around like rocks and sand, and as if information seeped out of it like polyphenols out of tea leaves. The lecture's correction:
Information is not neutral. The eye filters, selects and changes data to make an interpretation of the world. Colour is not a property of light but of the eye's receptors. 3D vision results from manipulations by the brain to create a depth illusion. The brain uses heuristics — similarity, continuity, proximity, the so-called Gestalts — to make sense of what passes the eye. Patterns are not the result of recognition but of human construction. Therefore all computer analysis depends on human analysis.
- Humans recognise patterns even where they are not: three clusters in a spreadsheet that contains no clusters; a Dalmatian in a field of dots; a face in a car's headlights.
- The Dalmatian is just unconnected black dots; conceptual interpretation supplies the dog. That is also why a vision model can fail on the same image — its priors differ, not its pixels.
- Data imputation: given “1; 2; 3; 4; 5; _; 7; 8; 9”, the rational answer is “I don't know”. The pattern is a hypothesis, not an observation.
- Lottery: the neighbour who picks 9, 21, 34, 45, 56, 63, 70 has exactly the same chance as you. Finding new patterns in big data is a chance game — and chance depends on knowledge: the less you know, the more probabilistic the problem space.
06Reading text: three stages and three eye movements
Text is an image with coded meaning. Three stages of reading:
- Visual pattern perceived.
- Decoded using an internal representation of the language.
- Interpreted using knowledge of syntax (grammar and structure), semantics (the meanings of words and sentences, regardless of context) and pragmatics (meaning relative to the individuals and the situation).
Example of the three levels: “Sihkjófaahnmeiha?” is syntactically odd, semantically opaque to a non-speaker, and pragmatically obvious to a Cantonese speaker who knows it means “have you eaten yet?”. “How do you do?” is the opposite case: syntactically trivial, semantically empty, pragmatically a greeting.
| Eye movement | What happens | Design implication |
|---|---|---|
| Scanning | Global exploration of the text and its structure; effort estimate — much or little text, long or short words | Density and word length determine whether the user even starts |
| Saccades | Eye jumps, not only forward but back and forth, some up and down; word shape (and therefore font) matters | Distinct word shapes speed recognition; the top part of the font matters more than the bottom |
| Fixations | Perception and comprehension happen only during fixations; in between is an idle state | Reduce the number of fixations: write code and interface text concisely |
- The upper half of lowercase words carries more recognition information (Perea, Comesaña & Soares, 2012) — for lowercase Roman text, not for UPPERCASE, pseudo-words or Hebrew.
- Dyslexia. Readers unconsciously switch, rotate and mirror letters. Traditional typefaces make this worse by basing some letter designs on others (“twin letters”: hmn u bdpq wvy ij). The Dyslexie typeface (Christian Boer, 2008) makes each character distinct: heavier bottoms, semi-italics, wider openings, different heights, changed tails, longer ascenders, wider letter-spacing, bold capitals and punctuation. Reducing similarity reduces mirror confusion.
- Lexical ambiguity. If no context is provided, the dictionary meanings become active, and users — like computers — become error-prone. The fix is semantic priming: supply the context that activates the intended meaning.
Words mean different things to different people. Synonyms are many words pointing at one meaning (Trash, Bin, Recycle, Deleted items; Spam, Junk, Blocked items). Ambiguity is one word pointing at several meanings. Both create errors, in opposite directions: synonyms make users hunt, ambiguity makes them guess.
The lecture's running example is the letter C: designers thought “Clear”, end users read “Call”, and the only thing that resolves it is context. The Windows NT shutdown procedure is the same joke at scale: Start ▸ Shut Down ▸ Standby ▸ OK. Each label is locally reasonable and the sequence is absurd.
07Typography rules worth memorising
- Characters, symbols and graphical elements should be easily noticeable and distinguishable.
- Serif fonts are easier to read in print; sans-serif fonts are easier on screen and feel more casual.
- Proportional fonts take less space and are more legible than monospaced.
- Mixed case is more compact and easier to read than all-caps.
- Lines should be at most 60 characters for printed matter.
- Don't overdo styles. Typographic distinction should be used only if it conveys extra information.
- Maximum 1–2 typefaces (3 max), two slants (normal, italic), two weights (normal, bold), four sizes (title, subtitle, text, footnote). Sizes must differ by at least 2 pt to be distinguishable.
- Use indentation and colour carefully — reading acuity for blue is low. Provide sufficient contrast between foreground and background. The background should be neutral (black, white, grey) unless you have a good reason.
08CRAP, unity and grids
| Principle | Rule | Test on a screenshot |
|---|---|---|
| Contrast | Make different things different. Bring out dominant elements, mute lesser ones, create dynamism. | Can you tell a label from an editable field? Is the primary action the most prominent thing? |
| Repetition | Repeat design throughout the interface; be consistent. | Do buttons look like buttons everywhere? Same location, format, element, organisation? |
| Alignment | Visually connect elements; create visual flow. | Do edges line up, or does every block compete with every other? |
| Proximity | Group related elements; separate unrelated ones. | Is the “I only want to log in” link next to the login form, or lost in a block of marketing? |
| Unity | Alignment + connection + flow, i.e. the whole reads as one surface. | Does the page hang together without a frame around it? |
| Grids | Horizontal and vertical lines locate interface components and align related ones. | Are columns on a shared baseline, or eyeballed? |
The lecture's “what NOT to do” checklist is the marking scheme for any critique question: terrible alignment; no flow; poor contrast; coloured labels indistinguishable from editable fields; poor repetition; buttons that do not look like buttons; poor explicit structure; blocks competing with alignment.
09Icons, labels, and what you write to the user
Icon recommendations
- Images form a spectrum from concrete to abstract. Icon design is very hard — the lecture's advice is literally “go to School of Design”.
- Except for the most familiar ones, always label your icons.
- Image position and type should be related; group images into families; use them consistently and relevantly.
- The silhouette conveys the most information; design for recognition over recall; stick with conventions; design in black and white first and add colour later.
- Recommendation summary: icons are not automatically better than text. Sometimes a textual description works better — Novell GroupWise's unlabelled icons had a glossary tab, which is an admission that the icons failed.
Writing to the user
- Present adequate and comprehensible information. Avoid the Midwest Microwave catalogue paragraph — a wall of text explaining how to use a PDF.
- Provide real choices for solving the problem, not just “OK”.
- Avoid ambiguity and self-contradiction. “You should receive no further eMail” next to “a confirmation eMail will be sent”; “I've just paid the bill” in a cancellation notice.
- Avoid double or triple negations. “No / Undo / Cancel / Quit” is already hard; Not (undo (not sprite)) is impossible. Make the statement affirmative and let the user supply the negative.
- Respect proximity of messages. Three separate messages glued into one paragraph read as one message — insert whitespace.
- Deixis. “The bill” can be specific (that one bill) or generic (billing in general); in a paragraph of notifications the reader cannot tell which.
- Tooltips must explain, not restate. “Properties = properties” is logically true and useless; “Manage Quick Steps = create, edit, delete and rearrange quick steps” is true and still circular if the user does not know what a quick step is.
10Concept check
Question 1Which statement about colour matches the lecture?
Question 2Which of these is not a Gestalt principle of pattern recognition?
Question 3“The object causing the shorter retinal path is interpreted as being behind the object causing the longer path.” Which cue is this?
Question 4Comprehension of text happens…
Question 5Which set of typographic limits does the lecture recommend?
Question 6A form's labels sit far from their input fields, and the “Cancel” button is inside the same visual block as the marketing text. Which CRAP principles are violated?
Question 7Which icon recommendation is made explicitly in the lecture?
Question 8You see a white triangle in the Kanizsa figure although no triangle is drawn. What does this demonstrate?
11Exam-style questions
(a) Two grids contain the same dots in two colours. Apart from colour, which factor determines how the arrangement is perceived? Explain the difference between the two grids using principles of pattern recognition. (6)
(b) A user is shown a field of black dots and asked what she sees. She reports a Dalmatian; a vision model reports “no object”. Explain both outcomes. (4)
Show model answer
(a) The key factor is proximity, interacting with similarity. Dots that are close together group into a perceptual unit, so a grid with small inter-dot spacing inside a group and large spacing between groups is read as columns (or rows), while an evenly spaced grid is read as a uniform texture. If the two colours alternate, similarity adds a second grouping cue: same-coloured dots group even when they are far apart, which can override proximity and make rows appear where the spacing suggests columns. The percept is a construction, not a property of the dot coordinates — “humans tend to recognise patterns even where they are not”.
(b) The human percept is concept-driven: closure plus prior knowledge of the shape of a dog fills the gaps between unconnected dots, and the silhouette cue is enough. The model lacks that prior (or its training distribution and receptive fields do not favour a dotted silhouette), so it reports what is literally present: unconnected dots. The point is not that one is “right” — it is that pattern recognition is not a property of the data, and that all computer analysis depends on human analysis (the labels, the priors, the framing).
Marking note. (a) needs a named principle and the word “grouping”; (b) needs the phrase concept-driven percept or closure plus the data/interpretation distinction.
Two versions of the same sentence are shown: one in a heavy all-caps script with uneven spacing and a typo in “youre”; one in a light serif face with generous leading and hyphenation. Explain how font choice and visual hierarchy affect perception and reading comprehension, and evaluate the second version against the typography rules.
Show model answer
- Word shape and saccades. Recognition depends on the overall shape of a word, and the upper half of lowercase words carries more information. All-caps flattens word shape and removes ascenders/descenders, slowing recognition.
- Fixations. Comprehension happens only during fixations, so irregular spacing and long lines increase the number of fixations and regressions.
- Contrast and hierarchy. Hierarchy (size, weight, colour) tells the eye what to read first; if everything shouts, nothing is dominant. A single typo in an otherwise polished block also destroys credibility — proofreading is part of the interface.
- Legibility. Serif is easier in print, sans-serif on screen; mixed case is more compact than caps; ≤60 characters per printed line; at most 1–2 typefaces, two weights, two slants, four sizes ≥2 pt apart; neutral background and sufficient contrast.
- Verdict on version two. It satisfies mixed case, one typeface, generous line length and leading, and a clear hierarchy; its weakness is hyphenation that breaks a word at a comprehension-critical point (“under-stand”) and low contrast if the grey is too light. Hyphenation helps justification but costs a fixation at the break.
Marking note. Marks for linking each observation to a mechanism (word shape, fixation, hierarchy), not for aesthetic preference. “It looks nicer” earns nothing.
In a reminders app, each row has two icon buttons: a trash can and an “X”. A user hesitates, unsure which deletes the reminder. Identify the type of ambiguity, explain why the pair violates the lecture's recommendations, and propose one unambiguous replacement.
Show model answer
Type of ambiguity. Two icons point at the same meaning (delete/remove) with no differentiating context — i.e. synonym-style redundancy shading into ambiguity: the user cannot tell whether “X” means dismiss, close, cancel or delete permanently, and whether the trash can deletes immediately or moves to trash.
Why it violates the recommendations. Icons must be labelled unless utterly familiar; image type and position must be related and consistent; the silhouette must carry the meaning; conventions must be respected — and here two conventions collide (X = close, trash = delete). Recognition over recall fails because the user must recall an undocumented difference. There is also no feedback or confirmation, which is an error-prevention failure.
Replacement. One labelled button per function: a trash icon with the visible label “Delete” (and a confirmation or undo), plus a separate overflow menu for “Dismiss”. If only one action is needed, keep the trash + “Delete” and remove the X entirely. Semantic priming does the rest: the word “delete” activates the destructive meaning and the confirmation makes the consequence visible.
Marking note. Full marks require naming ambiguity and a fix that uses label, convention and feedback.
You are shown a web form with: centred body text, three competing heading styles, coloured labels that look like input fields, buttons styled as plain text, and fields whose labels sit in a column far to the left. Diagnose it with CRAP and propose four concrete fixes.
Show model answer
| Observation | Principle | Fix |
|---|---|---|
| Three heading styles compete | Contrast / hierarchy | One heading scale, four sizes maximum, ≥2 pt apart; mute secondary text |
| Coloured labels look editable | Contrast / consistency | Neutral label colour, boxes only around inputs; state colours reserved for state |
| Buttons look like text | Repetition / affordance | One button style repeated everywhere, visually distinct from links |
| Labels far from fields | Proximity / alignment | Label directly above or beside its field, on a shared grid |
| Centred body text | Alignment | Left-align on a consistent measure of ≤60 characters (print) / shorter on screen |
Marking note. Four fixes with a named principle each. A critique that lists only “ugly” or “confusing” without the principle scores at most half.