Good Citizens · Usability Harness · Simulator ·

Fovea: see a page the way one glance does

Only a tiny patch of your eye sees sharply, about the size of your thumbnail held at arm’s length. Everything else is a rough summary your brain fills in, while your eye jumps from spot to spot three or four times a second.

Beside this, drop in a screenshot of your own design, move the pointer to look around, and set how far away you sit. The camera can measure that for you if you like; nothing leaves your browser.

Design

Sample · a lattice application frame

Or drop a screenshot or exported frame onto the canvas. It stays in this browser.

Viewing distance · 50 cm

The camera measures how far you sit from the screen, from the size of your irises. Video never leaves this browser, and nothing is recorded.

Screen · not calibrated

Browsers do not report a screen’s real pixel size. Until you calibrate, sizes assume the CSS reference pixel.

One glance, from here

1.7 cm sharp

About 66 CSS px of this screen across. Everything else is peripheral: acuity from a standard model, blur beyond the fovea exaggerated threefold to stand in for crowding, colour fading with distance from the point you look at.

I · How the eye sees

Sharp in the middle, a summary everywhere else

under 1%of the screen is sharp at onceone hop: 7 to 9 lettersone pause: a quarter second
Only the patch under the loupe is sharp; the rest is a rough summary. The eye hops three or four times a second.

At the centre of the retina is a small pit packed with cone cells, the fovea. Its very centre, the foveola, is about a third of a millimetre across and covers roughly one degree of what you see.

Sharpness falls away quickly from there: at two degrees from the centre, you can make out detail only about half as fine. At a laptop’s distance, about 55 centimetres, one degree is about a centimetre on the screen. Do the sums for a 13-inch laptop and the sharpest patch is well under one percent of the screen, roughly one short word of body text.

What lies outside is not simply blurry. The periphery keeps a compressed summary, good for the gist of a scene and for noticing movement, poor for picking out small things among clutter. Letters that are too close together in the periphery run into one another, an effect called crowding, described by Herman Bouma in 1970 and studied closely by Denis Pelli and Katharine Tillman1. The blur in this tool is a simplification that stands in for it.

II · How we know

A painting, seven questions and seven ways of looking

How wealthy is the family?How old are the people?How long was the visitor away?
After Yarbus (1967), with Repin’s An Unexpected Visitor: the same painting, looked at three ways.

The eye does not glide; it jumps. Reading, it pauses for about a quarter of a second, then leaps seven to nine letters on.

The French ophthalmologist Louis Émile Javal gave those leaps their name, saccades, in 1879. In 1901 Raymond Dodge and Thomas Cline photographed the eye’s movements for the first time without touching it. In the 1960s the Russian psychologist Alfred Yarbus showed people Ilya Repin’s painting An Unexpected Visitor and asked them different questions about it: how wealthy the family was, how old they were, how long the visitor had been away. Each question changed where they looked6.

So looking depends on what a person is trying to do. On the web, eye tracking by the Nielsen Norman Group found readers often scan text in an F shape7, two sweeps across and then down the left, and called it bad for readers and businesses alike, a sign that a page gave them nothing better to hold onto.

III · Who it affects

Everyone, and some people far more

healthythe whole fieldglaucomanarrows from the edgemacular degenerationa hole at the centre
A perimeter chart maps what each eye can see. Glaucoma takes the field from the outside in; macular degeneration takes the centre.

Every reader sees a page one small patch at a time. For some, the useful patch is smaller still.

Glaucoma narrows the field from the outside in; macular degeneration damages the centre itself, so people learn to look slightly to one side of what they want to see. With age, the “useful field of view”, how much someone can take in at a glance, shrinks, and in one study older drivers who had lost 40% or more of it were more than twice as likely8 to crash. Tiredness, distraction and a cluttered page shrink it for everyone.

IV · What to do

