Your website's first screen: can people tell what you do and who it is for in five seconds?

The first screen is not a matter of taste but a comprehension test. Someone arrives from an ad or a search engine, briefly looks at what is visible without scrolling, and decides whether to keep reading. If they do not know what you sell and whether it is for them, the rest of the page stops mattering.

Guides on the subject end with recommendations: a short headline, one button, visual hierarchy, and contrast. A rule tells you how to design something, however, not whether your version works. This article is exclusively about the latter and only about the area visible without scrolling.

We deliberately do not cite figures such as “you have three seconds” or supposed attention thresholds. These values circulate in guides without sources and do not transfer between industries — someone who has been looking for a service for a week reads a page differently from someone arriving directly from an ad.

Three questions the first screen must answer

The entire job of the first screen comes down to three answers. Not an impression and not aesthetics — three pieces of information a stranger must be able to extract without effort.

1. What it is.A concrete answer naming what you do: “accounting for sole traders” or “heat pump installation.” Not a promise of an outcome, but the name of the thing — a promise without a name leaves people guessing.
2. Who it is for.Who the audience is and is not: company size, industry, region, or stage of the problem. For the right person, this says “this is about me,” and only then prompts them to keep reading.
3. What to do next.One action, named unambiguously and visibly more important than the others. Not three equal buttons or “learn more,” but an action people understand before clicking.

It sounds obvious, which is why it is rarely tested. In practice, most first screens answer one of the three questions — not through carelessness, but because the team knows the context and cannot see the gap.

• A headline about values, not the product“We create solutions that transform the way you work” sounds grand and says nothing about what you get. The answer must then be extracted from the rest of the page.
• A photograph instead of a sentenceA large team photo occupies most of the screen, while the company name is the only text. The image answers none of the three questions because it could belong to any industry.
• An audience blurred into nothing“For companies of every size” excludes nobody and convinces nobody. The intended audience does not recognize itself.
• Several equally prominent actionsContact, pricing, demo, and blog in one row. When everything matters, people choose nothing.

A five-second test you can run yourself

It is the least expensive verification method I know and one of the few you can run without tools or a budget. Briefly show someone the first screen, hide it, and ask what they remember. The difficulty lies in discipline: do not prompt, explain, or defend.

1. Take a screenshot; do not open the page.Take two screenshots — one on desktop and one on a phone — containing exactly what is visible without scrolling. An open page invites scrolling and ruins the test.
2. Find five people outside the company.Anyone who does not know your offer. Five people are enough to make recurring answers visible.
3. Give one sentence of context.“I'm going to show you part of a website for a moment.” Nothing more — do not say whose website it is or name the industry. Every additional word is a clue.
4. Show it for five seconds, then hide it.Count down and close the image. Do not allow a second look even when someone asks — the request to see it again is itself a result.
5. Ask the questions in a fixed order.Always use the same questions in the same order and write down the answers verbatim. Do not paraphrase them in your notes.

The questions you ask after hiding the screen matter more than the display itself. The first three test the three answers; the next two reveal what the data cannot show.

• What does this company do? Explain in your own words without using words from the page.
• Who is it for? Who is the customer here?
• What could you do on this page if you wanted to continue?
• What did you notice first — which element or word?
• Was anything unclear or strange?

Reading the result is simple. If three out of five people cannot say what you do, no change to the button color will fix it. If everyone can name the industry but nobody knows who it is for, the problem lies in the audience. Record quotes, not judgments — “something about invoicing for small businesses” is information; “I guess it was okay” is not.

The five-second test is a research practice, not a Meetlead feature — all you need is a screenshot, stopwatch, and notebook. If you want to extend it with live tasks, we explain how to conduct such sessions in our article about website usability testing.

How much is really visible without scrolling

The greatest misconception is, “the first screen ends here.” It does not end at any one point. The fold is not a number but a distribution — different on a phone in portrait orientation, a laptop, and a large monitor. The same section fits in full for one person and is cut off halfway through a sentence for another. To check how far visitors scroll past the first screen and whether they reach your price and button, see our guide on scroll depth.

Then there is everything that consumes space before the content can appear. A design viewed in a graphics tool has no address bar, consent banner, or promotional notice — but the page in real use can have all three at once.

