What Is Above the Fold Is Settled by Whether Answers to Two Questions Are Visible

Twelve hundred pixels wide, six hundred and fifty pixels tall, fifty milliseconds, three seconds, half of all visitors gone. Look up how to design the first view and numbers of this kind arrive first.

Numbers are concrete, so they convert straight into work. Trim elements until they fit the specified height; lighten images until they fit the specified interval. The work advances, so the design looks as though it is advancing too.

Yet you can finish every item on that list and find the result unmoved. The dimensions match the specification, the elements are all present, and the visitor still leaves within seconds. At that point there is no move left against the numbers. They have all been met.

What happens on the first screen is not an adjudication of dimensions. The visitor is adjudicating what this page is about and whether they fall inside its object. The material used in that adjudication is called the outline in what follows. A screen on which the outline has not emerged will not produce one however the dimensions are fitted. Conversely, a screen on which the outline has emerged functions even where the dimensions sit somewhat askew.

Let me mark the ground in three parts before going further. First, that the premise on which the dimensional specification stands — a fold, a single boundary — does not exist on a screen. Second, what is actually being adjudicated in the short interval so often quoted. Third, what the outline is specifically made of. All three are settled here.

What is not settled should also be stated. What your own heading ought to say is not decided here. The words available to you narrow automatically once the object is fixed, so the fixing is work that happens outside the page. What can be handed over here reaches as far as the material for judging whether it has been fixed.

Where the damage sits belongs at the front as well. A screen with its dimensions tidied and no outline does not present as a broken screen. It looks composed, its elements are all in place. On the numeric side the departure rate reads only as somewhat high. The single fact that no material for adjudication was ever handed over is recorded nowhere. And what is not recorded does not become a target for improvement either.

That invisibility also turns the direction of the work. Without knowing that the outline is short, the next thing to touch is the arrangement. Reorder the elements, widen the margins, swap the image. Each is genuinely something to do, so the work succeeds in constituting itself as work. While that work continues, the single line of the heading stays exactly as it first stood.

The advice on the first view is built in two layers, dimensions and elements

The widely shared account divides into two layers. One is the display dimension, the other an inventory of elements to place.

In the dimensional layer, the range visible without scrolling is defined. English has a phrase meaning above the fold, and the origin is given as the upper half of a newspaper when it is folded for sale. Concrete figures follow. On a desktop, a width of one thousand to twelve hundred pixels and a height of five hundred and fifty to six hundred and fifty. Because the display area differs by device, the note adds, separate designs are needed for desktop and handset.

In the element layer, what goes into that range is enumerated. A heading stating what is offered. A line supporting it. Material for trust. And a button prompting the next action. Four items to be fitted into a bounded area.

The two layers are joined by a claim about departure. The visitor looks at this range and decides in a short interval whether to read on, so if nothing lands here nothing after it will be read. Figures are attached: a first impression forms in under a second, more than half leave within the first few seconds.

Craft rules follow. Images large, type legible, margins generous. Where moving elements are used, watch the loading interval.

As a description of practice, all of this holds. Arrangements do have to change with the display area, and the upper region is more often seen — that is a repeatedly observed tendency. Nor is the instruction to state what you offer at the top off the mark.

Granting all that, take out the premise the two layers share. The first view is being treated as an area. There is a frame of settled size, and the question is what to put in it. The matter is organised as an allocation of space.

Treating it as an area is not in itself an error. Screens do have size, and there is a limit to what fits. Deciding the priority of the elements to include is genuinely necessary.

The trouble is that organising it entirely as a matter of area lets the discussion proceed on the premise that the contents are already settled. What the heading says has been decided, and only the placement remains.

In most cases it has not been decided. Because it has not, and the placement discussion begins anyway, headings end up carrying a line like take your business to the next stage — a line that fits any business at all. A state of perfect arrangement and zero outline is assembled exactly this way. And that state is invisible from the dimensional side. The dimensions are correct.

The newspaper fold sat at one place. The screen fold does not settle

The premise on which the dimensional layer stands was borrowed from newspapers. And the condition that held for newspapers does not hold for screens.

