Ebbinghaus Illusion

A size is judged by the company it keeps.

Two identical circles look different sizes when one is ringed by large circles and the other by small ones. Every size on a screen is read against its surroundings, so a button, an icon, or a bubble in a chart can look bigger or smaller than it is.

Hermann Ebbinghaus
Origin

The illusion is named for Hermann Ebbinghaus, the German psychologist better known for his experiments on memory and forgetting. Edward B. Titchener brought it to English-speaking readers in a 1901 textbook of experimental psychology, which is why it is also called Titchener circles.

Size is only part of the effect. A 2005 study showed that distance matters too: surrounding circles placed close to the centre make it look larger, and distant ones make it look smaller. Because large circles cannot sit as close as small ones, many earlier studies had mixed the two causes together.

The Illusion

The eye judges a shape’s size against its neighbours rather than measuring it on its own. Surround a circle with larger circles and it looks smaller; surround it with smaller ones and it looks larger. How close those neighbours sit changes the effect as well.

Origin
Hermann Ebbinghaus; popularized by Edward B. Titchener (1901)
Also called
Titchener circles
In practice
Judge sizes in their real surroundings
When to Use
How to Use
The effect 01 / 10

Neighbours Set the Scale

The same circle looks smaller among large circles and larger among small ones. Nothing about the circle changes; only the reference the eye measures it against.

Best for
Sizing elements in context
Use when
Sizes on the screen vary widely
Avoid when
An element stands alone
RelatedWeber-Fechner Law
Spacing 02 / 10

Distance Changes It Too

Surrounding circles placed close to the centre make it look larger, and distant ones make it look smaller. Spacing is part of the illusion, not just the size of the neighbours.

Best for
Spacing and clustering
Use when
Items crowd around a focal element
Avoid when
Spacing is generous and even
RelatedGestalt Principles
Controls 03 / 10

A Button Among Big Things

A primary button beside a large image or headline reads as smaller than it is, while the same button in a sparse toolbar reads as large. Judge its size where it will live.

Best for
Primary actions
Use when
The button shares space with large media
Avoid when
The button stands on its own
RelatedVon Restorff Effect
Icons 04 / 10

Icons in a Crowd

An icon beside larger icons looks undersized, and the same icon among smaller ones looks heavy. Consistent optical size has to be checked in context, not only in the icon grid.

Best for
Toolbars and icon sets
Use when
Icons of mixed sizes share a row
Avoid when
A single icon on its own
Charts 05 / 10

Bubbles Mislead

In bubble charts, maps, and treemaps, a mark ringed by larger marks reads as smaller than one ringed by smaller marks. Area is already hard to judge, and the illusion makes it worse.

Best for
Data visualization
Use when
Size encodes a value
Avoid when
Exact comparison matters
RelatedData Visualization
Remedy 06 / 10

Compare on a Shared Baseline

When sizes must be compared accurately, take the surroundings out of the judgment: align the items, give them a common baseline, or print the number beside each one.

Best for
Comparisons that matter
Use when
Readers must rank items
Avoid when
Size is only decorative
Research 07 / 10

Adults Are Fooled More

University students were deceived more often than children aged ten and under, who are less sensitive to context. Reading size through its surroundings appears to develop with age.

Best for
Understanding the effect
Use when
Audiences span ages
Avoid when
Assuming everyone sees it equally
Research 08 / 10

Seeing Versus Grasping

In a study by Melvyn Goodale, people grasping the centre disk opened their grip to its real size, not its apparent size; other work found the hand fooled as well. The debate fed the theory of separate visual pathways for perception and action.

Best for
Touch and pointing
Use when
Targets vary in apparent size
Avoid when
Trusting the hand to correct the eye
RelatedFitts’s Law
✦

The Illusion in the Age of AI

Layouts and charts can now be generated faster than anyone reviews them in context, so sizes that look right in isolation reach people unchecked.

✦ AI Era 09 / 10

Generated Charts Need a Second Look

A model can produce a bubble chart or treemap in seconds, with areas that are mathematically correct and perceptually misleading. Review area encodings the way a reader will see them.

Shift
Hand-built → generated
Use when
Charts come from AI tools
Watch for
Area encodings shipped unreviewed
✦ AI Era 10 / 10

Measuring Is Not Seeing

Automated design checks measure pixels, not perceived size, so they pass elements that people will read as unequal. Pair them with a look at the layout in context.

Shift
Pixels → perception
Use when
Automating design review
Watch for
Checks that only measure pixels
Further Reading

Research

Wikipedia