The first screen always lies: anatomy of the hero section that leaves no room for escape

Monday morning, October 2025. Outside the window of Insight ADV's office on City Road in Shoreditch, London air carries that familiar smell of wet brick, burnt coffee drifting from the vans on the corner, and exhaust fumes from the red buses hissing to a stop on the slick tarmac. The light comes through grey, cold, sharp — cutting across my 27-inch monitor. On screen: the new website of a client from Campania, a handmade ceramics producer with a workshop perched up in Santa Maria Capua Vetere. In my left hand, I'm holding my smartphone, looking at the exact same page.

On the desktop monitor, the scene is a classic of Italian craft web design: a hero section dominated by a heavy automatic slider — solid as a boulder — cycling through five images in rapid succession. There's a centred headline written in an elegant but wafer-thin italic, a decorative serif at a tiny 18 pixels, floating over an off-white background. Below it, an immortal line set in pompous type: "Con passione e tradizione dal 1978." No button, no call to action, nothing visible without reaching for the scroll wheel. I glance at the phone. It's even worse there. The first two slider images have stalled thanks to the patchy connection on the train I caught half an hour ago, leaving a blank grey rectangle, while the text has turned into an illegible mush, brutally overlapping with the third image that's decided to load itself halfway.

Berto, the workshop owner, signed a cheque for €3,200 for that job. The web designer who built it is no charlatan — quite the opposite: he's a serious professional, the sort who spends his nights cleaning up lines of code until they're immaculate. I know him, I've watched him work and I know how much he cares. And yet, looking at that screen, I felt a knot in my stomach almost immediately. There was something structurally broken about that page — an invisible but lethal barrier between Berto's exceptional product and the user landing on the site. It took me exactly four minutes by the clock to isolate the problem.

The breaking point is here, and it's a truth many in my industry tend to hide behind colourful slide decks and smoky presentations. The hero section is not the decorative cover of your company catalogue. It's not the space to celebrate your founding year or show off a nice graphic animation. The hero section is digital marketing's most merciless filter: the precise moment when the visitor decides whether to trust you or close the browser tab and never come back. And that decision is made in the blink of an eye — in less time than it takes to finish reading this sentence.

What the hero section actually is (and why the name is already misleading)

When I hear "hero section" discussed in strategy meetings, I often feel a certain irritation at how the term gets romanticised. The word "hero" conjures images of rescue and visual extraordinariness. In reality, behind this grand-sounding name lies one of the most rigidly geometric and mathematical areas in the entire architecture of a website.

The technical definition

From an engineering standpoint, the hero section is the visual area that occupies the upper portion of the homepage — or any landing page — and presents itself to the user before any scrolling takes place. This concept isn't a Silicon Valley invention; it's a direct inheritance from American editorial typography of the 1950s. In the old newspapers, the hero image was the dominant photograph placed above the fold of a daily paper — the one designed to stop a passer-by at the newsstand before they even turned the page.

In the context of modern web design, this zone coincides with the concept of above the fold — a term that retains its historical meaning from print intact. On a standard desktop screen, the above-the-fold area occupies on average between 600 and 900 pixels in height, depending on the resolution and viewport scaling of the browser.

When we move to mobile devices, the picture changes dramatically — and this is where most projects fall apart. With over 60% of web traffic passing through smartphones, this visual window shrinks drastically. On an iPhone 14 (native viewport: 390×844px), the effective usable space for the hero reduces to around 500–650 vertical pixels: Safari eats between 50 and 80 pixels for the address bar and navigation controls. The hero section can be bounded by a hard edge (colour change, geometric line) or blend seamlessly into the top navigation bar.

Above the fold: the figure that changes everything

The Nielsen Norman Group has been documenting a human behaviour for over thirty years that has remained largely unchanged despite technological evolution: users devote the vast majority of their time and cognitive energy to content positioned above the fold. Heat-mapping analyses conducted across thousands of sites using tools like Hotjar and Microsoft Clarity reveal a pitiless pattern: visual attention doesn't distribute itself evenly down the page. It behaves like a waterfall smashing against a rock — highly concentrated on the hero section, then dropping sharply as the page scrolls downward.

