El hero de una web: cómo diseñar los primeros cinco segundos

Hay una prueba que me gusta hacer con los clientes al principio de un rediseño. Abro su web en el móvil, se la enseño a alguien del equipo que no la conoce, cuento hasta cinco y bloqueo la pantalla. Luego le pregunto: «¿Qué hace esta empresa? ¿Para quién? ¿Qué harías ahora?». Muchas veces la respuesta a la primera pregunta es un encogimiento de hombros, y a la tercera, «buscar el menú».

Esos cinco segundos son el hero, la primera pantalla de una página. Es el espacio más visto de toda la web y también el más disputado: todo el mundo quiere salir ahí, el logo grande, la foto del equipo, el eslogan, la oferta del mes, las tres especialidades. El resultado suele ser una pantalla que lo dice todo a la vez y, por eso mismo, no termina de decir nada.

Diseñar un buen hero es, sobre todo, un ejercicio de elección. Esta guía te ayuda a hacerlo con criterio: qué contar, cómo componerlo, cómo adaptarlo al móvil y cómo conseguir que cargue sin esperas.

01Por qué la primera pantalla pesa tanto

Las primeras impresiones en una web se forman muy rápido. Un estudio de Gitte Lindgaard y su equipo, publicado en 2006 en Behaviour & Information Technology, mostró que las personas se forman un juicio sobre el atractivo visual de una página en unos 50 milisegundos, y que ese juicio coincide en gran medida con el que hacen después de mirarla con calma. Esa primera impresión tiñe lo que viene después: si la web parece cuidada, tendemos a confiar más en lo que dice.

La atención también se concentra arriba. Nielsen Norman Group, en sus estudios de seguimiento ocular sobre scroll y atención, encontró que algo más de la mitad del tiempo de visualización se dedica a la primera pantalla, y que la gran mayoría se concentra en las dos primeras. La gente sí hace scroll, y mucho, pero decide si merece la pena hacerlo en función de lo que ve primero.

Clave: el hero no tiene que contarlo todo. Tiene que conseguir que la persona quiera ver lo siguiente.

02Qué tiene que contar un hero: tres respuestas

Un hero cumple su función cuando responde, de un vistazo, a tres preguntas:

1. 01¿Qué es esto? Qué haces o qué ofreces, en palabras que entienda tu cliente.
2. 02¿Es para mí? Para quién es, o qué problema resuelve, de forma que la persona correcta se reconozca.
3. 03¿Qué hago ahora? Una acción clara y visible.

La primera y la segunda las resuelve la propuesta de valor, que es la frase más importante de toda la web y merece su propio trabajo; lo detallamos en cómo escribir tu propuesta de valor. La tercera la resuelve la llamada a la acción.

La anatomía de un hero completo

No todos los heros necesitan todos los elementos. Un hotel boutique puede vivir con una fotografía extraordinaria, un titular de cuatro palabras y un botón de reservar. Una asesoría fiscal necesitará probablemente un subtítulo más explicativo y una señal de confianza.

03Tipos de hero y cuándo encaja cada uno

No hay un formato mejor que otro; hay formatos que encajan con cada tipo de negocio y de mensaje.

• →Hero tipográfico. Titular grande, mucho aire y poca o ninguna imagen. Muy eficaz en estudios, consultoras y despachos, donde lo que se vende es criterio. Exige un titular excelente y una tipografía con carácter.
• →Hero con imagen a sangre. Fotografía de borde a borde con el texto superpuesto. Ideal en hoteles, restaurantes, inmobiliaria y moda. Exige una foto con una zona tranquila para el texto y control del contraste.
• →Hero dividido. Texto a un lado e imagen al otro, normalmente 50/50 o 60/40. Es el más versátil y el que mejor se adapta al móvil, porque se apila de forma natural.
• →Hero de producto. Muestra el producto o la interfaz (una app en un móvil, un software en un portátil). Muy útil cuando el producto se explica mejor viéndolo.
• →Hero con vídeo. Un bucle corto, sin sonido, que transmite atmósfera o muestra un proceso. Muy evocador si se hace bien y si se cuida su peso.
• →Hero con buscador. El protagonista es un campo de búsqueda o reserva: portales inmobiliarios, alojamientos, directorios. Aquí la acción es la propia interfaz.

04Componer el hero en móvil: la pantalla que más se ve

En la mayoría de webs que analizamos, más de la mitad de las visitas llegan desde el móvil, así que el hero se diseña primero para una pantalla de unos 390 × 700 px útiles. Estas pautas nos funcionan bien:

