Above the Fold: Diseñar lo que los visitantes ven primero

Cuando alguien llega a tu sitio web, emite un juicio rápido mucho antes de leer una frase o desplazar un solo píxel. La parte de la página que aparece en la ventana del navegador antes de que se realice cualquier desplazamiento se llama el área "above the fold" (por encima del pliegue), y asume una parte desproporcionada del trabajo que tu sitio debe hacer. Es donde los visitantes deciden si están en el lugar correcto, si entiendes su problema y si vale la pena quedarse unos segundos más.

El término proviene de los periódicos, donde los editores colocaban la noticia más importante por encima del pliegue físico para que fuera visible en el quiosco. En la web ya no existe un único pliegue, porque las pantallas varían en tamaño. Pero la idea sigue siendo válida: la primera pantalla que ve un visitante marca la pauta para todo lo que sigue. Esta guía explica qué elementos deben ir por encima del pliegue, cómo diseñarlos para que transmitan claridad en lugar de desorden, y los errores comunes que, silenciosamente, les cuestan a las empresas sus mejores visitantes.

Por qué la primera pantalla es tan importante

La gente navega por la web de forma rápida e impaciente. Escanean en lugar de leer, y abandonan las páginas que no confirman sus expectativas en segundos. La primera pantalla es tu única oportunidad fiable de responder a tres preguntas silenciosas que cada visitante trae consigo: ¿Qué es esto? ¿Es para mí? ¿Qué debo hacer a continuación? Si el área por encima del pliegue responde a las tres preguntas claramente, te has ganado el permiso para mantener la conversación. Si no responde a ninguna de ellas, el visitante pulsa el botón de retroceso.

Esto no significa que los visitantes nunca se desplacen. Lo hacen, y un buen contenido por debajo del pliegue los mantiene en movimiento. Pero la atención está muy concentrada en la parte superior. Lo que está en esa primera ventana visible lo ve casi todo el mundo, mientras que el contenido más abajo lo ve progresivamente menos gente. Eso convierte a la parte superior de la página en el espacio más valioso que posees, y merece tu pensamiento más cuidadoso.

El mito de que nadie se desplaza

Durante años, una creencia popular sostenía que era necesario meter todo lo importante por encima del pliegue porque los visitantes no se desplazarían en absoluto. Esa creencia está desactualizada. Los visitantes modernos se desplazan de forma natural y lo esperan. El verdadero objetivo no es apretar cada detalle en la primera pantalla, sino hacer que la primera pantalla sea lo suficientemente atractiva como para que el desplazamiento valga la pena. Piénsalo como el comienzo de una historia, no como toda la historia.

Qué elementos incluir por encima del pliegue

Un área por encima del pliegue sólida se construye a partir de un pequeño número de elementos que funcionan juntos. Cada uno tiene una función, y saturar el espacio con extras los diluye a todos. Aquí están los componentes que se ganan su lugar.

Un titular claro y específico

Tu titular es el texto más importante de la página. Debe decir qué haces y a quién ayudas en lenguaje sencillo. Evita juegos de palabras ingeniosos que requieran una segunda lectura, y eslóganes vagos que podrían pertenecer a cualquier negocio. Un visitante debería poder mirar tu titular y entender inmediatamente si está en el lugar correcto. La especificidad supera la astucia casi siempre.

Un subtítulo de apoyo

Debajo del titular, una línea corta de apoyo añade el detalle que el titular omitió. Si el titular establece el resultado, el subtítulo puede explicar cómo lo logras o para quién. Juntos forman una propuesta de valor compacta que un visitante ocupado puede asimilar en un par de segundos.

Una llamada a la acción principal

Cada sección por encima del pliegue debe hacer que el siguiente paso sea obvio. Esto generalmente significa un botón claramente diseñado con texto orientado a la acción. Resiste la tentación de ofrecer varios botones competitivos con el mismo peso, porque un visitante que se enfrenta a demasiadas opciones a menudo no elige ninguna. Selecciona la única acción que más deseas que las personas realicen y dale prioridad visual. Una opción secundaria, con menor énfasis, está bien, pero la jerarquía debe ser inconfundible.

Un elemento visual relevante

Una imagen, ilustración o un video corto en bucle puede comunicar contexto más rápido que las palabras. La palabra clave es relevante: el elemento visual debe reforzar tu mensaje, no solo decorar el espacio. Una foto genérica de archivo de personas dándose la mano no añade nada, mientras que una imagen clara de tu producto en uso, o del resultado que ofreces, ayuda al visitante a imaginarse beneficiándose.

Una pequeña señal de confianza

Una sola señal de confianza honesta puede tranquilizar a un visitante primerizo. Esto podría ser una línea corta que indique cuántos clientes atiendes, un logotipo reconocible de un cliente o socio, o una calificación breve. Con una es suficiente. Una pared de insignias por encima del pliegue se lee como ansiosa en lugar de segura, así que elige la señal más fuerte y déjala sola.

Diseñar para la claridad, no para el desorden

El error más común por encima del pliegue no es la escasez, es el exceso. Cuando cada elemento compite por la atención, nada gana. La disciplina del buen diseño por encima del pliegue es principalmente la disciplina de dejar cosas fuera. Algunos principios ayudan.

