Entras en una web y, antes siquiera de mover el ratón, ya tienes una primera impresión. Ves un titular, una imagen, el menú, quizá un botón que te invita a hacer algo… o un enorme banner que ocupa media pantalla y no te deja muy claro qué has venido a buscar. Todo eso forma parte del above the fold.
Above the fold: qué es y por qué importa en una web
El término above the fold viene del mundo de la prensa escrita. Los periódicos se colocaban doblados en los quioscos y, por tanto, la parte que quedaba visible era la que tenía que llamar la atención. De ahí viene la expresión: aquello que está “por encima del pliegue”.
En una web el pliegue es imaginario y marca el límite entre lo que una persona ve al cargar la página y lo que queda por debajo y requiere hacer scroll. Y aquí aparece el primer matiz importante: el above the fold no mide siempre lo mismo.
Una persona puede visitar la misma web desde un móvil, un portátil o un monitor enorme. Puede tener el navegador maximizado o no, utilizar un nivel de zoom diferente o incluso ver la página con barras del navegador que reducen el espacio disponible. Por eso, hablar de “los primeros 700 píxeles” como si existiera una línea universal sería simplificar demasiado. El fold depende del dispositivo y de la ventana desde la que se está viendo la página.
De hecho, la propia evolución del diseño web ha hecho que el concepto sea menos rígido que en los primeros años de Internet. Hoy no diseñamos una web pensando en una única pantalla, sino en multitud de tamaños y situaciones.
Above the fold content: ¿qué debería aparecer?
Pues depende de qué tenga que conseguir esa página.
En una página de servicios, puede ser importante dejar claro qué ofrece la empresa, para quién es y cuál es el siguiente paso. En una tienda online puede tener más sentido destacar una categoría, una promoción, un producto o las principales vías de navegación. En un artículo, lo fundamental será que quien llega entienda rápidamente qué va a encontrar.
El espacio inicial debería ayudar a responder una pregunta muy sencilla: “¿Estoy en el sitio correcto y sé qué puedo hacer aquí?”. Y esto nos lleva directamente a la UX.
¿Qué elementos pueden funcionar bien en el above the fold?
No existe una receta universal, pero sí podemos pensar en una serie de elementos que suelen tener sentido cuando responden al objetivo de la página. Además, un análisis heurístico puede ayudar a detectar problemas de usabilidad que quizá no sean tan evidentes a simple vista.
Un titular que diga algo
El titular debería ayudar a entender qué ofrece la página. No hace falta convertirlo en un eslogan de agencia publicitaria de 1998. La claridad suele ganar a la creatividad cuando ambas compiten.
Aquí el UX Writing también tiene mucho que decir: elegir bien las palabras de botones, mensajes y otros elementos de la interfaz puede marcar la diferencia a la hora de entender qué hacer después.
Una llamada a la acción con sentido
Un botón puede ser útil cuando existe una acción clara que queremos facilitar: comprar, solicitar presupuesto, reservar, contactar, consultar un servicio… Pero no hace falta llenar la primera pantalla de botones. Si todo es prioritario, nada lo es.
Una imagen que aporte
Una fotografía o un vídeo pueden ayudar a contextualizar una propuesta, mostrar un producto o transmitir una identidad de marca. Pero una imagen enorme que ocupa todo el espacio disponible mientras obliga a buscar qué hace realmente la empresa no está ayudando demasiado.
Una navegación que no obligue a jugar al escondite
En una web, especialmente en un ecommerce, la navegación es una de las primeras herramientas que permiten decidir qué hacer después. El menú no tiene que enseñar absolutamente todo lo que existe en la web. Tiene que ayudar a encontrar lo importante.
Errores habituales al diseñar el above the fold
El above the fold puede ser una zona muy útil, pero también un lugar fantástico para acumular malas decisiones de diseño.
- Uno de los errores más habituales es querer contarlo todo de golpe. Si cada elemento compite por llamar la atención, la persona que visita la web no sabe dónde mirar.
- Otro clásico es utilizar un hero gigantesco que ocupa prácticamente toda la pantalla sin aportar información suficiente. El resultado puede ser espectacular en una presentación de diseño, pero bastante menos espectacular cuando alguien intenta comprar, contactar o encontrar un producto.
- También es frecuente diseñar pensando únicamente en escritorio. Y viendo el peso que tiene el móvil en las compras online en España, es una apuesta bastante arriesgada.
- Por último, está el error de pensar que todo lo importante tiene que estar above the fold. No. El objetivo no es meter la web entera en una pantalla. El objetivo es conseguir que la primera pantalla tenga sentido y que el siguiente paso resulte evidente.
Entonces, ¿cómo debería ser un buen above the fold?
Si tuviéramos que resumir todo lo anterior, podríamos decir que un buen above the fold debería hacer tres cosas: orientar, explicar y facilitar el siguiente paso.
No tiene que ser espectacular. No tiene que tener siete animaciones. No tiene que conseguir una conversión en tres segundos. Y, desde luego, no tiene que evitar que nadie haga scroll. Tiene que conseguir algo mucho más útil: que quien llega a la página entienda dónde está, qué puede encontrar y por qué merece la pena seguir.
Además, conviene probarlo en diferentes dispositivos y tamaños de pantalla. El fold no es una línea fija y el diseño que funciona perfectamente en un monitor puede comportarse de una manera bastante distinta en un móvil.
Así que, la próxima vez que alguien diga que “hay que ponerlo todo arriba porque es lo que se ve primero”, puedes respirar tranquilx.
Sí, el above the fold importa. Pero no es una caja mágica donde hay que meter todo lo bueno de la web antes de que alguien tenga la osadía de deslizar el dedo hacia abajo. A veces, diseñar bien también consiste en saber qué dejar para después.