A newspaper is physically folded in half, and at the point of sale only the upper half shows. So the most important story goes in the upper half. That arrangement had a clear warrant. The position of the fold was fixed at one place by the dimensions of the paper. For every reader, the boundary stood in the same location.

A screen has no such single fold. The height of the display area differs by device and is distributed continuously. Even on the same handset it changes by model, by browser, by orientation.

Which is to say: the height visible without scrolling differs for every visitor. The screen one person first sees and the screen another first sees overlap, but they are not the same.

Two consequences come out. First, no particular height can be designed as a boundary. An instruction to stay within six hundred and fifty pixels lands only on the person at six hundred and fifty. For anyone taller it leaves whitespace; for anyone shorter it leaves a severed element.

Second, packing that assumes a boundary stops working. The constraint that everything must fit above the fold disappears. How much to include is settled not by area but by the quantity of material the adjudication requires.

The observation that the upper region is more often seen sits comfortably beside this. Elements placed higher are seen more often; that is a fact. But more often seen and there is a boundary are different claims. The former is a continuous tendency, the latter a discontinuous break. From a tendency the design becomes: order from the top by importance. From a break the design becomes: pack everything inside the boundary. The same observation yields wholly different designs.

Assume the boundary and the upper region grows dense. A dense upper region is a screen with so many elements that nothing tells the reader where to look. Packing makes the outline disappear — an inversion.

The consequences also show in how verification proceeds. If you believe there is a boundary, improvement becomes the work of permuting the arrangement inside it. The permutations are innumerable, so the work has no end. Work without an end feels like progress for as long as it continues. Once the boundary is known to be absent, that work becomes unnecessary and the question shrinks to a single dimension: what to place in what order from the top.

None of this says dimensions may be ignored. If a heading wraps onto five lines on a narrow handset, it stops being readable at a glance. Dimensions bear on the level of whether the outline can be read. Not whether it fits inside a boundary, but whether it reads without strain on that device.

What settles in fifty milliseconds is agreeableness, not the outline

The figure for the speed of judgement comes from real research. And what that research measured is not the outline.

Lindgaard and colleagues at Carleton University in Canada examined how short a presentation interval suffices for the visual appeal of a web page to be judged (Lindgaard, Fernandes, Dudek & Brown, 2006, Behaviour & Information Technology, 25(2), 115–126). The experiment prepared a condition showing the page for five hundred milliseconds and a condition showing it for fifty, and took ratings on the same stimuli.

The result was a strong correlation of ratings across conditions. Even at fifty milliseconds, ratings came out close to those given after longer exposure. From this the phrase the first impression settles in fifty milliseconds spread.

What needs confirming is what was measured. What was measured is the rating of visual appeal. Looking at that screen, do you find it agreeable. Colour, density of arrangement, quality of image, typeface — these compose the whole impression in that brief interval.

Two things were not measured. One is whether the page could be understood as being about something. The other is whether the viewer could adjudicate their own inclusion in that something.

Neither happens in fifty milliseconds, because both require reading. Agreeableness is adjudicated without reading a word; the outline is not adjudicated without reading.

So reading this research as whether you get read settles in fifty milliseconds changes its range. What settles is agreeableness, not whether you get read.

Mistaking the range turns the design around. Read agreeableness as decisive and the investment goes into finish. Read the outline as decisive and the investment goes into what the words say. The same research sends you toward wholly different work.

This does not make agreeableness irrelevant. A coarse-looking screen raises the chance of being left at that point. Agreeableness operates as the precondition for having the outline read.

Put in order: agreeableness prevents the result of not being read. What produces the result of being read is the outline. You can raise the former while the latter stays at zero.

The distinction may read as thin, since both are required. Where it bites is in the allocation of time. Running things alone, the time available for building the screen has a ceiling. Within that ceiling, spending it on fine adjustments of finish and spending it on re-deciding one line of heading are different choices. Without the distinction, that choice never rises into view.

The first screen is read as a cue for estimating the rest of the page