1. 01El titular cabe en tres o cuatro líneas, con un tamaño entre 32 y 40 px. Si necesita seis, el titular es demasiado largo o la letra demasiado grande.
2. 02El botón principal aparece en la primera pantalla, sin hacer scroll, con un área táctil de al menos 44 × 44 px (la recomendación de Apple; WCAG 2.2 fija un mínimo de 24 × 24 px) y, idealmente, a lo ancho de la columna.
3. 03La imagen se replantea, no se encoge. Una foto horizontal recortada en vertical puede perder el sujeto; prepara un encuadre específico para móvil con la etiqueta picture.
4. 04El texto sale de la foto si hace falta. En móvil suele funcionar mejor la imagen arriba, más baja, y el texto debajo sobre fondo neutro.
5. 05Algo de la siguiente sección asoma. Un hero que ocupa exactamente el 100 % de la altura da la impresión de que no hay más. Con un 80–90 % de alto, el borde de lo siguiente invita a seguir.

05La llamada a la acción del hero

El botón del hero es el punto al que conduce todo lo demás, así que merece atención propia:

• →Un verbo y un objeto concretos: «Reservar mesa», «Pedir presupuesto», «Ver propiedades». Expresiones como «Saber más» o «Descubrir» dicen poco de lo que pasará al pulsar.
• →Una acción principal clara. Si hay una segunda, que sea visualmente más ligera (un botón con borde o un enlace), para que la jerarquía no dude.
• →Contraste y aire. El botón principal debería ser el elemento de color de acción más visible de la pantalla, con espacio a su alrededor. Lo explicamos con más detalle en jerarquía visual en diseño web.
• →Una frase de tranquilidad cerca: «Respuesta en 24 horas», «Sin compromiso», «Cancelación gratuita». Reduce la duda justo donde aparece.

06Rendimiento: un hero que aparece al instante

El hero suele contener el elemento más grande de la primera pantalla, y por tanto el que Google usa para medir el LCP (Largest Contentful Paint, el tiempo que tarda en mostrarse el contenido principal). El objetivo es que sea de 2,5 segundos o menos. Lo que más ayuda:

• →Imágenes en AVIF o WebP, con varios tamaños mediante srcset y sizes, para que el móvil descargue la versión que necesita. En formatos de imagen para web tienes los detalles.
• →Prioridad alta para la imagen del hero con fetchpriority="high", y sin carga diferida: el loading="lazy" es para lo que está más abajo.
• →El texto visible desde el principio. Las animaciones de entrada que parten de opacidad cero retrasan el momento en que el titular cuenta como pintado. Si quieres movimiento, que sea sutil y sobre un texto que ya está visible.
• →Vídeo con póster. Una imagen ligera se muestra de inmediato mientras el vídeo carga. Y si la persona tiene activada la preferencia de reducir movimiento, se queda con la imagen.

<section class="hero">
  <div class="hero__texto">
    <p class="hero__antetitulo">Villas y apartamentos en Marbella y Estepona</p>
    <h1>Encuentra tu casa junto al mar sin perder un fin de semana en visitas</h1>
    <p class="hero__subtitulo">Preseleccionamos por vídeo y organizamos las visitas en un solo día.</p>
    <a class="boton" href="/propiedades">Ver propiedades</a>
  </div>
  <picture>
    <source media="(max-width: 599px)" srcset="/img/hero-movil.avif" type="image/avif">
    <source srcset="/img/hero-1600.avif 1600w, /img/hero-1000.avif 1000w" sizes="(min-width: 1024px) 50vw, 100vw" type="image/avif">
    <img src="/img/hero-1000.jpg" alt="Terraza con vistas al mar en una villa de Estepona" width="1600" height="1067" fetchpriority="high">
  </picture>
</section>

Los atributos width y height reservan el espacio de la imagen antes de que cargue y evitan saltos de diseño, que es lo que mide el CLS.

07Cómo validar tu hero antes y después de publicar

Antes de publicar, la prueba de cinco segundos es imbatible por lo sencilla. Enseña la primera pantalla durante cinco segundos a cinco personas que se parezcan a tu cliente y hazles las tres preguntas. Si al menos cuatro aciertan qué haces y para quién, vas por buen camino. Plataformas como Lyssna permiten hacerlo en remoto con participantes reclutados, pero con compañeros de otros departamentos o amigos que encajen con el perfil ya se aprende muchísimo.

Después de publicar, la analítica te da las pistas. Mira qué porcentaje de visitas llega a la segunda sección (un evento de scroll al 25 % sirve), cuántas pulsan el botón principal y cuántas abandonan sin interactuar. Si la mayoría se va sin bajar, el hero no está invitando a seguir; si bajan pero nadie pulsa, quizá la acción no es la adecuada para ese momento. Con esos datos, un cambio de titular o de acción puede probarse en pocas semanas.

08La pantalla que abre la conversación

El hero es la primera frase de una conversación con alguien que no te conoce. Cuando está bien resuelto, la persona entiende dónde ha llegado, se reconoce en lo que lee y sabe qué hacer. A partir de ahí, el resto de la página puede hacer su trabajo; cómo ordenarlo lo contamos en estructura de una home que funciona.

En los proyectos de diseño web y experiencia digital de SIMA, el hero es siempre una de las primeras piezas que trabajamos, con texto real y probándolo en móvil desde el boceto. Si sientes que la primera pantalla de tu web no está contando lo que debería, escríbenos y lo pensamos contigo.