Respuesta breve
Una landing page funciona cuando alguien que la ve por primera vez sabe nombrar la oferta, el público y el siguiente paso en unos segundos. Compruébelo con un test de los cinco segundos: muestre brevemente la primera pantalla, ocúltela y haga preguntas abiertas. Después asegúrese de que el contenido principal aparece pronto (web.dev considera bueno un Largest Contentful Paint de 2,5 segundos o menos) y de que el contraste del texto, el uso con teclado y el tamaño de los botones cumplen lo básico de las WCAG 2.2.
Un desconocido decide en segundos si la página merece un minuto
Un visitante llega a una landing page con una pregunta, desde un anuncio, un resultado de búsqueda o un enlace en un mensaje. Nadie le debe paciencia a la página. En un artículo de 2011 para Nielsen Norman Group, Jakob Nielsen resumió un análisis de Microsoft Research sobre visitas a páginas: los usuarios suelen abandonar una página web al cabo de 10 a 20 segundos, pero las que tienen una propuesta de valor clara retienen la atención mucho más tiempo.
El detalle importa más que la media. Según ese artículo, los primeros 10 segundos son críticos para la decisión de quedarse o irse, y la probabilidad de marcharse sigue siendo alta durante los 20 siguientes. La conclusión de Nielsen: la propuesta de valor debe comunicarse con claridad en 10 segundos.
Por eso una auditoría de landing page útil no empieza por el color, la animación o el gusto. Empieza por tres cosas que un recién llegado debería poder decir casi de inmediato: qué se ofrece, para quién y cuál es el paso siguiente. Las cifras describen la navegación en general, no una regla de cronómetro, pero marcan el orden del trabajo: primero la respuesta, después todo lo que permite verla.
El test de los cinco segundos tal como lo describen los investigadores
La guía de Nielsen Norman Group sobre cómo evaluar el diseño visual define el test de los cinco segundos como una prueba de primera impresión: se muestra un diseño durante cinco segundos para captar la reacción instintiva. Es demasiado poco para leer el texto, dice la guía, pero suficiente para formarse una impresión del estilo visual. Esa misma exposición breve sirve para una pregunta más difícil: si se ha entendido la oferta.
La preparación lleva unos minutos. Haga una captura de la primera pantalla tal como aparece en un teléfono. Busque a unas cuantas personas que se parezcan a sus clientes y que no hayan visto nunca la página, lo que descarta a los compañeros. La guía añade una instrucción: no avise a los participantes de que la imagen desaparecerá a los cinco segundos, porque el aviso los predispone a memorizar detalles.
Muestre la captura, ocúltela y haga preguntas abiertas siempre en el mismo orden. ¿Qué ofrece esta empresa? ¿Para quién es? ¿Qué haría usted a continuación? Anote las respuestas palabra por palabra. La guía desaconseja combinar una exposición tan corta con una lista larga de adjetivos para elegir: al llegar al final de la lista, la gente ya no recuerda gran cosa de lo que vio.
Puntuar las respuestas sin halagar a su propia página
Antes de la primera sesión, escriba en una frase la respuesta que espera oír, por ejemplo «programa de contabilidad para autónomos, se puede probar gratis». Una respuesta es válida cuando la persona nombra la oferta y el público con palabras cercanas a las suyas. No lo es cuando se equivoca de categoría, describe la decoración («algo con un degradado azul») o se refugia en «algún tipo de soluciones».
El patrón de los fallos indica qué hay que cambiar. Quien recuerda la imagen pero no la oferta ha visto un elemento visual que pesa más que el mensaje. Quien repite el titular pero no sabe decir qué hacer después no ha percibido el botón como la acción principal. Si las respuestas varían mucho de una persona a otra, lo habitual es que la primera pantalla diga varias cosas a la vez.
Un test de los cinco segundos mide la claridad de una primera impresión, no la persuasión: no le dirá si el precio es adecuado ni si el formulario funciona. La misma guía describe un método complementario, el test del primer clic, en el que el participante recibe una tarea y se le detiene tras el primer clic. Así se ve si el siguiente paso se puede encontrar.
Lo que debe llevar la primera pantalla y lo que puede esperar
Nadie se desplaza por la página en cinco segundos, así que en realidad se está probando la primera pantalla. Esa pantalla necesita cuatro cosas: un titular que nombre la oferta con las palabras del cliente; una línea que diga para quién es o qué resultado cabe esperar; una acción principal cuya etiqueta indique qué ocurre tras el clic; y una prueba que se pueda comprobar, como una captura del producto o un cliente citado por su nombre.
Casi todo lo demás puede esperar más abajo: la historia de la empresa, la lista completa de funciones, las ofertas secundarias. Las secciones inferiores sirven a quienes ya saben de qué trata la página y buscan razones. Pero la primera pantalla no debe parecer la página entera. Un bloque principal que ocupa la pantalla de borde a borde, sin indicio de lo que sigue, puede leerse como el final de la historia.
Juzgue primero la versión móvil, porque esa pantalla es la más pequeña. Cuando el aviso de cookies, la cabecera fija y la burbuja del chat se han llevado su parte, el titular puede quedar por debajo de la zona visible y el botón puede haber desaparecido. Haga la captura para el test en un teléfono real, con el aviso tal como lo encuentra un visitante nuevo, y no a partir de la maqueta impecable del archivo de diseño.
Largest Contentful Paint: cuándo aparece de verdad la respuesta
Los segundos del visitante empiezan con el toque, no cuando la página ha terminado de cargar. La documentación web.dev de Google lo mide con el Largest Contentful Paint (LCP): el tiempo de renderizado de la imagen, el bloque de texto o el vídeo más grande visible en la ventana gráfica, contado desde el momento en que el usuario navegó a la página. Marca el punto en que el contenido principal probablemente ya se ha cargado.
Los sitios deberían aspirar, dice web.dev, a un LCP de 2,5 segundos o menos, medido en el percentil 75 de las cargas de página y por separado para móvil y escritorio. Dicho de otro modo, en tres de cada cuatro visitas el contenido principal debería mostrarse dentro de ese tiempo. Si una imagen principal necesita cuatro segundos, por poner un ejemplo inventado, la mayor parte de los cinco primeros segundos pasa antes de que aparezca la oferta.
La misma página indica dónde leer la cifra: PageSpeed Insights y Search Console para datos de visitas reales, Lighthouse y Chrome DevTools para una medición de laboratorio. En una landing page, mire primero la imagen principal y las tipografías de titulares: una imagen solo cuenta cuando ha cargado, señala la documentación, y el texto en una fuente web no se considera renderizado durante el periodo de bloqueo de la fuente.
Accesibilidad básica: que la respuesta se pueda leer
Un mensaje que no se puede leer no se ha entregado. Las Web Content Accessibility Guidelines (WCAG) 2.2, las pautas de accesibilidad para el contenido web que el W3C publica como recomendación, contienen criterios que afectan directamente a la primera pantalla. El más conocido es el contraste: el texto necesita una relación de al menos 4,5:1 con su fondo, y el texto grande de al menos 3:1 (criterio 1.4.3, nivel AA). Los fallos habituales son el gris pálido sobre blanco y las palabras colocadas encima de una fotografía.
Después vienen las imágenes y el teclado. El contenido no textual necesita una alternativa textual que cumpla el mismo propósito (1.1.1, nivel A), de modo que una oferta que solo existe dentro de un banner en forma de imagen queda muda para quien usa un lector de pantalla. Toda la funcionalidad debe poder manejarse con el teclado (2.1.1) y con un indicador de foco visible (2.4.7). Para comprobarlo, pulse Tab hasta llegar al botón principal y luego Intro.
La versión 2.2 añadió un tamaño mínimo del objetivo de 24 por 24 píxeles CSS para las entradas de puntero, con excepciones como los enlaces dentro de una frase (2.5.8, nivel AA), y los campos que requieren datos necesitan etiquetas o instrucciones (3.3.2). Estas comprobaciones rápidas no son una auditoría de conformidad. Que una empresa esté legalmente obligada a cumplir las WCAG depende de la legislación nacional, una cuestión para un asesor cualificado.
Trucos de diseño que se interponen entre el visitante y la respuesta
El banner rotatorio es el caso clásico. Un carrusel pone varios mensajes en el lugar de uno, y en un test de los cinco segundos algunos participantes pueden describir la segunda diapositiva mientras su oferta está en la primera. Las WCAG tienen una regla para ello: el contenido en movimiento que empieza automáticamente, dura más de cinco segundos y se presenta junto a otro contenido necesita un mecanismo para pausarlo, detenerlo u ocultarlo, salvo que el movimiento sea esencial (2.2.2, nivel A).
Los efectos de entrada cuestan tiempo de forma más discreta. Un titular que aparece tras una animación de dos segundos ha desperdiciado dos de los cinco segundos del visitante. Un vídeo grande en la cabecera puede ser el elemento que mide el LCP; web.dev señala que en el vídeo cuenta la imagen de póster o el primer fotograma, lo que llegue antes. Y un titular ingenioso que podría ser de cualquier empresa («Soluciones para un mañana mejor») no responde a nada.
Una sola prueba separa la decoración del estorbo: ¿ayuda el efecto a que un desconocido responda antes a una de las tres preguntas? Si no, llévelo por debajo de la primera pantalla o elimínelo. Esto no es un argumento contra el oficio. La guía de Nielsen Norman Group observa que una primera impresión sólida puede generar confianza e interés, y una primera pantalla serena y bien hecha consigue exactamente eso.
Una rutina repetible: el orden de las comprobaciones y de los arreglos
Ponga las comprobaciones en una secuencia y una auditoría de landing page cabe en una tarde. Escriba la frase que quiere que repitan los visitantes. Haga el test de los cinco segundos con una captura de teléfono y después el test del primer clic. Consulte el LCP en datos de campo. Termine con el contraste, las alternativas textuales, el teclado y el tamaño de los objetivos.
Corrija los problemas en el orden en que bloquean la respuesta. Empiece por lo que no se puede leer, es decir, el contraste bajo y el texto encerrado en imágenes. Siga con lo que no está claro: el titular, la línea de apoyo y la etiqueta del botón. Ocúpese después de lo que es lento, empezando por el elemento que el LCP señala como el más grande. El movimiento y la decoración van al final.
Repita la prueba con personas nuevas, porque quien ya ha visto la página deja de ser un visitante primerizo. Guarde un registro fechado de cada ronda: la captura, las preguntas y las respuestas tal como se dijeron. La crítica deja entonces de ser un concurso de opiniones y pasa a ser una comparación de versiones. Cuando los desconocidos le repitan su frase, la página estará lista para una prueba A/B, que mide la persuasión y no la claridad.
Lista práctica
- Escriba una frase con la oferta, el público y la acción que busca antes de enseñar la página a nadie.
- Muestre cinco segundos una captura de la primera pantalla tomada en un teléfono a personas que no la conozcan y anote sus respuestas literalmente.
- Consulte el Largest Contentful Paint de la página en datos de campo y compárelo con los 2,5 segundos que web.dev considera buenos.
- Compruebe el texto del titular y del botón con la relación de contraste 4,5:1 de las WCAG 2.2 y llegue a la acción principal solo con el teclado.
- Traslade más abajo de la primera pantalla, o elimine, todo elemento en movimiento que no aclare la oferta a un recién llegado.
Preguntas frecuentes
¿Qué es un test de los cinco segundos para una landing page?
Es una comprobación rápida de la primera impresión. Se enseña una captura de la página a alguien que no la conoce, se retira a los cinco segundos y se le pregunta qué vende la empresa, a quién atiende y dónde haría clic. Nielsen Norman Group describe el método como una forma de captar la reacción instintiva: el tiempo no alcanza para leer el texto, así que solo sobrevive lo que queda claro al instante.
¿Cuántas personas deben participar en un test de los cinco segundos?
Las fuentes utilizadas aquí describen el método sin fijar un número. Como regla de trabajo, unas pocas personas de su público objetivo bastan para revelar un patrón, porque la prueba es cualitativa: se buscan malentendidos repetidos, no porcentajes. Si la misma respuesta equivocada llega de varias personas, ya tiene un hallazgo. Recurra a participantes nuevos cada vez que cambie la página.
¿Qué debe aparecer en la primera pantalla de una landing page?
Solo lo que un visitante primerizo necesita para decidir si se queda: un titular que nombre la oferta, una frase sobre el público o el resultado esperado, una acción principal con etiqueta clara y una prueba comprobable. Las funciones, la información de la empresa y las ofertas secundarias van más abajo. Verifique la selección en un teléfono, donde los avisos y las barras fijas dejan mucho menos espacio del que sugiere una maqueta.
¿Qué valor de Largest Contentful Paint se considera bueno?
La documentación web.dev de Google da 2,5 segundos o menos como señal de una buena experiencia de usuario. La vara de medir es el percentil 75, de modo que al menos tres de cada cuatro cargas deberían cumplirlo, con teléfonos y ordenadores evaluados aparte. La cifra se refiere a visitas reales, así que léala en herramientas de campo como PageSpeed Insights o Search Console. Las de laboratorio, como Lighthouse, sirven para encontrar la causa de un resultado lento.
¿Sustituye el test de los cinco segundos a las pruebas A/B?
No, responden a preguntas distintas. El test de los cinco segundos muestra si los desconocidos entienden la página de un vistazo, y puede hacerse con un borrador antes de comprar tráfico. Un experimento A/B compara cómo rinden dos versiones publicadas con visitantes reales, lo que dice algo sobre la persuasión. La claridad va primero: no merece la pena enviar tráfico a una versión que nadie entiende.