perception

Alternating row backgrounds in a table so the eye can track a single row across many columns.

A scanning shape where readers deliberately skip the opening words of each line because every line in a list starts the same way.

The rare scanning shape where a motivated reader fixates on nearly every word, the only pattern that behaves like actual reading.

The grouping principle that anything inside a shared boundary reads as one group, strong enough to beat how far apart the items actually are.

The scanning shape eye tracking finds on text heavy pages: two horizontal sweeps across the top, then a vertical run down the left edge.

A focus plus context display that magnifies whatever has attention and progressively compresses everything further away, like a lens dragged along a list.

The one element a composition is built around, given enough size, contrast or isolation that the eye lands there before anywhere else.

A layout that keeps one region in full detail inside its own surroundings, shrinking or dimming the context instead of moving it into a second pane.

The proportion of roughly 1 to 1.618 used to divide a layout, so its parts relate to each other by a rule instead of by arbitrary numbers.

A model splitting evenly weighted pages into four quadrants, with the eye falling from the primary area at top left to the terminal area at bottom right.

A scanning shape for tables where the eye runs across one row, drops down and runs back the other way, mowing the cells in alternating directions.

A scanning shape where the eye reads headings and subheadings and skips the text between them, so the fixation map looks like stacked layers.

A scanning shape where the eye holds one spot on the screen while content scrolls past underneath it, most common on phones.

Nudging an element off its measured position so it looks aligned, correcting for shapes whose bounding box lies about their visual centre.

A layout that shows a compressed overview and a detailed view at the same time in separate regions, so the reader keeps their place while inspecting one part.

The grouping principle that elements placed close together read as related, which is why spacing decides perceived structure more reliably than borders do.

Dividing a frame into nine equal cells with two lines each way and placing the important elements on the lines or their intersections.

The same small chart repeated in a grid, once per category, so comparison happens by eye movement instead of overplotting.

A scanning shape where the eye jumps to isolated words scattered down the page, hunting a keyword, a link or a number rather than reading anything.

The bottom edge of the first screenful, above which content is seen without any scrolling and below which it must be earned.

The arc of a phone screen a thumb reaches comfortably in a one handed grip, with harder to reach bands above and across from it.

The distribution of visual weight across a composition, reached by mirroring elements, by setting one large element against several small ones, or by radiating from a centre.

The ordering of elements by visual weight, size, contrast, position and spacing, so a reader learns what matters most without being told.

The empty area between and around elements, treated as an active design material rather than as leftover space.

The scanning shape on sparse pages: across the top, diagonally down to the lower left, then across the bottom to the final call to action.

Tufte's word for ink that decorates a chart without carrying data: 3D bevels, gradient fills, mascots, gridline thickets.

Structuring plans or products so their features and prices cannot be lined up, forcing a decision that no side-by-side reading would support.

Tufte's measure of chart economy: the share of ink that would be missed if erased, with everything else a candidate for deletion.

An advertisement styled to look like a control or an item of content, so the click it collects was aimed at something else entirely.

Two value axes sharing one plot so two series can be compared, and a free knob for manufacturing whatever correlation you like.

A page that looks finished at a point where content actually continues, so the reader stops scrolling and never sees the rest.

Effort rising as a visible goal gets closer, which is why interfaces show how little is left rather than how much has been done.

Explaining a system by dressing it as something the user already knows: the desktop, the trash can, the folder, the shopping cart.

Using contrast, size, and position to pull attention to the option the business prefers while the other option is present but visually demoted.

One command word or icon wired to different outcomes depending on where it sits, so having used it once teaches the reader nothing about the next one.

Showing the few options most people need and keeping the rest one deliberate step away, so complexity arrives only when it is asked for.

Simplifying a control as the same person uses it more, dropping the label once the icon has been learned and restoring it after a long absence.

A gradient mask at the edge of a scroll container that fades clipped content out, hinting that more lies past the edge without drawing a control.

Showing what other people did or said next to a decision, as counts, reviews, logos, or live activity, so the reader can borrow their judgement.

Starting a value axis above zero so differences look bigger than they are; honest for lines and dots, a lie for bars.

What an element makes possible for the person using it, such as a surface that can be pushed, dragged, or scrolled.

