Müller-Lyer Illusion

The ends of a line change its length.

Two lines of the same length look different when one ends in arrowheads and the other in tails. In interfaces, chevrons, pointed bars, and angled icons quietly change how long or wide things look.

Origin

The German psychologist and sociologist Franz Carl Müller-Lyer published the figure in 1889. Two shafts of equal length, one capped with inward arrowheads and one with outward tails, look clearly unequal: the one with outward fins looks longer. In his original version, people asked to mark a midpoint placed it toward the tail end.

Explanations still compete. Richard Gregory argued it is misapplied size constancy, because the figures resemble the near and far corners of buildings. Catherine Howe and Dale Purves traced it in 2005 to the statistics of natural images, and centroid accounts locate it in how the brain pools position signals. Claims from the 1960s that people in less carpentered environments see it less have since been challenged.

The Illusion

Lines of equal length look different depending on what is at their ends: outward fins make a line look longer, inward arrowheads make it look shorter. The surrounding shapes change the perceived size of the thing itself, even when you know the lines are equal.

Origin
Müller-Lyer (1889)
Also called
Müller-Lyer figure
In practice
Check lengths by eye as well as by number
When to Use
How to Use
The classic 01 / 10

Same Line, Different Length

Two shafts of identical length: one with arrowheads pointing in, one with tails pointing out. The tailed one looks longer, and it keeps looking longer even after you measure both.

Best for
Explaining the illusion
Use when
Elements have decorated ends
Avoid when
Ends are plain and flat
RelatedChartjunk
Charts 02 / 10

Pointed Bars Mislead

Bars and progress indicators with arrow tips or flared caps are hard to compare, because their ends change how long they look. Use flat-ended bars on a common baseline for anything people must compare.

Best for
Bar charts and progress bars
Use when
Bars have decorative caps
Avoid when
Bars are flat and share a baseline
RelatedData Visualization
Navigation 03 / 10

Chevrons Change Perceived Width

Breadcrumbs and step indicators drawn as chevrons can make equal segments look unequal. Check their widths and spacing by eye, not only in the inspector.

Best for
Breadcrumbs and step indicators
Use when
Segments use arrow shapes
Avoid when
Segments are plain rectangles
RelatedNavigation Patterns
Spacing 04 / 10

Measure, Then Look

Pointed shapes don’t look centered when they are mathematically centered. A play icon placed exactly in the middle of a circle looks off to the left, so designers nudge it right. Correct optically, then document the adjustment.

Best for
Icon and spacing reviews
Use when
Shapes have pointed or angled ends
Avoid when
Pixel-exact alignment is required, as in tables
RelatedGestalt Principles
Diagrams 05 / 10

Arrowheads on Dimension Lines

Inward arrowheads on a measurement line make the distance look shorter than it is. For lengths that matter, use tick-mark ends and print the number.

Best for
Diagrams, maps, and annotations
Use when
Showing lengths or distances
Avoid when
The length is labeled with a number
Explanation 06 / 10

A Shortcut for Depth

Richard Gregory proposed that the brain reads inward fins as the near corner of a building and outward fins as the far corner of a room, and scales them as if they were at different distances. Others explain it with image statistics or position pooling.

Best for
Understanding perception
Use when
Explaining why the illusion happens
Avoid when
Treating one explanation as settled
Culture 07 / 10

Carpentered Worlds?

In 1963 Segall, Campbell, and Herskovits found that the size of the illusion ranged from 1.4 to 20.3 percent across groups, and linked it to living among straight lines and right angles. Later work challenged that reading, and a 2025 review argues that the differences were largely artifacts.

Best for
Research with diverse audiences
Use when
Making claims about culture and perception
Avoid when
Assuming differences without testing
Persistence 08 / 10

Knowing Does Not Help

Pigeons and a grey parrot have been shown to perceive the illusion too, and people still see it after measuring. Since awareness doesn’t fix it, design so that lengths read correctly at a glance.

Best for
Design reviews
Use when
A layout depends on judging lengths
Avoid when
Lengths are labeled
✦

The Müller-Lyer Illusion in the Age of AI

Generated layouts and charts are built from numbers, not from what people perceive. Optical checks still need a human eye.

✦ AI Era 09 / 10

Generated Layouts Skip Optical Fixes

AI layout and icon tools align shapes by their geometry, so arrows, chevrons, and play icons can come out looking off-center or uneven. Review generated work by eye and correct it optically.

Shift
Numeric → optical
Use when
Generating interfaces or icons
Watch for
Shipping generated layouts unreviewed
✦ AI Era 10 / 10

Stylized Charts From AI

AI chart tools may decorate bars with arrow tips, gradients, or 3D effects that distort comparisons. Ask for plain bars on a shared baseline, with values labeled.

Shift
Decorative → accurate
Use when
Generating charts with AI
Watch for
Stylized bars for comparisons
Further Reading

Original

Research

Wikipedia