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
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
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
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
- 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”.
- 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.
- 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.
- 04
Give things room
Clutter crowds the periphery. Space around important items lets them be recognised before the eye arrives.
- 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.
- 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
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.
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.
Or all 10 at once
Download the bookmarks fileOne 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.
Peer-reviewed study
The uncrowded window of object recognition·
Nature Neuroscience
Review
Seven myths on crowding and peripheral vision·
i-Perception
Review
Capabilities and limitations of peripheral vision·
Annual Review of Vision Science
Peer-reviewed study
Picturing peripheral acuity·
Perception
Review
Eye movements and on-line comprehension processes·
The Oxford Handbook of Psycholinguistics
Reference
Yarbus and An Unexpected VisitorGuidance
F-shaped pattern of reading on the web: misunderstood, but still relevant (even on mobile)·
Report
Visual processing impairment and crash risk in older driversNational Highway Traffic Safety Administration