People can judge only from the screen in front of them, and about the continuation they have not yet seen they infer from that same screen. Supplying the material for that inference is the job of the first screen.

The mechanism of that inference has been formalised in research on how people search for information. Pirolli and Card described the behaviour of people seeking information within the same framework used for animals foraging for food (Pirolli & Card, 1999, Psychological Review, 106(4), 643–675). At the centre stands a structure in which the value of what lies further on is inferred from the cues near at hand. Where the cue is strong, the searcher advances; where it is weak, the searcher turns back.

Carried across, this reads: the first screen is read as a map of the whole page. Whoever sees it forms a prediction that such-and-such continues beyond, and the judgement whether to read on is passed against that prediction, not against the actual continuation.

So the office of the first screen is not to attract interest. It is to let an accurate prediction form. Where the prediction is accurate, whoever needs the content stays and whoever does not need it leaves.

This points in a different direction from designing to reduce departures. Make the prediction accurate and departures among those outside the object in fact increase. What decreases is only the portion who belonged to the object and left by misreading.

That distinction is invisible in the numbers. Both are recorded as the same departure. Watch only the numbers and a design that keeps everyone by leaving the prediction vague will show the better figure.

What happens when it is vague. Among those who stay, the proportion outside the object rises. They read on and leave further in, so the point at which departure occurs simply moves backward. The reading time consumed in that shift has been spent.

Pirolli and Card’s framework explains the step beyond as well. Where the cue is weak, the searcher stops advancing and moves elsewhere. A weak cue does not produce a wrong prediction. It produces no prediction, so the searcher leaves without holding judgement open. That is the position occupied by take your business to the next stage, which is why it sets nothing in motion.

One might hold that whether you belong cannot be known without reading, so cutting at the first screen comes too early. Subjects that only reveal their relevance once read do exist.

Even then the outline is required. The outline is not a declaration that you are implicated in this; it is a statement of what this is about. Given what it is about, the reader can adjudicate their own relevance. Handing over the material for a judgement and handing down the judgement in someone’s place are different acts.

Bring the outline out accurately and the width of the object looks narrow. However broadly the content actually applies, the clearer the writing the more readers conclude it is not them. This cannot be avoided. Clarity and coverage do not both hold within the same area. Given the choice, take clarity. A comprehensive, vague statement looks like nobody’s own subject, and many people leave.

The outline is made of answers to two questions, subject and state

Decompose the outline and two questions come out. The question of subject and the question of state.

The first question is: what is this page about. What has to be answered is the subject handled. Not the product name. A product name means something only to those who already know the product. The subject handled is the problem the product bears on.

Many screens stumble here. Expressions like make your independence a success or accelerate your business state no subject. They apply to any business at all, so they mark off no range.

A state in which the subject is stated is a state in which reading it tells you what range is not handled. What you handle is conveyed only paired with what you do not handle.

The second question is: am I inside the object. What has to be answered is the reader’s own state. Not an attribute. Write an age or an occupation and the reader still cannot adjudicate their inclusion. What can be adjudicated is whether it matches the state they presently stand in.

Independent for a few years, revenue coming in, and time continuing to shrink is a state. Against that description the reader answers instantly whether it applies. Against a freelancer in their thirties they can also answer, but answering tells them nothing about their own relevance.

With answers to both questions present, the outline has emerged. Lose either one and it has not. Subject alone gives a state of I see what this is about but not whether it concerns me. State alone gives I see this is about me but not what it does for me.

Answering the two questions does not strictly require prose. A diagram or an image can sometimes state the subject. The state side, though, almost certainly requires words. State is a description of the interior, so rendered as a picture it becomes a generic figure and stops serving as material for adjudication.

Write the state and those not in it leave. That is the design working as intended, but the number who left is recorded, and no comparison with the case of not writing it is available. A design that brings the outline out is also a design whose effect is hard to demonstrate in numbers. Whether to adopt something that cannot be demonstrated is a matter on the judgement side.

The order of the two questions also changes how the page is read. Put state first and the verdict this is about me arrives first, with subject entering afterwards. Put subject first and anyone uninterested in the subject leaves there. Which is better depends on whether the subject is already known. The less known the subject, the more putting state first gets the page read.