What an interface says about the result of an act before it is taken, the half of the loop that sits ahead of the action rather than after it.

The rule that the time to hit a target grows with its distance and shrinks with its size, which is why screen edges and corners are so easy to reach.

An action reachable only by an input the reader has to guess: a swipe, a long press, a two-finger tap, with nothing on screen saying it is there.

The visible cue that advertises an affordance, such as a grip texture, an underline, or a shadow that says this can be pressed.

A small move in the opposite direction just before the main one, borrowed from character animation to telegraph what is about to happen.

Moving an element along a curved path rather than a straight line, so a change of position reads as natural rather than mechanical.

Motion that arrives, rebounds, and arrives again in decreasing amounts, reading as an object landing on a surface.

Giving interface objects a believable place in depth by folding, layering or flipping them, so a reader can tell where something went and where it will come back from.

The rule that every movement carries a direction, and that using it consistently tells the reader how the parts of an interface relate.

Parts of a composition that keep moving briefly after the main element stops, and start slightly after it starts, so a group does not move as one rigid block.

Blurring an element along its direction of travel so fast movement reads as speed instead of teleporting, borrowed from film and rare but real in interfaces.

The part of a motion that carries past its final value before coming back, the visual signature of an underdamped spring or a back easing curve.

How long a spring appears to take, measured to the point the movement stops being visible rather than to its mathematical rest, the figure to quote against a timed animation.

Deforming an element along its direction of travel so it reads as having mass and flexibility, usually as a press squash or a launch stretch.

Playing the same animation on a set of elements with a small delay added item by item, so the group arrives as a cascade instead of a block.

Washing a just-changed element in colour and letting it fade back out, so a change made without a page reload is still noticed where it happened.

Text set entirely in capitals, which reads slower than mixed case because the word's outline shape disappears.

How a device softens the edges of letterforms, either by shading whole pixels grey or by lighting a pixel's colored subpixels separately.

Letting quotes, hyphens, and other light marks sit outside the text column so the edge of the text reads as straight to the eye.

Instructions inside a font that nudge its outlines onto the pixel grid at small sizes so stems stay crisp and even.

Three or more consecutive lines ending in a hyphen, which builds a visible staircase down the right edge of a column.

How easily one letter can be told apart from another, a property of the typeface's drawing rather than of how the text is set.

The width of a column of text, judged in characters per line, with roughly 45 to 75 treated as the comfortable range for reading.

A font adjusting its own drawing for the size it is set at, thickening strokes and opening spacing for small text and refining both for large.

Type set far past reading size so the words carry the layout, the headline doing the work a photograph would otherwise be hired for.

The uneven edge left by unjustified text, and the thing typographers tune so that edge makes no distracting shapes down the side of a paragraph.

How comfortably a body of text can be read at length, a property of the setting: size, measure, leading, and contrast.

An accidental channel of white space running down a paragraph where word spaces on consecutive lines happen to line up.

Choosing line breaks so a short block of text has lines of roughly equal length instead of a long first line and a stub second one.

The overall lightness or darkness a block of text produces when you stop reading it and look at it as a grey texture.

The ordering of text by visual weight so a reader can tell at a glance what is a title, what is body, and what is a caption.

A proportion guideline that gives about 60 percent of a layout to a dominant colour, 30 percent to a secondary, and 10 percent to an accent.

The one saturated colour an interface spends sparingly on the things it wants clicked, so its rarity is what makes it read as important.

Colour made by adding light, where red, green and blue at full strength give white, which is why a screen is at its brightest when it is showing all three.

A palette built from hues that neighbour each other on the wheel, giving a calm scheme with no colour fighting another for attention.

A perceptual contrast algorithm proposed for WCAG 3 that scores a text and background pair as an Lc value and takes font size and weight into account.

A data palette of distinct hues at roughly equal visual weight, used for groups that have no order so no colour reads as larger than another.

Colourfulness measured in absolute terms rather than as a percentage of the maximum, so a light pastel and a dark ink can be compared on one scale.

The visible stripes that appear across a gradient when a display or file cannot render enough intermediate steps to keep the transition smooth.

Giving each category its own colour so the eye can group and find by hue, which holds only while the set stays small and one colour means one thing everywhere.

The set of colours a space or a display can actually produce, which is why a value that is legal in one notation can be impossible on a given screen.

