La secció hero és el primer que veu algú en entrar al teu web: el bloc superior amb titular, subtítol, imatge i botó d'acció. Tens entre 3 i 5 segons per explicar què fas, per a qui ho fas i per què s'haurien de quedar. Si aquest missatge és genèric o confús, el visitant marxa abans de veure els teus serveis, casos d'èxit o formulari de contacte.
Si ja has treballat el menú de navegació, els CTA i una pàgina d'inici que converteix, el hero és el punt de partida: concentra la teva proposta de valor en una sola ullada.
Què és la secció hero i per què decideix la teva conversió
El hero (també anomenat above the fold) és la zona visible sense fer scroll a la pantalla inicial. En webs d'empresa sol incloure:
- Titular (H1): el benefici principal en llenguatge clar.
- Subtítol: amplia la promesa i redueix la primera objecció.
- CTA principal: una acció concreta (demanar pressupost, reservar trucada, veure serveis).
- Imatge o vídeo: mostra el resultat, l'equip o el producte en context.
- Prova social breu: logos de clients, valoració o xifra rellevant.
En estudis de comportament web, més del 80 % de l'atenció inicial es concentra en aquesta zona. No és decoració: és la teva carta de presentació comercial.
Anatomia d'un hero que converteix
| Element | Funció | Bona pràctica |
|---|---|---|
| Titular | Comunicar el benefici principal | 8-12 paraules, sense jerga interna |
| Subtítol | Contextualitzar i generar confiança | 1-2 frases amb audiència i resultat |
| CTA principal | Guiar la següent acció | Verb + benefici («Demanar pressupost gratuït») |
| Imatge | Humanitzar i demostrar | Fotografia real, no stock genèric |
| Prova social | Reduir el risc percebut | Logos, ressenyes o xifra verificable |
La regla d'or: un missatge, un CTA principal. Si demanes al visitant que truqui, escrigui i descarregui un PDF alhora, no farà cap de les tres coses.
Errors habituals en webs d'empresa
- Titular corporatiu buit: «Benvinguts al nostre web» no diu res sobre el problema que resols.
- Carrusel de missatges rotatius: ningú espera a llegir la tercera diapositiva; dilueix el missatge.
- Imatge decorativa sense context: un paisatge bonic no ven serveis de consultoria.
- CTA genèric: «Més informació» o «Enviar» no comuniquen què obté l'usuari.
- Hero massa alt en mòbil: si el botó queda fora de pantalla, perds conversions.
- Text sobre imatge il·legible: contrast insuficient entre fons i titular.
Com escriure un titular que retingui el visitant
Fes servir la fórmula resultat + audiència + diferenciador quan sigui possible. Exemples adaptables:
- «Webs a mida per a pimes que necessiten captar clients des del primer mes»
- «Reformes integrals a Barcelona amb pressupost tancat i terminis garantits»
- «Assessoria fiscal per a autònoms que volen deixar de perdre hores amb papers»
Si el copywriting del teu web ja defineix el to de marca, el hero ha de ser la seva versió més condensada: mateixa veu, màxima claredat.
Disseny i jerarquia visual
L'ull recorre la pàgina en patró F o Z. Col·loca el titular on comença la lectura (a dalt a l'esquerra en escriptori), el CTA al punt final del recorregut i la imatge com a suport, no com a distracció.
- Contrast: ràtio mínim 4,5:1 entre text i fons (WCAG AA).
- Mida del titular: entre 32 i 48 px en escriptori; llegible sense zoom en mòbil.
- Espai en blanc: deixa respirar el missatge; un hero saturat aclapara.
- Coherència amb la resta del web: colors i tipografia alineats amb la teva identitat de marca.
Hero en mòbil: prioritat absoluta
Més del 60 % del trànsit de webs d'empresa arriba des del telèfon. En mòbil, el hero ha de mostrar titular, subtítol i CTA sense scroll. Comprova en dispositius reals, no només a l'inspector del navegador.
- Redueix el text del subtítol a una frase.
- Fes servir un botó d'amplada completa o gairebé completa.
- Evita vídeos de fons que consumeixin dades i alenteixin la càrrega.
- Comprova que el menú hamburguesa no tapï el titular.
Com mesurar si el teu hero funciona
Configura aquests indicadors a la teva eina d'analítica:
- Taxa de rebot de la home: si supera el 60 %, revisa el missatge del hero.
- Clics al CTA principal: compara'ls amb les visites a la pàgina.
- Scroll depth: si ningú baixa del 25 %, el hero no enganxa.
- Mapes de calor: eines com Hotjar o Clarity mostren on fa clic la gent.
Fes proves A/B amb un sol canvi cada vegada: titular, color del botó o imatge. Així sabràs què millora la conversió de debò.
Checklist abans de publicar el teu nou hero
- El titular comunica un benefici concret en menys de 5 segons?
- Hi ha un sol CTA principal visible sense scroll en mòbil?
- La imatge reforça el missatge i no és stock genèric?
- El contrast de text compleix accessibilitat?
- El hero carrega en menys de 2,5 segons (LCP)?
- Inclou prova social breu (logos, xifra o testimoni)?
Conclusió
La secció hero no és un banner decoratiu: és l'argument comercial més important del teu web. Un missatge clar, un CTA específic i una imatge que demostri resultat poden marcar la diferència entre un visitant que marxa i un que demana pressupost.
Si vols revisar el hero del teu web amb criteris de conversió, UX i rendiment, a aatsoft analitzem la pàgina d'inici i proposem millores concretes adaptades al teu sector.