When the heading will not settle, what has not settled is the object

What jams most in practice is the single line of the heading. And the cause of the jam is, in many cases, less a shortfall in writing skill than an undecided answer to whom it is for.

The test is simple. Ask yourself who you want this line to land on, and see whether you can answer with one state. If the only answer available is independent people generally, it has not been decided.

Attempt to write without deciding and broad words are chosen of necessity. Broad words get chosen because, with the object unnarrowed, narrow words are unavailable. The breadth of the words is a result, not a cause.

So the work of fixing the heading is not the work of rewriting. It is the work of deciding the object. Once decided, the available words narrow on their own.

Where the deciding happens is outside the page. Unless what business you run and where its value comes from have been settled, the object will not settle. That order cannot be moved.

The reverse order is arguable: deciding the object requires seeing responses, so you have to put something out first. Putting something out is sound. Things that cannot be known without responses genuinely exist.

But put it out in broad words and the response cannot be read. When a line aimed at independent people generally draws nothing, you cannot separate a wrong object from bad wording from an absent demand. Put it out narrow and, when it misses, you can see what missed.

Put it out narrow and the early count of responses falls. A smaller count lengthens the interval needed for a verdict. The wish to reach a verdict quickly operates as pressure to choose the broad words. That pressure arises on its own, so without noticing it you tend to fall to the broad side.

Businesses whose object does not settle into one also exist. Where the content works on several states, folding them into one heading yields a line that half-lands on each.

The way through here is not to widen the heading. It is to divide the entrance. Prepare a separate page per state and write only that state in each heading. Try to capture several objects on one screen and you tend to return to broad words. Holding several entrances and widening one entrance are wholly different designs.

And dividing the entrance does not require dividing the confluence. Entrances may be several while the receiver beyond them is one. That thinking is handled in customer journey design.

Add elements and the outline thins

Add elements to the first screen and the outline thins. Not because the area is finite. Because as elements multiply, which one states the subject stops being legible.

Line up a count of results, the names of clients, an award, and a limited-period notice beneath the heading, and each looks as though it might function as material for trust. But on a screen holding all four at once, the reader must first decide which to read.

That deciding-which-to-read is a load borne by the reader. By the measure of that load, adjudication of the outline slips backward.

The effective move is to leave on the first screen only the elements that state subject and state, and send the rest below. Sending them below does not remove them. Stacked vertically, they get read from the top. This is available because the boundary does not exist. With no requirement to fit everything above the fold, order solves it.

It is not the simple case that fewer is always better. Sometimes two elements are needed to state the subject, and in some fields the description of state runs long. The criterion is not a count but whether each element answers one of the two questions. Elements that answer neither go below.

Elements sent below get seen less often than they did above. Send results and trust material down and the response of the segment that was reassured by them may fall.

Before pulling them back up, there is something to confirm. Whether what fell was the count of people who judged after reading the outline, or the count who left before reading it. The former is a placement problem; the latter is a problem in the outline itself. The same downward movement in a number comes from two wholly different causes.

One might hold that results and trust material are exactly what should come first, this being a page from an unknown party. But trust material works only after it is settled what the trust is about. Look at a results count from a party whose subject is unclear and you cannot adjudicate whether the figure is large or small. A figure that cannot be adjudicated builds no trust and consumes area.

In order: the subject becomes clear. Your own inclusion becomes clear. Only then does the question can this person be entrusted with my work arise, and the trust material becomes the answer to that question. Place the answer before the question arises and the answer gets skipped.

That order also caps the work of reduction. What can be reduced is only the answers placed before the question arose. Elements standing after it, once removed, leave the material for judgement short. So what to look at when choosing what to cut is not the kind of element but where on the screen it sits. The same results count is skipped material directly beneath the heading and an answer to a question when it follows the description of state.

What images and motion carry is the agreeableness side

Large images and moving elements work in the direction of raising agreeableness. The outline, though, they do not convey. What an image conveys is atmosphere, which is neither subject nor state.