What it means for your design

  1. Click here to payPay by card
    01

    Put the meaning first

    Readers scan the start of headings, links and lines. Lead with the words that matter: “Pay by card” rather than “Click here to pay”.

  2. 02

    Make it scannable

    Clear headings, short paragraphs and a few bold key phrases give a scanning eye something to land on, and replace the F with a better pattern.

  3. 03

    Put important messages where people are looking

    A warning off to the side will not be read. Put it next to the field or the button the person is using.

  4. 04

    Give things room

    Clutter crowds the periphery. Space around important items lets them be recognised before the eye arrives.

  5. 05

    Use motion sparingly

    The edge of vision is drawn to movement but cannot read. An animation in the margin pulls the eye away without telling it anything.

  6. 06

    Check what a glance gets

    Look at your design blurred, as the tool on this page does. If a button or a price stops saying what it is out of focus, it will be missed.

V · Prototypes

Works on prototypes as they are

live siteFigma prototypeStorybook story

This tool changes the pixels you see, so it works on anything in a browser: a live site, a Figma prototype link, a Penpot or Sketch prototype, a Storybook story or a generated app.

Open the prototype, click the bookmark, and click through it. The earlier you catch a problem, the cheaper it is to fix.

VI · Myths

What people get wrong

The fovea covers one or two degrees
The sharpest part, the foveola, covers about one degree. The whole fovea is closer to five.
Peripheral vision is just blurry
It keeps a compressed summary of the scene. The trouble is less blur than crowding, which makes small things in clutter unrecognisable.
Design for the F-pattern
The researchers who named it treat it as a failure to fix, not a template to follow.
Eye tracking reveals what people want
Where people look depends on their task, and whether you can work backwards from gaze to intent is still argued over.

Take it to any website

👁️ Fovea

↑ Drag it to your bookmarks bar

Click it on any page and the page becomes what one glance sees from a laptop’s distance: sharp around your pointer, blurred and greyed further out. Click it again to switch it off.

Works in Chrome, Safari, Firefox and Edge on a computer.

One Good Citizens folder with every tool in it. Download it, then import it:

  • Chrome: Bookmarks › Import bookmarks and settings › Bookmarks HTML file
  • Safari: File › Import From › Bookmarks HTML File
  • Firefox: Bookmarks › Manage bookmarks › Import and Backup › Import Bookmarks from HTML

Every time you check a design against the people who will use it, you are doing what Good Citizens is for. Thank you for that.

More tools: Colour vision · Ageing eyes · Shaky hand · all 10

For developers

Add it to your own site

Working on a site of your own? Download the two small files, then paste these two lines into your page. Change the distance to suit: 60 is a laptop on a desk, 30 is a phone in the hand. Press F to switch it on and off.

<link rel="stylesheet" href="fovea.css">
    <script src="fovea.js" data-distance="60"></script>

VII · Sources

The research behind this page

Every figure above comes from one of these 8 sources. The small numbers in the text point here, and each source points back.

  1. Peer-reviewed study

    The uncrowded window of object recognition

    Pelli and Tillman ·

    Nature Neuroscience

    nature.com · cited in I

  2. Review

    Seven myths on crowding and peripheral vision

    Strasburger ·

    i-Perception

    pmc.ncbi.nlm.nih.gov

  3. Review

    Capabilities and limitations of peripheral vision

    Rosenholtz ·

    Annual Review of Vision Science

    annualreviews.org

  4. Peer-reviewed study

    Picturing peripheral acuity

    Anstis ·

    Perception

    anstislab.ucsd.edu

  5. Review

    Eye movements and on-line comprehension processes

    Staub and Rayner ·

    The Oxford Handbook of Psycholinguistics

    people.umass.edu

  6. Reference

    Yarbus and An Unexpected Visitor

    Bauhaus-Universität Weimar

    uni-weimar.de · cited in II

  7. Guidance

    F-shaped pattern of reading on the web: misunderstood, but still relevant (even on mobile)

    Nielsen Norman Group ·

    nngroup.com · cited in II

  8. Report

    Visual processing impairment and crash risk in older drivers

    Owsley

    National Highway Traffic Safety Administration

    nhtsa.gov · cited in III