Kofi runs a physiotherapy clinic in Leeds. His website opens with a carousel: five slides, each with a stock photo, a heading and a button, changing every four seconds.
Slide one says “Welcome to Northside Physio”. Slide two announces Pilates classes. Slide three is about the new car park. Slide four has the opening hours. Slide five, the one he is proudest of, explains that patients usually get an appointment within the week.
A woman with a stiff neck lands on the page from a search. She sees a smiling stranger in sportswear, the word “Welcome” and three buttons. While she reads the buttons, the page moves. She scrolls past, finds no price and goes back to the search results.
She never saw slide five.
Kofi, his clinic and his visitor are imagined. The research and rules below are real.
The “hero” is the first screen of a landing page: everything a visitor sees before scrolling. The previous chapter, on first impressions, covered the glance. This one covers what the glance should land on, and what the first screen has to accomplish before the visitor decides whether to keep going.
The fold still matters
Designers like to say “the fold is dead, people scroll”. People do scroll. They just do not look evenly.
In 2018 Therese Fessenden at Nielsen Norman Group analyzed more than 130,000 eye fixations from 120 participants, recorded on 1920 × 1080 screens while they used thousands of websites: news, shops, blogs, FAQs, encyclopedia pages and search results. About 57% of page-viewing time was spent above the fold, in the first screenful. The first two screenfuls took 74%; the first three took 81%.
Two more details from the same analysis matter for a hero. Within the first screenful, more than 65% of viewing time fell in its top half. And compared with a similar NN/g analysis from 2010, when 80% of viewing time was above the fold, the share has fallen as pages grew longer. People scroll more than they used to. The sharp drop in attention below the first screen remains.
So the fold is not a wall. It is a slope. Things above it are seen by nearly everyone; things below it are seen by fewer people, for less time.
What to do with this: decide which three facts a visitor must see even if they never scroll, and put them in the top half of the first screen on a phone. For most small businesses those are: what you offer, for whom or where, and what to do next.
How eyes cross a hero
People do not read a page from the top left to the bottom right like a novel. Nielsen Norman Group has documented several scanning patterns across years of eye-tracking. The most famous is the F-pattern: a horizontal sweep across the top, a shorter sweep a little lower, then a vertical scan down the left edge.
Kara Pernice's 2017 summary at NN/g is clear that this is not a layout to aim for. It is what happens when a page offers unformatted text, the user wants to be efficient and is not interested enough to read every word. In her words, it is the default pattern when there are no strong cues to attract the eyes. People who scan in an F miss whatever sits on the right.
The same summary describes the alternatives. In the layer-cake pattern, eyes jump from heading to heading and skip the body text. In the spotted pattern, people hunt for a specific thing such as a price, a number or a link. In the commitment pattern, a highly motivated reader takes in almost everything. Kate Moran's 2020 update of NN/g's findings, “How People Read Online”, confirms that scanning remains the norm, and that how much people read depends on their motivation and task.
A hero is short, so a full F rarely forms. But the mechanism applies: without clear cues, eyes default to the top line and the left edge, and anything floating on the right edge is easy to miss.
What to do with this: give the eye places to land. A large headline, a shorter supporting line and one high-contrast button create a layer cake the eye can descend in three stops. Put the essentials on the left or in the center of the column, where scanning eyes return.
Six parts of a hero
Strip away fashion and almost every effective hero does the same few jobs. Nielsen Norman Group's 2024 guidance on homepages, by Huei-Hsin Wang, puts the core one plainly: communicate who you are and what you do, with a tagline that explicitly says what the company does, because you should not assume visitors know your brand.
1. Identity. Your name or logo, top left, linking to the homepage. This is pure convention (see Jakob's law in the previous chapter), and convention is the point.
2. Navigation. A handful of plain labels. On a landing page with one goal you may not need navigation at all; the chapter on navigation covers that choice.
3. Headline. The value proposition: what you offer and for whom or where. This is the hardest sentence on the page, and it has its own article: your hero headline is doing the wrong job. The short version: the headline's first job is to make the offer recognizable, not to sound impressive.
4. Supporting line. One or two sentences that make the headline concrete: how it works, where, how long, what is included. This is where “physiotherapy” becomes “45-minute appointments with a chartered physiotherapist, evenings Monday to Thursday”.
5. Primary action. One button that names what happens next. A quieter secondary link is fine for people not ready to act. The chapter on calls to action goes deeper.
6. Evidence. A short line of proof that can be checked: a review rating with its source and count, a professional registration, a named client. Not a row of badges.
7. Visual. An image of the real thing: the product, the room, the person who will help you, the result. The same NN/g guidance warns that users tend to skip purely decorative graphics, and gives an example of a generic stock image that could make visitors misunderstand what a company offers.
What to do with this: label the parts of your current hero with these numbers. Anything that has no number is a candidate for removal. Any number that is missing is a candidate for addition.
One thing first
A hero with six parts can still feel like one message, if the parts are clearly ranked. That ranking is visual hierarchy: size, contrast and grouping telling the eye what to look at first, second and third. Kelley Gordon's 2021 NN/g article on visual hierarchy recommends using no more than three type sizes and limiting very large elements to about two, so that the ranking stays legible.
The quickest way to check hierarchy is the squint test: blur your eyes (or the screen) and see what survives. If the headline and the button survive, the hierarchy works. If a decorative shape or a cookie banner survives instead, it does not. You can try it on the before-and-after heroes further down.
The number of choices matters too.
In choice-reaction experiments with up to ten alternatives, Hick found that the time to respond grew with the amount of information in the choice, at a roughly constant rate, on the order of five bits per second. Ray Hyman's 1953 paper, “Stimulus information as a determinant of reaction time”, extended the idea, which is why the law carries both names. In plain words: more equally likely options mean more time to choose, growing with the logarithm of their number rather than in a straight line.
Be careful with how far you stretch this. Hick and Hyman studied people pressing keys in response to lights they had learned, not visitors reading unfamiliar buttons. On a web page, people first have to read and interpret each option, which is slower and less tidy than a laboratory choice. Treat the law as a direction, not a calculator: every extra equal-looking option adds decision work.
Kofi's carousel slide had three equal buttons. The visitor had to read and compare all three before choosing. One dark button plus one text link makes the decision almost automatic: the button is the default, the link is the alternative.
Position matters as well.
Ebbinghaus described position effects in his memory experiments on himself. Murdock's 1962 paper in the Journal of Experimental Psychology mapped the classic curve: when people heard a list of words and recalled them in any order, items at the start (primacy) and at the end (recency) were recalled better than items in the middle.
The research is about lists of words, not page sections, so it should not be used to justify a particular layout. It does support a modest practical habit: in any short list on your hero, such as navigation labels or a line of three benefits, put the most important item first and the second most important last. The middle is where things get lost.
What to do with this: rank your hero's parts out loud: “first they should see X, then Y, then Z”. Then make X the largest and darkest, Y clearly smaller, Z quiet. Reduce equal-weight buttons to one primary action.
The carousel problem
Kofi's carousel is the most common hero mistake on small-business sites, and one of the best-documented.
In 2013 Erik Runyon published click data from the university's homepage carousel, collected from mid-October 2012 to January 2013. About 1% of visitors clicked a carousel feature. Of the 28,928 clicks, 84% went to the first slide; the other four positions got roughly 4% each.
To be fair to the data, Runyon also measured other Notre Dame sites. One with an auto-forwarding carousel had a much higher click rate, 8.8% of visitors, with clicks spread more widely (40% on the first item, 18% on the second, 11% on the last). Rotation can get later slides seen. It does not change the basic shape: most attention goes to whatever appears first.
Jakob Nielsen's 2013 NN/g article on auto-forwarding carousels explains the cost of rotation. In a test on Siemens' UK site, a user asked to find washing-machine deals gave up and concluded there were none, although a £100 offer sat in the largest element on the page. The panel rotated every five seconds, so the offer was visible about 20% of the time, behind vague link text. Nielsen lists the broader harms: moving content is hard to read for people with motor impairments, low literacy or a different first language; only one item shows at a time; and movement makes users feel a loss of control and assume it is an ad.
The deeper problem is organizational. A carousel lets a business avoid choosing its most important message. Five messages on rotation usually means five messages nobody sees.
What to do with this: pick the one message most visitors came for, and make it the static hero. Move the other slides into sections below, where people who scroll will find them in a stable order. If you must keep a slider (for a gallery of work, say), let users control it, and see the legal section below.
Faces and gaze
You may have seen eye-tracking images of a baby looking at a block of text, with the text lit up because viewers followed the baby's gaze. Is that real?
The underlying effect is well established in the lab. Friesen and Kingstone showed in 1998 that a face's gaze triggers reflexive shifts of attention even when the gaze does not predict where a target will appear. We look where other faces look, almost automatically.
The best web-specific evidence is more modest. In a 2014 eye-tracking study in Frontiers in Psychology, Sajjacholapunt and Ball had 72 participants browse web pages with banner ads that showed either no face, a face looking at the viewer or a face looking toward the ad's product and text. Averted gaze increased attention to the ad's text and product, and improved memory for the brand and message. A face looking straight at the viewer held attention on the face itself, which weakened those benefits.
So the useful lesson is not “add a face”. It is: a face is a strong attention magnet, and its gaze decides where that attention goes next. A person staring out of the screen will compete with your headline. A person looking toward the headline or the button can lead the eye there. Our related article on banner blindness covers how faces can also steal attention from the task.
What to do with this: if your hero has a person in it, use a real one (you, your team, your client with permission) and choose a photo where they look toward the text or are absorbed in the work, not grinning into the lens. Never use a face that does not belong to your business; see the chapter on photos that do not look like stock.
Kofi's hero, before and after
Here is Kofi's hero rebuilt with the six parts. Both versions are fictional mock-ups. Use the squint button to blur them and see which elements survive.
Physiotherapy for back, neck and sports injuries in Headingley, Leeds
45-minute appointments with a chartered physiotherapist. Evening slots Monday to Thursday.
Book an assessmentSee prices£55 per session · HCPC registered
Fictional clinic and copy. The price and registration line are examples of checkable evidence, not real data. Without JavaScript, try the squint test by stepping back from your screen.
Blurred, the “before” hero is a grey field with a white smudge; nothing tells you it is a physiotherapy clinic. The “after” hero keeps a dark headline block, a dark button and a picture. The words are gone, but the ranking is still readable: read this, then press that.
Notice what moved. The welcome disappeared, because no visitor needs welcoming. The opening hours and car park went into a “Find us” section. Pilates went to its own section below. The thing Kofi was proudest of, quick appointments, could become the supporting line, if he can back it up.
Accessible by law
Two hero decisions are also legal decisions in much of Europe: whether things move on their own, and whether images have text alternatives.
The criterion applies to moving, blinking or scrolling content that starts automatically, lasts more than five seconds and is shown alongside other content, and to auto-updating content. Users must have a mechanism to pause, stop or hide it, unless the movement is essential. An auto-rotating carousel or an endlessly scrolling logo strip falls squarely under it. The W3C's carousel tutorial recommends a visible pause button and pausing whenever the pointer hovers over the carousel or it receives keyboard focus.
Source: W3C, WCAG 2.2 (Recommendation, updated 12 December 2024); W3C WAI carousel tutorial. Not legal advice.
All non-text content presented to the user needs a text alternative that serves the equivalent purpose, with exceptions. Pure decoration must be implemented so assistive technology can ignore it, usually with an empty alt="". For a hero, that means: if the photo shows your clinic, product or team, describe what it shows; if it is a background texture, mark it decorative. Text baked into an image is the worst of both worlds.
Source: W3C, WCAG 2.2. Not legal advice.
Member States had to apply it from 28 June 2025. It covers certain products and services, including e-commerce: services provided at a distance through websites and apps with a view to concluding a consumer contract, plus banking, transport and others. Annex I requires their websites and apps to be “perceivable, operable, understandable and robust” and to offer non-text content with an alternative presentation. In practice, conformity is assessed against EN 301 549, the European ICT accessibility standard, which W3C notes includes WCAG 2.1 Level AA verbatim for web content. Both criteria above are Level A, so they are part of it. Microenterprises providing services (fewer than 10 staff and annual turnover or balance sheet of no more than €2 million) are exempt from the service accessibility requirements, though national rules may go further.
Sources: Directive (EU) 2019/882, Arts. 2, 3(23), 4(5) and Annex I (EUR-Lex); W3C WAI, EU policy summary. General information, not legal advice; enforcement and penalties are set nationally, so check your own country.
Even if you are exempt, the reasons behind these rules are conversion reasons. A visitor who cannot stop a carousel cannot read it. A hero image without useful alt text is invisible to screen-reader users and to anyone on a slow connection when it fails to load. The chapter on accessibility as conversion takes this further, and motion with purpose covers when movement helps.
What to do with this: remove auto-rotation, or add a visible pause button that also triggers on hover and focus. Check the alt text of every hero image: meaningful images described in one plain sentence, decorative ones with empty alt.
What to change tomorrow
Screenshot your hero on a phone
Look only at the top half of that screenshot. Can a stranger tell what you offer, where or for whom, and what to do next? If not, that is the first fix.
Number the parts
Label identity, navigation, headline, supporting line, primary action, evidence and visual. Remove anything unnumbered. Add what is missing, starting with the supporting line, which is usually the gap.
Stop the carousel
Choose the one message most visitors came for and make it static. Move the other slides into sections below in a fixed order. If a slider must stay, give it a pause control.
Make one button win
One dark, specific primary action; one quiet text link for the not-yet-ready. Name the action (“Book an assessment”), not the mechanism (“Submit”, “Learn more”).
Run the squint test
Blur the screen or step back. The headline and button should survive. If something decorative wins, shrink it or cut it.
Use a real image, with real alt text
Show the actual product, place or person, ideally looking toward the text. Describe it in the alt attribute, or mark it decorative if it carries no information.
Then check the words
The structure only works if the headline and supporting line are specific. The next chapter, copy that converts, is about exactly that, and the three-second test shows how to check what visitors actually take away.
What the research supports
Strong: attention is concentrated in the first screenful and its top half (NN/g eye-tracking, 2010 and 2018, desktop); people scan rather than read, and the pattern depends on formatting and motivation; gaze direction shifts attention in the lab. Moderate: averted gaze in web banners improved attention and memory for the ad's message (one study, 72 participants); carousels attract few clicks, mostly on the first slide (field data from one university). Directional only: the Hick–Hyman law and the serial position effect come from laboratory tasks with learned stimuli and word lists, and should guide habits, not predict numbers. None of these sources measured sales from a hero redesign.
Sources
- Fessenden (2018). Scrolling and Attention. Nielsen Norman Group, 15 April 2018. Method (120 participants, 130,000+ fixations, 1920 × 1080) and all percentages in Figure 1.
- Pernice (2017). F-Shaped Pattern of Reading on the Web: Misunderstood, But Still Relevant (Even on Mobile). Nielsen Norman Group, 12 November 2017. Conditions for the F-pattern and the alternative scanning patterns.
- Moran (2020). How People Read Online: New and Old Findings. Nielsen Norman Group, 5 April 2020.
- Wang (2024). Homepage Design: 5 Fundamental Principles. Nielsen Norman Group, 15 March 2024. Guidance on taglines and decorative imagery.
- Gordon (2021). Visual Hierarchy in UX: Definition. Nielsen Norman Group, 17 January 2021.
- Hick (1952). On the rate of gain of information. Quarterly Journal of Experimental Psychology, 4(1), 11–26. Abstract consulted.
- Hyman (1953). Stimulus information as a determinant of reaction time. Journal of Experimental Psychology, 45(3), 188–196. Bibliographic record consulted.
- Murdock (1962). The serial position effect of free recall. Journal of Experimental Psychology, 64(5), 482–488. Bibliographic record consulted.
- Runyon (2013). Carousel Interaction Stats. Personal blog, January 2013. Click counts and shares for nd.edu and other Notre Dame sites.
- Nielsen (2013). Auto-Forwarding Carousels and Accordions Annoy Users and Reduce Visibility. Nielsen Norman Group, 19 January 2013.
- Friesen & Kingstone (1998). The eyes have it! Reflexive orienting is triggered by nonpredictive gaze. Psychonomic Bulletin & Review, 5(3), 490–495. Bibliographic record consulted.
- Sajjacholapunt & Ball (2014). The influence of banner advertisements on attention and memory: human faces with averted gaze can enhance advertising effectiveness. Frontiers in Psychology, 5, 166. Full open-access article consulted for sample and results.
- W3C (2023, updated 2024). Web Content Accessibility Guidelines (WCAG) 2.2. Success Criteria 1.1.1 and 2.2.2.
- W3C Web Accessibility Initiative. Carousels tutorial: Animations. Pause button and pause-on-hover/focus guidance.
- Directive (EU) 2019/882 (European Accessibility Act). Official text, Articles 2, 3, 4 and Annex I. EUR-Lex.
- W3C Web Accessibility Initiative. Web Accessibility Laws & Policies: European Union. Summary of EN 301 549 and its inclusion of WCAG 2.1 Level AA.
Sources checked 18 October 2026. Eye-tracking percentages come from desktop studies; check your own analytics for mobile scroll depth. Figures 1 and 4 redraw published numbers; Figures 2 and 3 and the hero mock-ups are original, fictional illustrations. Kofi and Northside Physio are invented.