Attention cannot be bought or negotiated: it's captured in the first few seconds or lost for good. If the hero section doesn't immediately give a compelling reason to stay, the user applies the path of least resistance: they close the page. It doesn't matter if the copy halfway down is a masterpiece of copywriting or describes the most competitive commercial offer on the market — if the hero section doesn't pass the test of immediate relevance, that copy will never be read.

The three seconds that decide everything: the neuroscience of first impressions

When a user lands on a website, an ancient scanning mechanism fires in the brain — the same one that allowed our ancestors to work out in a fraction of a second whether a bush was hiding prey or a predator. In the digital jungle, the predator is cognitive friction: the frustration of not knowing where you are.

How the brain processes a homepage

The human brain doesn't read a web page sequentially the way it would a novel. It performs a rapid, fragmented visual scan. Eye-tracking studies conducted by Jakob Nielsen from 2006 onwards documented the existence of predictable reading patterns. The most famous is the F-pattern: the eyes move horizontally across the top of the screen, make a second, shorter horizontal movement slightly lower down, then finish with a vertical scan along the left margin.

There is, however, an important clarification that the NNGroup added in later years: the F-pattern is not a fixed cognitive behaviour of human beings. It's a symptom of bad design. On pages with a clear visual hierarchy, images anchored to compositional logic, and strong headlines, users don't follow it. They adopt it as a survival strategy when the page is disorganised. If your site is generating F-pattern reading, the problem isn't your visitor's brain — it's your hero section.

For contemporary hero sections, with strong visual impact and text stripped back to the essentials, the more relevant model is the Z-pattern: the gaze traces a line from left to right at the top, drops diagonally towards the lower left corner, then moves back to the right. This is the movement that catches the logo top-left, the headline centre-right, and the CTA at the bottom.

What's the actual time window we have? The answer comes from a study by researcher Gitte Lindgaard of Carleton University, published in Behaviour & Information Technology: the human brain takes just 50 milliseconds — one twentieth of a second — to form a definitive aesthetic judgement about a web page. In that microsecond, the user hasn't read a single word of your value proposition. They've processed a visceral visual impression that instantly translates into trust or rejection.

If that reaction is negative, the bounce rate spikes uncontrollably. The user returns to Google's SERP. This behaviour has a technical name: pogo-sticking. For search engines, if a user clicks a link and bounces back within seconds, it signals that the site didn't answer their query. Google doesn't evaluate the beauty of your code: it measures the time people spend on the page — and that time is decided in the first 50 milliseconds.

The anecdote: Berto and Bobby compared

To step out of the university lab and understand how this theory translates into actual revenue, you only need to compare two stories I've followed directly, one in Italy and one in the UK.

On one side there's Berto, with his ceramics from Santa Maria Capua Vetere. Site rebuilt in June 2020: an investment of €3,200 for an art-catalogue hero section — a slider with five images rotating every four seconds, centred headline in calligraphic italic: "Tradizione e passione dal 1978 nella ceramica campana." On mobile, the image crops the main subject and the text overlaps with the white reflections in the background. No button visible without scrolling.

On the other side is Bobby, a craft brewery in Salford, Greater Manchester. He rebuilt his site three months before Berto, spending £2,800. His hero doesn't move. A single static image, crisp and sharp: a glass of amber beer shot contre-jour, bubbles rising through the damp glass, pub background softly out of focus. Headline in Neue Haas Grotesk Bold: "Brewed in Salford since 2019." A no-nonsense subheading: "Order online. Collect from the taproom. Free delivery over £30." Two buttons side by side: "Shop Now" (primary, dark, filled) and "Find Us" (secondary, outline).

Three months after launch, the verdict was in. Bobby saw online orders double, with his immediate abandonment rate falling to 22%. Berto, in his studio in Caserta, is still complaining that the internet doesn't work for his sector. When I asked how many visitors he'd had in the past month, he looked at me with wide eyes: he hadn't installed Google Analytics because nobody had explained it to him.

The difference doesn't lie in product quality — Berto's ceramics are one-of-a-kind works of art. It lies in the hero section's ability to answer the customer's mind in under three seconds.

Technical anatomy: the components of the hero section and what each one does

