Free tools · Simulator ·

Fovea

At a laptop’s distance, under one percent of the screen is sharp.

Try it here

Move your pointer over the page in the box: only a small spot stays sharp. Drop in a screenshot of your own page to try yours.

any page1 the fovea: about 2° of the view2 the rest, in outline onlyunder 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.

Design

Sample: a bakery’s homepage

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 don’t tell a website how big a pixel really is on your screen. Until you measure it with a card, sizes here are a best guess.

One glance, from here

1.7 cm sharp

That is about 66 pixels across on this screen. The rest is blurred and grayed, the way the side of your eye sees. We make that blur three times stronger than the eye’s, because shapes near each other off to the side are hard to tell apart.

Why should I care?

People only see the small spot they’re looking at, so anything that isn’t where their eye lands goes unseen.

  • Under 1%of a laptop screen is sharp at any moment.
  • 3 or 4jumps of the eye every second.
  • Everyonesees a page one small patch at a time.
windowpicturedoor1 How wealthy is the family?2 How old are the people?3 How long was the visitor away?the red square: where the eyes went first
After Yarbus (1967), with Repin’s An Unexpected Visitor: the same painting, looked at three ways.

What to do on your website

  1. Put the words that matter first.
  2. Put warnings right next to the button.
  3. Leave space around the things that matter.
healthythe whole fieldglaucomanarrows from the edgemacular degenerationa hole at the center90° each wayloststill seen
A perimeter chart maps what each eye can see. Glaucoma takes the field from the outside in; macular degeneration takes the center.

More, if you want it

Check your own website with this tool
👁️ Fovea

This is the button you’ll drag.

  1. Make sure you can see your bookmarks bar, the row just under the address bar. If it isn’t there, press Ctrl + Shift + B, or ⌘ + Shift + B on a Mac.
  2. Drag the Fovea button up into that bar and let go.
  3. Open your own website and click Fovea in the 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 grayed further out. Click it again to switch it off.

This works on a computer, in Chrome, Safari, Firefox or Edge. Phones and tablets have no bookmarks bar, so there are three other ways below.

On a phone or tablet

iPhone or iPad, from the Share button
  1. Copy the tool:
  2. Open the Shortcuts app, make a new shortcut, and add the action Run JavaScript on Web Page. Paste the tool in place of its sample script.
  3. In the shortcut’s details, turn on Show in Share Sheet, and name it Fovea.
  4. Once: in Settings, open Apps › Shortcuts › Advanced and turn on Allow Running Scripts.
  5. On your website in Safari, tap Share, then Fovea.
Android, from Chrome’s address bar
  1. Copy the tool:
  2. Bookmark any page with the star, then edit that bookmark: name it gc fovea and paste the tool in as its address.
  3. On your website, type gc fovea in the address bar and tap the starred bookmark it suggests. Choosing it from the bookmarks list won’t work.
Use it later, on a computer

Send yourself the link, or a reminder for tomorrow morning. Both are made on your phone and sent nowhere else.

Email me the link

Get all 10 tools in one go

One Good Citizens folder with every tool in it. Download the file, then bring it into your browser:

Download the bookmarks file
  • 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

More free tools: Color vision, Aging eyes, Shaky hand, or all 10.

Why this matters

A customer opens your homepage looking for one thing, your phone number. Only the fovea, the small, sharp center of the eye, sees clearly. It covers about the size of your thumbnail held at arm’s length, and it jumps from spot to spot three or four times a second. If the number isn’t where the thumbnail lands, it gets missed.

Beside this, drop in a screenshot of your own page, 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.

Sharp in the middle, a summary everywhere else

At the center of the retina, the light-sensing back of the eye, is a small pit packed with the cells that see color and detail. That pit is the fovea. Its very center, the foveola, is about a third of a millimeter across and covers roughly one degree of what you see.

Sharpness falls away quickly from there: at two degrees from the center, you can make out detail only about half as fine. At a laptop’s distance, about 55 centimeters, one degree is about a centimeter 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. That is your thumbnail.

What lies outside is not simply blurry. The edge of vision keeps a rough 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.

One painting, seven questions, seven ways of looking

The eye doesn’t glide across a page; 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 where the thumbnail lands 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.

Everyone, and some people far more

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

Glaucoma narrows the field from the outside in; macular degeneration damages the center 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.

All the advice, in full
  1. Click here to paylands on “Click”: says nothingPay by cardlands on “Pay”: says what happens

    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. BEFOREAFTER

    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. BEFOREAFTERtoo far

    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. BEFOREAFTERroom

    Give things room

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

  5. moves

    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. IN FOCUSAT A GLANCEstill a button

    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.

Works on prototypes as they are

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.

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 unrecognizable.
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.
Where these numbers come from

Every figure on this page comes from one of these 8 sources. The small numbers in the text point here.

  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

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>