The plain case is the photograph of a person. A photograph of someone smiling at a desk can go on any business’s page. Being placeable is being unnarrowed.

The second case is abstract shapes. In businesses handling structure and design they look congenial, but the shapes themselves never state the subject.

The test is the criterion applied to the count of elements. Remove that visual element and see whether the answers to the two questions are lost. If they are not, it was not carrying the outline.

None of which means it should be removed. The office of carrying agreeableness has meaning of its own. What matters is not mistaking the position, because enlarging an image never makes up a shortfall in the outline.

Diagrams that do state the subject exist. A picture of the product in use, or a map of the structure being handled, conveys the subject. It conveys only where the diagram points at a particular content. The test runs: could that diagram be pasted onto a wholly different business’s page. If it could, it is not pointing at a subject.

Moving elements increase the loading interval. By the measure of that increase, the outline appears later. An element added to raise agreeableness delays the arrival of the outline — an effect running the other way.

Rotating displays carry a separate problem. Use a device that cycles several headings in turn and which single line is the subject never settles. A reader partway through the first line when the next arrives stops reading. Rotation gets used to escape the constraint of not being able to hold several subjects, and the escape ends with no subject conveyed at all.

Where the image is itself the product, the case changes. Selling works or made objects, the image is not atmosphere but the subject itself. The test does not change here. Strip the images from a page selling works and what is handled stops being conveyed. In that case the image is carrying the outline.

Even there, though, the state side stays vacant. What the image answers is only the question of subject; who it is for cannot be read off an image. On a page of photographs of work, what state the person who needs that work stands in can be set down only in words. The more the image carries the subject, the more readily the description of state is forgotten — because the subject is conveyed, and so the outline looks conveyed as well.

With the text alone left standing, do answers to the two questions come out

Three moves will tell you whether the outline has emerged. Dimensions play no part in any of them. The outline is not a property of area, so what gets checked is what is written on the screen.

The first is to extract only the text of the first screen and show it to someone else. Show it to someone who does not know the business. Then ask two things. What is this about. What state is the person this was written for in. Answers to both mean the outline has emerged.

Stripping the image and leaving only text is the point. With the image present, the reader infers from atmosphere, and whether the text carries the outline stays unknown.

The second is whether the heading could be pasted onto a competitor’s page. Pasted without discord, the heading marks off no range. If discord appears, it does. This one runs alone, so it serves as a first-pass verdict before showing anything to anyone.

The third is to watch the proportion of enquiries from outside the object. With the outline out, contact from outside the object falls. If it does not fall, either the outline is too wide or action is occurring before the outline lands. Reading the content of the enquiries separates the two.

The three have limits. The first and third require another person. At the stage of running things alone, only the second is available.

The second alone tells you a great deal. For as long as you are writing a heading that can be pasted elsewhere, the outline has not yet been designed.

In a field with no visible competitor the second appears unusable. There, paste it onto another of your own products or pages. Even within one business, where the content handled differs the pasting should turn unnatural. If it does not, those two carry the same outline, and that itself is information about the design.

Nothing here can be handed over as a number. How many characters the heading should run to, how many elements at most, whether an image ought to be included. All three change in meaning with the complexity of the subject handled and the quantity of prior knowledge the reader already holds. Put a number in from outside and the judgement is settled without those conditions ever being seen.

The newspaper fold. The fold sat at one place because of the paper’s circumstances, and a screen has not inherited them. What remains where the boundary is gone is not area but order, and order is settled by what the screen answers. What is adjudicated in a short interval is agreeableness; the outline is not adjudicated without reading. And the outline is made of answers to two questions, subject and state.

So there is one move you can run on your own. Could this heading be pasted onto a competitor’s page as it stands. If it could, the outline is not yet there.

How the page as a whole is assembled beyond bringing the outline out is handled in landing page structure. Where what to raise as the subject will not settle at all, making a concept and building a worldview lie upstream. Subject and state have to be settled before the screen is made, or they cannot be shown at all. The move itself — bringing judgement forward from execution to design — is handled in systemising.