Let's dissect this visual block as if we were at a surgeon's table — or in the workshop of a mechanic from Gragnano taking apart an engine to find where it's leaking oil. Every millimetre of the hero section serves a precise function and must be calibrated with industrial rigour.

1. The headline: the sentence that does the heavy lifting on its own

The headline is the primary text of the hero section: the largest piece of copy, the one with the thankless job of doing the hard work when you're not there to explain your business in person. It must communicate exactly what you offer, within tight constraints: no more than 10 words, ideally 5–7.

To write a headline that converts, there are three distinct levels of focus:

• Value proposition — Explains the utility of the service. Nest's approach: "We make your home safer." Simple, direct, no ambiguity.
• Audience-specific — Identifies who the product is for. Linear's approach: "Project management software for teams that move fast." If you run an agile team, you know you're in the right place.
• Outcome-focused — Shows the end benefit. The formula "More customers. Less effort" hits a primary psychological lever and works precisely because of it.

Excellent examples:

Stripe nails it with B2B precision: "Financial infrastructure to grow your revenue." They don't say "we're a secure payment platform" — they connect the infrastructure directly to the customer's revenue growth.

Notion responds with three action verbs: "Write, plan, share. With AI at your side." Technological positioning in six words.

Monzo (UK) built its early success on a declaration of independence: "Banking that puts you in control." A clear position against the old City institutions, readable in 50 milliseconds.

Failing examples:

The websites of Italian SMEs are a graveyard of empty headlines. Go to almost any professional firm in Campania and you'll find the same formula: "La nostra azienda è il partner ideale per le tue esigenze." A sentence that contains not a single atom of real information. Another recurring trap is the company name as the primary headline: "Berto Ceramiche Artigianali S.r.l." centred on the screen. The visitor already knows where they've landed — repeating the name adds no value.

The WeWork case in 2019 — before the well-documented financial collapse — entered UX literature as an example of a headline too focused on the brand and too little on the user: "Do what you love." It communicated an emotion without explaining in the slightest what the company offered someone looking for a rented office or a co-working desk. Aspirational in intent, useless in function.

Quick test: cover the entire page with your finger, leaving only the headline visible. Can someone who doesn't know you work out what this site is selling? If they hesitate or get it wrong, start again.

2. The subheadline: the context that closes the loop

The subheadline has one job: to pick up where the headline left off and add the concrete detail that didn't fit in the main sentence. It must specify who it's for, where, how, or what the differentiator is. Two lines maximum on desktop, three on mobile. Beyond that threshold, it's no longer a subheadline — it's a block of text weighing down the interface.

The relationship between headline and subheadline must be hierarchical and complementary, never repetitive. If the headline says "Handmade Campanian ceramics," the subheadline doesn't say "We've been making handmade ceramics in Campania since 1978" — that's needless duplication. The right subheadline pushes on uniqueness and logistics: "Every piece is hand-thrown and hand-painted in our workshop in Santa Maria Capua Vetere. Insured shipping across Europe."

The most common mistake among local businesses is turning the subheadline into a strapline: "Quality, passion and professionalism at your service." An empty shell. Zero verifiable data, zero differentiation, zero value for the visitor.

3. The CTA (Call to Action): the button that decides the fate of the page

The CTA is the fault line on which the effectiveness of the entire operation is measured. The headline convinces, the subheadline clarifies, the CTA closes the cognitive transaction. Its technical anatomy rests on rigid rules:

The copy matters enormously. Phrases like "Find out more" or "Click here" don't describe what will happen a millisecond after the click. Users have a natural wariness of the digital unknown. "Request a free quote", "Browse the collection", "Book the strategy call" eliminate anxiety because they spell out the destination. When I suggested Berto write "Browse the unique pieces available," he looked at me as if I'd said something blindingly obvious. "But it's obvious, isn't it?" Exactly. It's obvious. Write it.

If the strategy calls for two CTAs (commercial action + further reading), the visual hierarchy must be asymmetric: the primary is a solid block of saturated colour, the secondary is a ghost button outline. Never two buttons of equal visual weight — parity generates decision paralysis.

Airbnb has taken this principle to the limit: it integrates a complex microinteraction directly above the fold, with search fields ("Where", "When", "Who") as the dominant element. The design is built around the user's intent, silencing the brand's ego. You'll find a dedicated deep-dive on microinteractions that build trust on the blog.