• Browser and system barsOn a phone, they consume a strip at the top and often another at the bottom — more than ten percent of the screen height that is never visible in a mockup.
• Consent bannerIt can be the largest element on the first screen and may cover the headline and button on a phone. Until someone makes a choice, they are looking at the consent dialog, not your offer.
• Sticky header and promotion barA fixed menu and a shipping or discount strip take more space. They are usually configured once and never counted as part of the first screen.
• Floating elementsA chat launcher, callback button, or back-to-top icon. On a phone, they can cover the primary button if both occupy the same corner.

The data answers this question directly on one condition: it must be separated by device. A scroll map shows what percentage of visitors reach each height, while a click map shows whether the primary button is clicked at all. We describe how to read the maps themselves in our guide to reading heatmaps, and the differences on smaller screens in our article about mobile conversion.

The menu is a separate issue: on a phone, it hides behind an icon, so it cannot carry the answer to any of the three questions — we diagnose navigation itself in our article about website navigation. One rule is enough here: if people must open a drawer to understand what you do, the first screen has failed the test.

Slogans that mean nothing

The empty-slogan test is simple: if you can move your headline unchanged to a company in another industry, it is not a headline but filler. Here is another version of the test: could a competitor write the opposite? Nobody will write “incomplete solutions,” so “complete solutions” carries no information.

↔ Scroll the table sideways to see all columns.

You usually do not need to invent the right words — they already circulate around the company: search queries, chat conversations, and the opening sentences of tickets. If customers themselves ask, “do you carry out post-accident inspections?”, you already have a piece of the headline in their language.

When the offer is too complex for one sentence

The most common defense against a specific headline is, “we do too many things to fit them into one sentence.” Sometimes that is true — a company serves three different customer groups, or a store has four categories with no common denominator. The solution is not a longer sentence, but a different first-screen structure.

1. Name the category, not every service.Use one sentence about the area you cover, followed by a clear division below. “Building maintenance” says more than a list of six specialisms squeezed into the headline.
2. Branch at the very top.Show two or three visible routes for different groups: “for companies,” “for homeowners' associations,” and “for institutions.” This is not a menu but a question about who the visitor is.
3. Build separate landing pages.If the groups genuinely differ, send ad traffic to separate pages whose first screen addresses only one group. The home page remains a router, not a salesperson.
4. Test every branch separately.Run the five-second test on each version. People should answer the same three questions after every path.

Before expanding the home page into three pillars, test one assumption. If the customer journey shows that most people enter directly through service pages or blog posts, the home page is not their first screen — and you need to run the test on that other page. If you plan to fit several offers into a carousel, first check whether anyone sees the later slides; our guide to the homepage carousel shows how to do it with your own data.

Verification after the change

The first screen tempts you to rebuild it all at once: a new photograph, headline, button, and layout. After a change like that, you can no longer tell what worked. It is better to change one thing at a time and write down what you expect.

1. Record the test result before the change.Five sets of answers, verbatim. Without that reference point, all you have after the change is a feeling that it is better.
2. Change one thing.The headline, the button, or the graphic. Not all of them. Rewriting the headline as a specific service and audience usually has the greatest effect.
3. Decide what should change in the data.Write this down before implementation: a higher percentage of people scrolling below the first screen, more clicks on the primary button, or fewer questions about what you do.
4. Repeat the test with five new people.New people — someone who saw the previous version cannot assess the new one with fresh eyes. This check works immediately, with no need to wait for traffic.
5. Wait for a full cycle and compare the data.At least two weeks, longer with low traffic. Compare it with the period before the change, separately for phones and desktops.
6. Watch several recordings after the change.The numbers will tell you whether it improved. The recordings will tell you whether it improved for the reason you expected.

• The first screen is a hypothesis about what someone will understand within seconds — and hypotheses must be tested.
• Three questions: what it is, who it is for, and what to do next. One missing answer is enough to deny the rest of the page a chance.
• The area visible without scrolling is a distribution, not a number — and phone bars and consent banners consume it.
• A slogan that fits any industry is not a headline but filler.
• One change with a recorded expectation produces knowledge; rebuilding everything at once produces only a new look.