Establecer una jerarquía visual clara

La jerarquía es el orden en que tu ojo percibe las cosas. Tu titular debe ser el elemento más prominente, tu llamada a la acción el elemento interactivo más llamativo, y todo lo demás de apoyo. Usa el tamaño, el peso, el color y el espaciado para guiar la atención deliberadamente. Si no estás seguro de si tu jerarquía funciona, entrecierra los ojos en la pantalla: los elementos que permanecen visibles son los que transmiten el mensaje.

Dale espacio para respirar a los elementos

Un espaciado generoso hace que lo importante destaque y transmite calidad. Los diseños apiñados resultan estresantes y baratos. El espacio en blanco no es espacio desperdiciado, es la herramienta que da a tu titular y botón la prominencia que necesitan. En caso de duda, elimina un elemento en lugar de reducir los espacios.

Respeta los diferentes tamaños de pantalla

Dado que no existe un pliegue fijo, debes diseñar para la variedad de dispositivos que tus visitantes realmente utilizan. Un diseño que se ve equilibrado en un monitor de escritorio grande puede ocultar tu llamada a la acción muy por debajo de la primera pantalla en un teléfono. En pantallas más pequeñas, el titular y el botón principal aún deben aparecer sin desplazamiento, incluso si el elemento visual de apoyo se mueve o se encoge. Siempre previsualiza la parte superior de tu página en un teléfono, no solo en una laptop.

El estímulo para desplazarse

Un detalle sutil pero poderoso es la señal de que hay más abajo. Si tu primera pantalla parece un bloque completo y autónomo con un borde duro en la parte inferior, algunos visitantes asumen que eso es todo. Puedes invitar al desplazamiento dejando que la siguiente sección se asome por la parte inferior de la ventana, de modo que una pequeña franja del contenido siguiente o una imagen parcial insinúen que la historia continúa. Esta pequeña superposición empuja a la gente hacia abajo sin ninguna instrucción.

Evita también el problema opuesto. Una primera pantalla tan alta que llena toda la ventana con una sola imagen y nada más puede dejar a los visitantes sin saber qué hacer. El objetivo es una idea completa por encima del pliegue, junto con una suave promesa de más.

Errores comunes a evitar

Incluso los diseños bien intencionados caen en algunas trampas recurrentes. Estar atento a ellas te salvará de los errores más costosos.

Empezar con un titular vago

Si tu titular podría pertenecer a cualquier empresa en cualquier industria, no está cumpliendo su función. Frases que suenan impresionantes pero no dicen nada específico desperdician tu momento más valioso. Reemplázalas con lenguaje que nombre el problema del visitante o el resultado que desea.

Ocultar la llamada a la acción

A veces, el botón más importante está diseñado de forma tan discreta que se confunde con el fondo, o está tan abajo que nunca aparece en la primera pantalla de los dispositivos comunes. Si un visitante no puede encontrar el siguiente paso rápidamente, muchos no lo buscarán. Haz que la acción principal sea visible y atractiva.

Imágenes principales de carga lenta

Una imagen grande y hermosa por encima del pliegue es inútil si tarda varios segundos en aparecer. Mientras se carga, los visitantes miran un espacio en blanco o roto y se forman una mala impresión. Optimiza las imágenes cuidadosamente para que la parte superior de tu página se cargue rápidamente y considera cómo se ve el diseño antes de que la imagen termine de cargarse.

Intentar decirlo todo

El instinto de demostrar todo tu valor en la primera pantalla conduce a diseños recargados y abrumadores. Confía en que el resto de la página hará su trabajo. El pliegue es el titular de tu historia, no el capítulo entero.

Una lista de verificación práctica

Antes de dar por terminada una sección por encima del pliegue, haz una pequeña prueba. ¿Puede un extraño decir lo que haces en unos pocos segundos? ¿Hay un siguiente paso obvio? ¿El diseño se mantiene en un teléfono? ¿Es el texto más importante el más prominente? ¿Hay algo que se carga lo suficientemente lento como para frustrar a un visitante? Si puedes responder a esas preguntas con honestidad y corregir lo que falla, tu primera pantalla ya estará haciendo mucho más que la mayoría.

El espacio por encima del pliegue es pequeño, pero su influencia es grande. Tratarlo como la decisión de diseño más importante de tu sitio, en lugar de una ocurrencia tardía, da sus frutos en visitantes que se quedan, entienden y actúan. Para una visión más amplia de cómo encaja esto en un proyecto completo, consulta nuestra guía de diseño web personalizado, y explora cómo la primera pantalla se conecta con lo que hace que un sitio web convierta y el arte estrechamente relacionado de diseñar una excelente sección hero.

Preguntas frecuentes

Referencias

1. Nielsen Norman Group, "Scrolling and Attention" — nngroup.com
2. Nielsen Norman Group, "First Impressions Form Quickly on the Web" — nngroup.com

¿Listo para que tu primera pantalla funcione con más eficacia? Obtén más información sobre nuestro enfoque de diseño web, o ponte en contacto para hablar de tu proyecto.