Mailchimp has modified its primary CTA dozens of times over the years. The documented journey from "Sign Up Free" to "Get Started" to "Start Free Trial" shows how even the smallest variation in copy influences conversion rates at global traffic volumes.

At the other extreme: buttons in light grey on a slightly darker grey background, with a chromatic contrast ratio of 1.8:1 — less than half the WCAG 2.1 minimum (4.5:1 for normal text). This isn't an aesthetic matter: it's a functional defect that renders the interface inaccessible and, in the UK market, carries concrete legal implications under the Equality Act 2010.

4. The hero image or visual: the photograph that speaks before the text does

The hero visual is the element that occupies the largest share of space and cognitive energy in the first 700 pixels of the page. On desktop it can stretch full-width (100vw) or occupy 50–70% in a split-screen layout. As the heaviest element on the page, its technical handling directly conditions the performance metrics measured by Google — in particular the LCP (Largest Contentful Paint), which calculates the time taken to render the largest graphic element above the fold. Target: under 2.5 seconds on mobile. We covered this in detail in "Il sito bello che Google non perdona".

Technical optimisation of the hero image — four essential steps:

1. Format: convert to WebP or AVIF at 80–85% quality. A native photographic file of 4MB drops below 350KB with no visible loss. Free tool: Squoosh (squoosh.app).
2. loading attribute: the hero image must not have loading="lazy". That parameter is correct for below-the-fold images — applied to the hero, it deliberately delays the rendering of the primary visual, destroying the LCP.
3. fetchpriority="high": signals to the browser that this resource has maximum priority in the fetch process. It must be explicitly included in the hero's <img> tag.
4. Declared dimensions: always define width and height in the image tag to prevent CLS (Cumulative Layout Shift) — the visual jump of the page during loading.

The psychological message of the visual:

Hero sections featuring real, recognisable human faces achieve higher engagement rates than those using product-only images or abstract graphics. The reason is neurological: the human eye is hardwired to seek out others of its kind and follow the direction of their gaze. If the face in the photograph is looking towards the CTA, the visitor's eye will unconsciously follow that trajectory. As we explore in "Vendere con la luce", an authentic photograph of a real space builds trust in a way that's wildly disproportionate to the cost of producing it.

The overuse of generic stock photography produces the opposite effect. Go to the website of a Caserta mechanic's garage or a Naples accountancy firm and you'll find two Anglo-Saxon models shaking hands in a glass-and-steel open-plan office that looks like Manhattan. The user clocks the fiction instantly, at a subconscious level. And the moment they sense it, trust cracks — irreversibly.

The automatic slider: the textbook case of an omnipresent mistake

The automatic carousel slider is the most widely used and most damaging component in Italian SME hero sections. The reasons are structural and well-documented:

1. It hits the LCP — the browser simultaneously downloads five or six heavy images above the fold.
2. The user loses control — content moves without their consent, generating irritation and disorientation.
3. The main message disappears before it's been read — if a headline takes 5 seconds to process and the slide advances every 4, the message hasn't been delivered.
4. Subsequent content is invisible — NNGroup research documents that users rarely interact with slides beyond the first.

The Nielsen Norman Group published a report as early as 2013 — "Carousel Usability: Designing an Effective UI for Websites with Content Overload", verifiable at nngroup.com — advising against automatic sliders as a primary communication tool. On Berto's site, the first slide showed the exterior of the workshop; the second, a hand-painted plate; the third, three craftsmen in the studio; the fourth, a screenshot of a Facebook review; the fifth, a contact form for wedding favours. The average user stayed six seconds, saw the exterior and half the plate, found no action button, and left. Thirteen years after the NNGroup report, the problem is still there.

5. Navigation in the hero: when the header works against you

An overloaded header — large logo, eight-item horizontal menu, phone number, social icons — can occupy between 120 and 150 pixels on desktop. On mobile, even in the collapsed hamburger menu version, it takes at least 60–80 pixels. On an 844px viewport (iPhone 14 in portrait), with Safari consuming another 50px and an 80px header, the hero is left with 714 pixels. If the hero height is set as height: 100vh without compensation, the CTA automatically slips below the fold.