A rule for choosing colours by their positions on the wheel, such as complementary or analogous or triadic, so a palette holds together by construction.

A coordinate system for describing colour, where the choice of axes decides whether arithmetic like mixing or stepping a ramp matches what the eye sees.

Whether a colour reads warm (toward red and orange) or cool (toward blue), the axis designers use to bias a neutral grey without changing its lightness.

A circular arrangement of hues that makes relationships between colours geometric, so a scheme becomes a shape drawn across the circle.

Two hues sitting opposite each other on the colour wheel, the pairing that produces the strongest contrast and the loudest accent.

A number from 1:1 to 21:1 describing how far apart two colours sit in relative luminance, used to decide whether text on a background is readable.

Adding fine noise to a gradient or image so the eye averages neighbouring pixels into the missing intermediate colours, hiding the bands.

A data palette built from two sequential scales meeting at a neutral midpoint, used when values run above and below a meaningful zero.

A three-rung text hierarchy, high, medium and disabled, ranked by stepping the opacity of one foreground colour instead of naming a separate colour for each rung.

Converting a colour that falls outside a display's range into the nearest one inside it, usually by lowering chroma in OKLCH rather than clipping each channel.

A fill that transitions between two or more colours across a shape, defined by colour stops and by the space the transition is interpolated in.

Material's colour space of hue, chroma and tone, which borrows hue and chroma from CAM16 and lightness from CIELAB so tone alone predicts contrast.

The attribute that gives a colour its name, red or teal or violet, expressed as an angle around a colour wheel independent of how light or vivid it is.

Rotating hue deliberately along a ramp, warmer at the light end and cooler at the dark end, so a scale looks alive instead of like one colour fading out.

How light or dark a colour reads, from black at one end to white at the other, held separately from its hue and its colourfulness.

A scheme drawn from one hue at many lightness and saturation levels, so hierarchy comes from contrast alone rather than from colour difference.

A colour notation of lightness, chroma and hue built on Oklab, where changing the hue leaves the perceived lightness alone and equal steps look equal.

The property of a colour space where equal numeric distances look like equal visual differences, which is what makes a generated ramp step evenly.

The brightness of a colour measured on a 0 to 1 scale after each channel is linearised, which is the input every WCAG contrast calculation actually uses.

How far a colour is from grey on a scale where 100 percent is the pure hue and 0 percent is neutral, as modelled by HSL and its relatives.

A data palette that runs light to dark in one direction, encoding an ordered quantity so that darker always means more.

The default colour space of the web, the one hex codes and plain rgb() values live in, and the baseline every wider gamut is described relative to.

Colour made by taking light away, where inks stack towards black and every added layer can only darken, which is why a screen blue cannot be printed.

A palette of three hues spaced evenly around the colour wheel, vivid by construction and usually applied with one hue dominant.

Colour beyond what sRGB can express, addressed in CSS through spaces such as display-p3 and rec2020 and shown only on displays that reach that far.

A gradient with a fine noise layer over it, added to hide banding and give a flat background the texture of printed paper or film.

A blur whose strength ramps across a region instead of applying evenly, so content fades into softness toward an edge rather than stopping at a hard line.

A gradual darkening toward the edges of an image that pulls the eye to the centre, borrowed from lens falloff and applied deliberately for focus and mood.

Breaking content into small labelled pieces, short paragraphs, lists, and headings, so a reader can hold one piece at a time instead of the whole wall.

The mental effort an interface demands, split between the work the task really needs and the work the design added by way of clutter, jargon, and avoidable steps.

Reduced ability to tell certain hues apart, most often red from green, which makes hue alone an unreliable way to carry meaning for roughly one man in twelve.

Content that flashes more than three times per second in a large enough area, restricted because it can trigger seizures.

A reading aid that dims everything except one to five lines of text, so the eye has a single band to track and cannot skip or reread a line by accident.

The requirement that controls, focus indicators and meaningful graphics reach 3:1 against what is next to them, which is the rule that governs borders and icons.

Blowing part of the screen up many times over, so a reader sees a keyhole of the layout at a time and anything far from the action is effectively off screen.

The rule that colour must never be the only carrier of meaning, so a red field also needs an icon, wording, or shape change.