Noor runs a two-person bookkeeping practice in Utrecht. Last spring she asked her nephew to “make the website pop”. He did. Every service now has a bold heading, a colored badge and an icon. Prices sit in yellow bursts. There are four buttons above the fold, all the same shade of orange, all saying slightly different things.
A café owner called Pieter visits the page on his phone between deliveries. He wants one thing: to book a short call. He scrolls down, then up, then down again. Every element is waving at him. He cannot tell which wave means “start here”.
He sends an email instead, three days later. Noor wonders why so few people use the booking button.
Noor and Pieter are imagined. The research and laws below are real.
Emphasis is a budget
The most quoted idea in this field is the Von Restorff effect, also called the isolation effect: the one thing that differs from its surroundings is the one people remember. Designers use it to justify bright buttons. What the original study actually showed is more interesting, and more useful.
In a list where all items but one are similar, the different item is remembered better. Von Restorff's dissertation, published in Psychologische Forschung and never translated into English, used lists of nonsense syllables, numbers and other materials. Her key twist: the isolated item was remembered better even when it appeared so early in the list that it could not yet have looked unusual.
We know the details thanks to the psychologist R. Reed Hunt, who read the German original closely for a 1995 paper titled “The subtlety of distinctiveness: What von Restorff really did”. In her critical experiment, 15 people saw lists of ten items for 1.5 seconds each. An isolation list contained, for example, nine numbers and one nonsense syllable in the second or third position. A control list contained ten completely unrelated things: a number, a syllable, a color patch, a letter, a word, a photo, a real button, and so on. After ten minutes of reading something else, people recalled the syllable in the isolation list 70% of the time, against 40% for the same kind of item in the unrelated list. Hunt's own replication with 40 participants came out almost identical.
Look at the control list again. The syllable is just as different from a photo or a punctuation mark as it is from a number. Yet it was remembered far less. Von Restorff's point, as Hunt explains it, is that the isolated item stands out because the other items are similar to each other. Distinctiveness needs a uniform background.
That is the whole lesson for Noor's page. Her booking button is orange, but so are three other buttons, the price bursts and the badges. In a field of different things, nothing is different. Adding one more bright element cannot fix that. Making everything else calmer can.
Do this: list every element on your first screen that uses your accent color, bold weight, a badge or a box. Keep one. Make the rest match each other.
Space is grammar
Whitespace is often described as “breathing room”, as if its job were decorative. Its real job is grammatical. Space tells the eye which things belong together, the way punctuation tells you which words form a sentence.
Wertheimer's 1923 paper set out the factors by which we see separate elements as groups. Two matter most on a web page: proximity (things close together belong together) and similarity (things that look alike belong together). In 1992 Palmer added common region: things inside the same boundary, such as a card or a shaded panel, are seen as a group.
Wertheimer's original paper used rows of dots to show that we cannot help grouping: change the spacing, and the same dots read as pairs instead of a line. Palmer's 1992 paper introduced common region as a new principle, and later research reviewed by Wagemans and colleagues in 2012 treats it alongside the classical factors as a well-established grouping cue.
The most common spacing mistake on small-business pages is not too little space. It is uniform space: the same gap between a heading and its paragraph as between two unrelated sections. When everything is equally far apart, nothing is grouped, and the reader has to work out the structure from the words alone.
A simple rule fixes most of it: the space inside a group should be clearly smaller than the space between groups. A heading sits close to the text it introduces. A price sits close to the package it belongs to. Sections are separated by much more space than paragraphs.
Do this: look at any heading on your page. If there is as much space above its own paragraph as above the heading itself, reduce the gap below and increase the gap above.
Hierarchy is a reading order
Visual hierarchy is a fancy name for a simple promise: the page decides what you see first, second and third. In a 2021 Nielsen Norman Group article, Kelley Gordon defines it as arranging elements so the eye takes them in order of importance, and names three main tools: color and contrast, scale, and grouping.
Two of her practical notes are worth quoting in spirit. First, it is not the hue of an element that creates hierarchy, it is the contrast, in lightness and saturation, against what surrounds it. A pale orange button on a white page is weaker than a black one. Second, keep the number of text sizes small; she suggests no more than three. Every extra size is another level the reader must decode.
The secondary action, “See prices”, is still there. It is just quieter: a text link rather than a second filled button. That is how you offer choices without splitting attention. More on choosing and labelling the main action is in Calls to action, and on type scales in Typography.
Do this: number the elements on your first screen in the order you want them read. Then ask someone else to point at what they see first, second and third. Where the orders differ, change size or contrast, not the words.
The 20% whitespace myth
If you read about whitespace online, you will soon meet a confident statistic: whitespace between paragraphs and in the margins increases comprehension by almost 20%. It is usually cited to “Lin, 2004”, sometimes to Human Factors International. It is one of the most repeated numbers in web design.
It does not come from Lin's study.
The paper is Dyi-Yih Michael Lin's “Evaluating older adults' retention in hypertext perusal”, published in Computers in Human Behavior in 2004. Its abstract describes an experiment with 24 older adults using a hypermedia tourist guide. It varied the presentation medium (animated graphics, static pictures, text only) and the link structure of the content, and measured how much people retained. Whitespace and margins were not variables.
In 2021 the UX designer Carl Myhill described checking the claim, which appears for example in a 2007 textbook by Wilbert Galitz with the Lin citation, against the paper itself. He then wrote to Professor Lin, who replied that the publication had nothing to do with whitespace. Myhill could not establish who started the error.
Is there real evidence about whitespace and reading? Some, and it is modest. A 2004 study by Barbara Chaparro and colleagues at Wichita State University, “Reading Online Text: A Comparison of Four White Space Layouts”, varied margins and line spacing on screen. Its abstract reports that margins affected reading speed and comprehension compared with text without margins, that participants generally preferred margins, and that line spacing did not change performance but did affect preference. That is a small usability study of on-screen reading, not a 20% rule.
Whitespace also carries meaning beyond reading speed. The Vantle tip on why some sites look premium covers advertising research by Pracejus, O'Guinn and Olsen showing that generous white space can signal quality and prestige, and that what it signals varies between cultures.
Do this: use whitespace for structure and calm, not because of a statistic. And if you quote a number in your own marketing, open the source first.
When emphasis backfires
If isolation makes things memorable, why not make your most important link the biggest, brightest thing on the page? Because people have learned what big, bright, boxed things usually are.
In 1998, Jan Panero Benway and David Lane at Rice University noticed that participants in an intranet usability test could not find a prominent, banner-like link to the very information they were looking for. In their follow-up experiment, people searching for information found the targets presented as banners only about 58% of the time, against 94% for the same information presented as ordinary links. They called it banner blindness.
Isolation helps when the item looks like what the visitor is looking for. It backfires when the item looks like an ad. A booking link wrapped in a flashing, gradient-filled box with “LIMITED OFFER!” across it can be skipped precisely because it is so loud. The banner blindness tip goes into the newer eye-tracking work and how to fix it.
Do this: make your most important element distinctive in a way that matches its job. A button should look like your other buttons, only stronger. Information should look like content, not like a promotion.
Chunking, not counting to seven
No article on attention escapes George Miller's “magical number seven”. It deserves a careful look, because it is usually used for something it never claimed.
Miller reviewed experiments on how many categories people can reliably tell apart and how many items they can repeat back straight away. Both seemed to top out around seven. His more lasting point was that memory span is counted in chunks, meaningful units, and that grouping information into larger chunks lets us hold more.
Two things have changed since Miller's paper. In a 2001 review, Nelson Cowan argued that seven was more a rough estimate and rhetorical device than a real limit, and that when people cannot rehearse or regroup, the true capacity is closer to three to five chunks.
And the popular rule built on Miller, “never put more than seven items in a menu”, misreads what was measured. Miller's numbers concern things held in memory with nothing to look at. A menu is visible. Nobody has to memorize it. The real costs of a long menu are scanning time and decision effort, which depend on how well it is organized, not on whether it crosses seven.
What survives is the chunking idea, and it is genuinely useful. Twelve features in a flat list ask the reader to hold twelve things. The same twelve sorted into three labelled groups ask them to hold three.
A flat list
Monthly bookkeeping · VAT returns · Payroll · Annual accounts · Receipt scanning app · Bank feed setup · Quarterly review call · Tax deadline reminders · Year-end planning · Invoice templates · Expense categories · Phone support
Twelve equal items. The reader has to do the sorting.
Three chunks
Same twelve items, three things to remember.
Do this: find the longest list on your page. Sort it into two to four groups, give each group a label that says what it does for the customer, and separate the groups with space.
The squint test
You cannot judge your own page's hierarchy by reading it, because you already know what it says. You need to see it the way a scanning stranger does: as shapes and contrasts.
The oldest trick for that is to squint, or to blur a screenshot. Gordon's NN/g article demonstrates it with increasing blur levels: details disappear, and what remains is the structure. If the important thing is still visible as a distinct shape when blurred, the hierarchy works. If the page turns into an even grey wash, or several things fight for first place, it does not.
Try it on the mock section below. Switch between layouts, then blur it. Then apply the WCAG text spacing settings from the next section, which a well-built layout should survive without breaking.
Bookkeeping that fits a small shop
Monthly books, VAT returns and a real person to call when the tax office writes.
- Fixed monthly fee, no surprises
- Reply within one working day
- For cafés, shops and studios
From €120 a month, VAT included
With JavaScript on, buttons here switch the layout, blur it, or apply WCAG 1.4.12 spacing.
Fictional business. Buttons inside the mock are pictures of buttons, not links. The blur imitates squinting; it is not a simulation of any visual impairment.
Most people find that in the crowded version, the blur leaves a busy grey block with several dark patches competing. In the spaced version, the groups appear as separate shapes. With one accent, a single dark shape remains where the booking button is. That is the squint test passing.
Do this: take a screenshot of your first screen, blur it heavily in any image editor (or squint at it from across the room), and check that your main action is the clearest dark or contrasting shape left.
Structure is also a legal requirement
Everything above might sound like taste. Part of it is not. For many people, especially those who use screen readers, zoom or custom text settings, structure and spacing decide whether the page is usable at all. Three WCAG 2.2 success criteria cover the ideas in this chapter directly.
1.3.1 Info and Relationships (Level A). Structure you show visually must also exist in the code. A line that looks like a heading because it is large and bold must be marked up as a heading. Groups made with space and boxes, such as a list of features, should be real lists. Otherwise a screen reader user gets a flat stream of text with none of your grouping.
1.4.12 Text Spacing (Level AA). If a user increases line height to 1.5 times the font size, paragraph spacing to 2 times, letter spacing to 0.12 times and word spacing to 0.16 times, no content or function may be lost. Fixed-height boxes that clip text fail this. That is what the demo's spacing button tests.
2.4.6 Headings and Labels (Level AA). Headings and labels that exist must describe their topic or purpose. “Our services” is weak; “Bookkeeping, VAT and payroll for small shops” is a heading people can navigate by.
The EAA requires covered services, including e-commerce services provided to consumers through websites and apps, to meet the accessibility requirements in its Annex I (Art. 4). Member States apply the national rules from 28 June 2025. Microenterprises providing services, meaning fewer than 10 people and an annual turnover or balance sheet total of no more than €2 million, are exempt from the service requirements (Art. 4(5) and Art. 3(23)). In practice, conformity is assessed against harmonised European standards that build on WCAG.
Source: Directive (EU) 2019/882. National implementing laws set penalties and enforcement. In the US, website accessibility claims are usually brought under ADA Title III. General information, not legal advice.
Even if you are a microenterprise and exempt, the same criteria describe a page that is easier for everyone to scan. Clear headings help screen-reader users jump between sections and help sighted visitors skim. Spacing that survives user overrides is spacing that was not hard-coded to the pixel. The full picture is in Accessibility as conversion.
Do this: check that every visual heading on your page is a real h2 or h3, and test your page with a text-spacing bookmarklet or browser extension to see whether anything gets cut off.
What to change tomorrow
Noor's page did not need more design. It needed less competition. One dark button. Three groups instead of eleven boxes. More space between sections than inside them. Pieter would have found the booking button in a second.
Spend emphasis once per screen
One filled button, one use of the accent color, one badge at most. Turn other buttons into text links or outline buttons.
Make the background uniform
Isolation works because the rest is similar. Give secondary elements the same size, weight and style.
Space inside groups less than between them
Headings close to their text, prices close to their package, generous gaps between sections.
Limit text sizes to about three
Headline, subheading, body. Each extra size is another level to decode.
Chunk long lists
Sort features into two to four labelled groups that say what each group does for the customer.
Don't dress important content as an ad
Flashing boxes and “LIMITED OFFER” banners are what people have learned to skip.
Run the squint test
Blur a screenshot. Your main action should be the clearest shape left.
Check the structure in the code
Real headings, real lists, descriptive headings, and no clipping when text spacing is increased.
What the research supports
The isolation effect is one of the most robust findings in memory research, and von Restorff's own work shows it depends on the similarity of everything else. Gestalt grouping principles are well established in perception research. NN/g's hierarchy guidance and the squint test are expert practice, not controlled experiments. The popular “whitespace increases comprehension by almost 20%” claim is not supported by the study it cites; the direct evidence on whitespace and reading is limited and modest. Miller's seven is a rough estimate, not a menu rule. Banner blindness is well documented in search tasks. None of this predicts a specific conversion lift for your page.
Sources
- von Restorff, H. (1933). Über die Wirkung von Bereichsbildungen im Spurenfeld. Psychologische Forschung, 18, 299–342. Described via Hunt (1995); the German original was not read in full.
- Hunt, R. R. (1995). The subtlety of distinctiveness: What von Restorff really did. Psychonomic Bulletin & Review, 2(1), 105–112. Full text consulted for the experimental design, recall rates and replication.
- Wertheimer, M. (1923). Untersuchungen zur Lehre von der Gestalt. II. Psychologische Forschung, 4, 301–350. Bibliographic record; principles as summarized by Wagemans et al.
- Palmer, S. E. (1992). Common region: A new principle of perceptual grouping. Cognitive Psychology, 24(3), 436–447. Bibliographic record.
- Wagemans, J., Elder, J. H., Kubovy, M., Palmer, S. E. et al. (2012). A century of Gestalt psychology in visual perception: I. Perceptual grouping and figure–ground organization. Psychological Bulletin, 138(6), 1172–1217. Abstract consulted for classical and newer grouping principles.
- Gordon, K. (2021), Nielsen Norman Group. Visual Hierarchy in UX: Definition. Contrast, scale, grouping and the blur test.
- Lin, D. Y. M. (2004). Evaluating older adults' retention in hypertext perusal: impacts of presentation media as a function of text topology. Computers in Human Behavior, 20(4), 491–503. Abstract consulted.
- Myhill, C. (2021). No, Lin (2004) did not discover that margins and white space increase comprehension by 20%. LinkedIn. Account of the citation trail and the author's reply.
- Chaparro, B. S., Baker, J. R., Shaikh, A. D., Hull, S. & Brady, L. (2004). Reading Online Text: A Comparison of Four White Space Layouts. Usability News, 6, Wichita State University. Abstract consulted; the full report is no longer online at its original address.
- Benway, J. P. & Lane, D. M. (1998). Banner Blindness: Web Searchers Often Miss “Obvious” Links. Author-hosted paper; full text consulted for the 58% versus 94% result.
- Miller, G. A. (1956). The magical number seven, plus or minus two: Some limits on our capacity for processing information. Psychological Review, 63(2), 81–97.
- Cowan, N. (2001). The magical number 4 in short-term memory: A reconsideration of mental storage capacity. Behavioral and Brain Sciences, 24(1), 87–114. Abstract consulted.
- W3C (2023). WCAG 2.2 Understanding documents: 1.3.1 Info and Relationships, 1.4.12 Text Spacing, 2.4.6 Headings and Labels.
- Directive (EU) 2019/882 (European Accessibility Act). Articles 2, 3(23) and 4 and the application date consulted.
Sources checked 18 October 2026. Legal summaries are general information, not legal advice; check the national law that applies to you. Noor, Pieter and the bookkeeping practice are fictional; the figures are original illustrations, with Figure 1 reproducing recall rates reported by Hunt (1995).