Technical solution: use height: calc(100vh - [header height]), or a transparent header with position: absolute overlaid on the hero, which becomes opaque on scroll via a CSS transition.

Every menu item visible in the hero is an alternative to the primary CTA. The more alternatives there are, the more attention is diluted — this is Hick's Law: decision time increases proportionally with the number of available options. For landing pages dedicated to a specific conversion, the optimal choice is to remove navigation entirely. This is the philosophy behind the best digital advertising campaigns: zero distractions, one single objective.

What the big players get right (and what even they get wrong)

To understand how these rules translate into interfaces that move money, we need to look at who systematically invests in user testing — and who has learned the hard way.

Stripe: the hero that redefined B2B

Stripe's homepage has become a north star for web designers worldwide. It doesn't use heavy video or animated GIFs: it relies on dynamic colour gradients generated via CSS and WebGL, with lightning-fast rendering performance. The headline sits left-aligned, followed immediately by a primary CTA ("Start now") and a secondary link ("Contact sales"). The principle at work is progressive disclosure: the hero says the bare minimum needed to convince the visitor to take the first step. Technical details arrive only for those who go looking for them.

Monzo and Starling Bank: the hero as identity statement

In London, the teams at Monzo and Starling Bank built their digital fortunes by moving in the opposite direction to the language of traditional finance. Go to the website of a major high-street bank: you'll find marble buildings, neoclassical columns, suited managers with leather briefcases. Monzo and Starling blew that template apart. Hero sections with real people in everyday situations, smartphone in hand, vivid colours. Monzo's dominant visual is the fluorescent coral debit card slicing diagonally across the screen. The card itself is the visual — it's the most recognisable product, transformed into a geometric element of the layout. The message in the first 50ms: we're a completely different planet from the bureaucratic bank you know.

Figma: the hero that teaches the product

Figma applies the show, don't tell principle with cinematic rigour. Rather than explaining that the software allows real-time collaboration across multiple users, it shows the interface with three or four coloured cursors moving simultaneously on the same file. The user doesn't need to exercise any imaginative effort: they see the product in action milliseconds after the page loads. For any SaaS product where the interface is the primary commercial differentiator, this is the most effective strategy out there.

Slowear (Milan/Venice): the hero as an exercise in restraint

One of the rare Italian examples of excellence in fashion retail. The hero section is built around a single editorial photograph, natural light. The headline is set in a clean, light sans-serif — precisely a Neue Haas Grotesk Light in the most recent version of the site — accompanied by a single CTA directing to the new collection. No discounts, no promotional banners, no jumble of sale items. Slowear has grasped the hardest lesson in web design: the hero section is an exercise in selection and restraint. Choose one message and put all your visual energy behind it.

Three cases that paid the price of getting it wrong

WeWork (2019): the headline "Do what you love" has remained in UX literature as a case study in brand-centrism sacrificing clarity. It communicated an emotion without explaining what the company offered — anyone looking for shared office space in New York couldn't work out in three seconds whether they were in the right place.

Gap (2010) — the rebrand that lasted seven days: Gap changed its logo and homepage visual identity, triggering such violent public backlash that the company was forced to revert to the old design after a week. The case is documented as an example of changing the visual identity of the hero without prior user testing and without any gradual rollout. The hero's visual communicates brand identity — change it without preparing your audience and you risk wiping out years of hard-won recognition overnight.

Berto's site (anonymised real case, 2020): five-image slider, no CTA visible above the fold on mobile, headline with the founding year in a prominent position. Result: bounce rate above 80% on mobile in the first three months. The story is not a criticism of the web designer — it's a criticism of a design culture that evaluates a site on an office monitor and publishes it without ever testing it on a smartphone.

The most common mistakes in Italian SMEs (and Campanian ones in particular)

If data-driven culture and user testing are now established practice in international markets, the digital landscape of Italian SMEs is often something closer to tragicomedy. There's a kind of stubbornness about repeating the same mistakes, as if a secret manual existed for destroying online conversions.

The slider nobody watches

