Contrataste a un desarrollador, pagaste por un sitio web hermoso y lo lanzaste con orgullo. La página de inicio abre con una foto impresionante a pantalla completa, un mensaje de bienvenida cálido y tu logo en el centro del escenario. Parece portada de revista.
Y aun así los visitantes llegan, echan un vistazo y se van. No porque tu negocio sea débil, sino porque en los primeros tres segundos nadie respondió la única pregunta con la que llegaron: ¿estoy en el lugar correcto y esta gente me puede ayudar?
Esa primera pantalla, la parte que todos ven antes de hacer scroll, es el terreno más caro que tienes. Acertar con el diseño de tu "above the fold" (lo que se ve sin desplazarte) es la diferencia entre un vistazo y un cliente. Hablemos de qué pertenece realmente ahí, qué se debe desalojar y por qué las reglas cambiaron sin avisar cuando los celulares tomaron el control.
Qué significa hoy "above the fold" en realidad
La frase viene de los periódicos. La portada se doblaba a la mitad, y solo las notas principales se veían en el puesto. Los editores peleaban por poner el encabezado más grande ahí arriba, donde los compradores lo verían primero.
En la web, "above the fold" significa todo lo que un visitante ve antes de hacer scroll. Pero aquí está la parte que nadie menciona: ya no existe un solo doblez. Un monitor panorámico, una laptop, una tablet y un celular trazan la línea en un lugar completamente distinto cada uno.
Así que cuando decimos "above the fold", no estamos hablando de una altura fija en pixeles. Nos referimos a la primera impresión que se forma un visitante antes de mover un dedo. Esa impresión tiene un solo trabajo: convencerlo de que la página vale la pena el scroll.
Las tres cosas que deben aparecer primero
Después de años construyendo sitios para restaurantes, clínicas y consultorías, el patrón se mantiene. Tres elementos se ganan su lugar hasta arriba. Todo lo demás es negociable.
Una propuesta de valor clara
Esta es una frase sencilla que dice qué haces y para quién lo haces. No un eslogan. No "Bienvenido a nuestro sitio web". No "Excelencia desde 2009".
Compara dos encabezados para una clínica dental:
- "Tu sonrisa, nuestra pasión."
- "Odontología familiar sin dolor en Juriquilla, citas en la misma semana."
El primero podría pertenecer a cualquier dentista del planeta. El segundo le dice a un papá preocupado en Querétaro exactamente qué obtiene y dónde. Una buena propuesta de valor es tan específica que un competidor no podría pegarle su logo encima y salirse con la suya.
Una llamada a la acción principal
Fíjate en la palabra "una". La parte de arriba de tu página debe hacer obvio e imposible de ignorar el siguiente paso más importante.
Para un restaurante, eso es "Reserva una mesa" o "Ver el menú". Para una consultoría financiera, "Agenda una consulta gratis". Para una florería que toma pedidos del mismo día, "Pide para hoy".
El error que vemos todo el tiempo son cinco botones del mismo peso amontonados arriba. Llámanos, escríbenos, síguenos, descarga esto, lee aquello. Cuando todo es prioridad, nada lo es. Elige la única acción que más le importa a tu negocio y déjala sola, en un botón que de verdad parezca botón.
Una sola señal de confianza
La gente decide rápido si confía en el sitio web de un desconocido. Dales una razón concreta en esa primera vista.
Una señal de confianza no es un párrafo sobre tus valores. Es prueba: una calificación real de un cliente, el logo de un cliente reconocible, un número como "Atendiendo a 400 familias locales desde 2015", o una cita corta y genuina con un nombre real. Una liga local de hockey podría mostrar "Sitio oficial de la Liga Amateur de Querétaro". Una consultoría podría mostrar la insignia de un socio reconocible.
Una basta arriba. El resto de tu prueba va más abajo en la página, donde también hace un trabajo importante.
El mito de que hacer scroll es malo
Durante años una vieja creencia ha rondado el diseño web: la gente no hace scroll, así que mete todo lo importante hasta arriba.
Eso simplemente no es como se comporta la gente. Todo estudio serio sobre el comportamiento del usuario coincide en que los visitantes hacen scroll sin titubear, siempre y cuando la parte de arriba les dé una razón para hacerlo. El scroll es el gesto más natural que existe hoy. Tu pulgar lo hace mil veces al día sin pensarlo.
El verdadero riesgo no es que la gente se niegue a hacer scroll. El verdadero riesgo es no darles nada que valga la pena el scroll. Una pantalla de arriba saturada que intenta decir todo termina sin decir nada, y eso es lo que de verdad mata el scroll.
Así que deja de intentar meter todo tu negocio en una sola pantalla. La parte de arriba es la promesa. El resto de la página la cumple. Si quieres ver cómo el espacio para respirar hace que esa promesa aterrice con más fuerza, lo que escribimos sobre el espacio en blanco combina bien con esta idea, y puedes estudiar ejemplos reales en nuestro portafolio.
Cómo el celular cambia toda la ecuación
La mayoría de tus visitantes están en un celular. Eso cambia todo sobre el "fold".
En un celular, la primera pantalla es alta y angosta. Un hero de escritorio que acomoda un encabezado, un subtítulo, un botón y una imagen lado a lado se apila verticalmente en el móvil, y de pronto tu llamada a la acción queda empujada hasta el fondo, donde nadie la ve.
Unas cuantas reglas mantienen la parte de arriba de una pantalla móvil trabajando duro:
- Arranca con palabras, no con una imagen enorme. Una foto a pantalla completa en un celular muchas veces significa que el visitante desliza una pantalla entera antes de leer una sola palabra útil. Deja que el encabezado venga primero.
- Mantén el botón principal al alcance del pulgar. El tercio inferior de la pantalla es donde viven los pulgares. Un botón fijo de "Reservar" o "Llamar ahora" que se queda visible mientras la gente hace scroll suele rendir mejor que cualquier cosa en el hero.
- Recorta el ruido de la navegación. Un menú de escritorio con ocho elementos se convierte en un ícono de menú ordenado en el móvil, y eso está bien. La parte de arriba de una pantalla de celular debe llevar la propuesta de valor y la acción, no un muro de enlaces.
- Respeta el tiempo de carga. Esa imagen hermosa del hero pesa más en un celular con datos móviles. Si hace lenta la primera pantalla, te está costando visitantes antes de que lean una palabra.
Si tu sitio se diseñó en un monitor grande y nunca se probó en serio en un celular sostenido con una mano y una conexión lenta, el "fold" que crees tener no es el "fold" que tus clientes ven de verdad.
Qué no pertenece ahí arriba
Tan útil como saber qué incluir es saber qué desalojar del mejor lugar:
- Un párrafo largo de bienvenida. Nadie lo lee. El espacio es demasiado valioso para aclararse la garganta.
- Un carrusel rotativo con cinco mensajes. Los carruseles avanzan antes de que alguien termine de leer, y diluyen tu único mensaje claro en cinco mensajes borrosos.
- Los íconos de redes sociales como el elemento más llamativo. Mandar a visitantes ganados con esfuerzo directo a Instagram, donde no controlas el siguiente paso, es una forma rara de gastar tu mejor terreno.
- Fotos de banco de apretones de manos y horizontes urbanos genéricos. Gritan "podría ser cualquiera" justo en el momento en que necesitas gritar "somos nosotros".
- Un aviso de cookies que se traga la pantalla. Necesario, sí, pero diséñalo para que no se coma el mensaje que paga tus cuentas.
Una prueba de dos minutos que puedes hacer hoy
No necesitas una agencia para revisar la cordura de tu propia primera pantalla. Abre tu página de inicio en tu celular, luego voltea la mirada un momento y vuelve a verla como si nunca la hubieras visto.
Hazte tres preguntas directas. ¿Un desconocido puede saber qué haces y a quién atiendes? ¿Es obvia la única acción que quieres que tome? ¿Hay una sola razón para creerte? Si titubeas en cualquiera de ellas, tu "fold" está haciendo menos trabajo del que debería.
Luego pásale el celular a alguien fuera de tu negocio, un familiar o un vecino, y observa en silencio. En el momento en que entrecierren los ojos o empiecen a hacer scroll para descubrir de qué trata el sitio, encontraste exactamente qué arreglar.
En resumen
El "above the fold" no se trata de pixeles ni de una línea imaginaria. Se trata de la promesa que haces en los primeros tres segundos: esto es lo que hacemos, este es el siguiente paso obvio y esta es una razón para creernos. Todo lo demás, toda tu prueba, detalle y personalidad, vive abajo, donde la gente hace scroll con gusto una vez que la parte de arriba se ganó su atención.
Acierta con esos tres elementos, pruébalos en un celular real, y conviertes el vistazo-y-me-voy en el quédate-y-actúa. Si no estás seguro de qué está diciendo de verdad tu propia primera pantalla, nuestro equipo puede revisar contigo las opciones de servicios.
¿Quieres que tu primera impresión de verdad cuente? Empieza una conversación con nosotros.