(already analysed in detail in the technical section — Berto's case is the perfect portrait of this plague).

The first slide showed the exterior of the workshop in SMCV; the fifth, a form for wedding favours. No logical thread, no message hierarchy. The business owner can't decide which product is their flagship or who the ideal customer is — and chooses the most convenient escape route: stuffing everything into a rotating sequence.

The headline that celebrates the company instead of solving the customer's problem

"Dal 1952, leader nella produzione di infissi in Campania." A first-time visitor isn't interested in the company's dynastic longevity. Their mind is driven by a functional self-interest: they want to know whether your product solves their specific problem — for instance, insulating their home against the cold without running up a fortune in energy bills. If the headline doesn't answer that urgency within three seconds, celebrating your founding year only makes the business owner feel important in front of their mates at the bar. It doesn't shift the online purchase decision by a single millimetre.

The buried CTA

On many local interfaces, finding the button requires the skills of a detective. I analysed the site of a local manufacturing business where the "Contact us" button was set in light grey on a slightly darker grey background. Contrast ratio: 1.8:1. Less than half the WCAG threshold. That's not aesthetic refinement — it's a functional defect that wipes out quote requests entirely.

The stock photo that screams "that's not us"

Go to the website of a tax consultancy firm in Naples and you'll find two Anglo-Saxon models with brilliant thirty-two-tooth smiles shaking hands in a glass-and-steel open-plan office that looks like Manhattan. The user clocks the fiction instantly, at a subconscious level. The moment they sense that those people don't work at that company, trust cracks — irreversibly. And if a company is dishonest about its visual identity, the visitor quite reasonably assumes it might be dishonest about other things too.

The forgotten mobile

Wednesday, September 2024. A client from Campania sends me a WhatsApp message with a link to their new site, buzzing with excitement: "Umberto, have a look at this, it looks brilliant on my office monitor." I pick up my phone, tap the link. The hero image — which on desktop showed a lovely horizontal panorama — had been cropped vertically down the centre by the responsive system, framing nothing but a blank wall. The text was tiny. The CTA had slipped miles below the mobile fold.

On the 27-inch monitor the site looked gorgeous. On the phone it was unusable. This isn't an isolated case: it's the norm, not the exception. Designing a hero section optimised only for office screens means delivering a broken experience to the absolute majority of potential customers.

The Caserta–London comparison: two markets, two sets of expectations, one hero

Living and working with both feet planted in two realities as different as the province of Caserta and the creative quarters of London forces me into a continuous exercise of cultural translation that directly shapes web design decisions. Markets aren't abstract entities: they're made up of people who carry deeply different cultural backgrounds, purchasing habits, and thresholds of suspicion.

What a visitor from Santa Maria Capua Vetere expects

The Campanian consumer browsing for a local artisan often arrives after a Google Maps search or having spotted the business name shared in territorial Facebook groups — communities like "Ciò che Vedo in Città", highly active in the provinces of Caserta and Naples. The Campanian visitor approaches the screen carrying two concrete questions and an ancestral wariness of anything that presents itself as too polished: "Do they actually do this kind of bespoke work? Do they deliver locally?"

If the hero section presents itself with an excessively clinical design, devoid of explicit geographical references or dominated by 3D renderings, the user stiffens. A defensive mechanism kicks in: "This site looks too slick — the prices will be way out of my range."

Explicit localisation becomes a primary conversion factor. Writing in the subheadline "Artigiani a Santa Maria Capua Vetere — spedizioni in tutta Italia" is worth more than any motivational strapline in English. When Berto sees the real photograph of his workshop — clay sacks in the corner, colour-stained wheels, the ceramicist's earth-covered hands shaping clay under natural light from the window — he relaxes. He recognises the truth of the work. He decides that place can be trusted.

What Bobby in Salford expects

Three hours north by plane, among the red brick of Salford or the back streets of Hackney. The British customer visiting Bobby's craft brewery site arrives almost always from an Instagram feed, TikTok, or a word-of-mouth recommendation at a Manchester pub counter. The craft beer market in the UK is saturated and fiercely competitive. The British visitor doesn't need to be convinced of the product's quality — they take it as a given.

What Bobby's customer is looking for in the hero section is the brand's character: the differentiating angle, the identity story that sets that brewery apart from the other hundred on the Tesco shelf. Bobby himself always says it: "People don't buy beer, they buy the story behind the beer."

For a British audience, the hero visual can afford to be more atmospheric, less didactic. The headline can be sharp, oblique. The CTA can be leaner because the visitor already has category context and is used to fast e-commerce transactions via Apple Pay with next-day delivery.

What they have in common: clarity has no accent

It would be a mistake to think these cultural differences justify different usability rules depending on your latitude. Beneath the differing visual expectations, a visitor from Caserta and a creative from Shoreditch share exactly the same neurological make-up when it comes to attention. Both have an absolute intolerance for cognitive friction.

If the hero section forces the user's brain to do extraordinary work to understand what you sell, who you are, and what they should do next, the outcome will be identical in Campania and in London: the visitor leaves. The market changes. The attention threshold doesn't. Clarity is a universal value and it has no regional accent.

For a deeper look at how to build a coherent digital presence across both markets, read "Il tuo sito web non è un biglietto da visita" and "Il sito che non converte: guida UX".

Tools to test and improve your hero section

You don't need an astronomical budget. The web offers free or freemium tools capable of delivering precise data on performance and usability.

For visual testing

Lyssna (formerly UsabilityHub) or Maze let you put the hero in front of panels of real users for the Five Second Test, collecting written responses on message clarity within minutes. Freemium.

Hotjar provides heat maps showing where users look and which buttons they click in the hero. Free plan available for smaller sites.

Microsoft Clarity is entirely free, with no traffic limits: full heat maps and session recordings. You can watch with your own eyes how users' thumbs move across the mobile hero.

For technical testing

PageSpeed Insights (pagespeed.web.dev) analyses LCP and the Core Web Vitals specific to the hero. Covered in depth in "Il sito bello che Google non perdona".

WebAIM Contrast Checker and the Axe DevTools Chrome extension verify compliance with accessibility guidelines.

Responsively App (open-source, free) displays the hero simultaneously across iPhone SE, Samsung Galaxy, iPad, and desktop viewports in a single screen.

For A/B testing

Following the discontinuation of Google Optimize in 2023, the most accessible alternatives for SMEs are VWO (freemium) and the built-in testing systems in Webflow, Shopify, or Unbounce.

One important methodological note: if your site receives fewer than 1,000 unique visitors per week, the results of an A/B test carry no statistical significance. They're background noise, not insight. In low local-traffic contexts, apply the basic usability rules first — testing headlines and colours only makes sense when the numbers can actually support the conclusions.

Conclusion

Monday afternoon, gone half five. The light outside the City Road window has packed up entirely, giving way to the yellow glow of street lamps reflected in the puddles on the Shoreditch tarmac. On my phone, Berto's homepage is still open. The slider has just completed its cycle and started again from the workshop exterior in Santa Maria Capua Vetere.

I dialled his number. He answered with the deep, slightly breathless voice of someone who's spent the day on their feet by the kiln. I told him the site had been built well — the code was clean, the design was pleasant. The problem wasn't the site itself. It was concentrated in the first 700 pixels: a hero section that said nothing useful in three seconds.

Then I asked him one single question: "Berto, pretend I'm a passer-by who knows nothing about you. I walk into your workshop in Santa Maria Capua Vetere, look you in the eye and ask what you do here. What do you tell me?"

He thought for a moment. Then he answered with the clarity of someone who knows the value of their own work: "Umberto, I'd tell you I make artistic ceramics painted entirely by hand, that every piece that leaves this place is unique, that you can order them straight from home over the internet, and that I'll ship them packed in a wooden crate wherever you are in the world, without the risk of them breaking in transit."

"Right then, Berto. That exact sentence. Put it in the hero section, written large, in a sans-serif you can read in the dark on a five-year-old phone screen. A saturated orange button underneath: 'Browse the unique pieces available.' And bin the slider."

The hero section doesn't need to be the most complex work of art of your career. It needs to be your most honest sentence — the one you'd say out loud to a stranger you met in the street. Bobby, in his Salford pub, already knows this. Berto worked it out this afternoon.

If you're considering a site redesign or have questions about the structure of your hero section, get in touch with Insight ADV: we'll do a quick review with no strings attached.