10 maneras fáciles de optimizar «Above the Fold» y por qué

optimizar arriba del pliegue

Si alguna vez ha investigado cómo mejorar su sitio web, probablemente se haya topado con artículos que analizan la colocación de ciertos tipos de contenido «en la parte superior de la página» o «en la parte inferior de la página».

En este artículo, explicaré qué es el pliegue y por qué es importante optimizar la información que aparece sobre el pliegue. Te daré algunos consejos sobre cómo optimizar tu sitio teniendo en cuenta la línea de plegado y explicaré por qué miramos las páginas web de la forma en que lo hacemos.

Espera… ¿Qué significa «Doblar»?

Hablar del “pliegue” en una página web es un vestigio del mundo periodístico. Los periódicos nos llegan doblados en un paquete ordenado, lo que facilita el transporte de un paquete de páginas impresas grandes.

La parte de ese paquete que ve primero es la mitad superior de la página principal. La sección «sobre el pliegue».

En los grandes tiempos del siglo XX, la mayoría de las ciudades importantes tenían más de un periódico local. Eso llevó a la competencia, y los periódicos asumieron correctamente que era más probable que usted comprara el periódico que llamó su atención.

Este sería el que tuviera la información que más te atrajera. Y para captar su atención rápidamente, colocan esa información en la parte superior de la página.

Mucho de lo que los periódicos aprendieron acerca de cómo hacer una presentación atractiva en la mitad superior de la página hace cien años se aplica hoy a su sitio web. Porque si bien los tiempos y la entrega de noticias han cambiado, hay muchas cosas que todavía hacemos de la misma manera.

Cuando nos encontramos con una página por primera vez, ya sea que esa página esté en papel o en una pantalla, todos tenemos el mismo «centro visual». El centro visual es la parte superior izquierda de la página o pantalla*.

Además de gravitar hacia la parte superior izquierda cuando miramos una página por primera vez, si nos quedamos en esa página, nuestra atención continua también se inclina hacia la izquierda . Saber dónde mira la gente nos da una buena idea de dónde concentrar nuestro mensaje más importante en una página.

Por encima del contenido del pliegue

Si no está convencido de que es importante concentrar sus esfuerzos en la parte superior de la página, piense en esto: muchos de los primeros usuarios de la web no se desplazaban en absoluto. Su resistencia al desplazamiento no era necesariamente la misma que la resistencia con la que te puedes encontrar hoy, pero a todos los efectos prácticos, lo es.

Esos primeros usuarios pensaban que lo que podían ver cuando llegaban a una página era el contenido completo. Hoy, un visitante potencial de su sitio sabe que probablemente haya más y asume que tendrá que desplazarse.

Pero cuando aterrizan, están tomando una decisión: ¿Esta página merece mi tiempo y atención?

Su visitante de hoy también tiene más con lo que lidiar en forma de distracciones. Entonces, no solo tiene que convencerlos de que su página vale la pena, sino que debe convencerlos con bastante rapidez. En un artículo anterior, hablé sobre el hecho de que solo tienes diez segundos para captar la atención de un visitante .

Dependiendo de a quién le creas, ese número podría ser considerablemente menor. No importa cuál sea el número, está bastante claro que debe expresar su punto de vista de la manera más rápida y eficiente posible.

Bien, quiero todas las cosas importantes en la parte superior de la página, ¿cómo lo hago?

Uno podría tomar el consejo de «above the fold» en el sentido de que lo ideal sería crear un sitio web above the fold. Un sitio donde todo es claramente visible a primera vista tiene potencial. Eso no es posible, y no es aconsejable, como verá a continuación, a menos que todo su sitio web consista en solo unas pocas oraciones.

Así que echemos un vistazo a lo que debería estar por encima de ese pliegue.

Antes de decidir qué se debe mostrar en la parte superior, necesitamos una idea de dónde está ese pliegue. La sabiduría predominante considera que el área sobre el pliegue en una página web son los 600 píxeles superiores de su página. Ahora, 600 píxeles pueden no parecer mucho, pero así es como se ve.

Esa es una buena cantidad de espacio. Pero, ¿cómo se ven 600 píxeles en una tableta o teléfono o en esa pantalla incrustada en la puerta de su nuevo refrigerador? Realmente no puedo mostrártelo aquí, pero la respuesta es que no es lo mismo que se ven en un monitor de escritorio .

Está leyendo un artículo sobre el diseño de sitios web en relación con la transmisión de su mensaje, por lo que asumiré que su sitio web responde. O estás trabajando para que sea compatible con dispositivos móviles . Así que sabes que una vez que achicas la pantalla, entran en juego docenas de otros factores. Y, a menudo, nuestras ideas sobre cómo queremos que se vean nuestras páginas se van por la ventana.

En lugar de pensar en el área superior de la página como un tamaño o espacio específico, considérelo como lo que un visitante ve cuando aterriza en su página. No importa qué tipo de dispositivo o tamaño de pantalla estén usando.

Lo que debe estar arriba del pliegue

Independientemente de la cantidad de bienes raíces disponibles para ocupar, estas son las cosas que deben vivir por encima de su redil.

1. Un título informativo (encabezado)

usa un titulo informativo

Suena obvio, ¿no? Sin embargo, todavía hay sitios web, muchos sitios web, que renuncian a un título y se lanzan directamente a un eslogan inteligente diseñado para atraer a los visitantes. Eso está bien si es probable que reconozcan su eslogan o eslogan inteligente. Pero si existe la posibilidad de que un visitante aún no esté familiarizado con usted, dígale quién es usted. Que sea obvio, simple y claro.

2. Un subtítulo informativo y atractivo (Subtítulo)

un subtítulo de encabezado informativo es importante

Aquí es donde debe estar la esencia de su mensaje o ese eslogan inteligente. La razón más convincente para que un visitante permanezca en su página debe ubicarse directamente en el centro visual, la parte superior izquierda de su página.

Lo que debería estar arriba del pliegue

Espera, ¿solo hay dos cosas que deben estar arriba del pliegue?

Algunas veces.

Si esas dos cosas se hacen bien, el incentivo para quedarse o desplazarse estará allí. Pero para ser justos, esos casos no son la norma. La mayoría de nosotros necesitamos más que un mosaico y una oración o dos para obligar a los visitantes a pasar su tiempo con nosotros.

Entonces, además de un buen título claro y un subtítulo, tus armas más poderosas son:

3. La llamada a la acción

tu llamada a la acción pertenece a la mitad superior de la página

Una llamada a la acción suele ser una llamada para comprar o para obtener más información con el objetivo final de ser una compra. Pero la idea secundaria es involucrar al visitante haciendo que interactúe con la página.

Si alguien está tratando de venderle algo caro, probablemente no colocará el botón «COMPRAR AHORA» en la parte superior de la página. Vas a tener que hacer un poco de convencimiento. Por lo tanto, la llamada a la acción podría ser una propuesta de valor o una historia de un cliente, algo que lo lleve al estado de ánimo de compra.

Si, por el contrario, están vendiendo algo que es relativamente barato, como un artículo de impulso, o algo que saben que ha comprado en el pasado, un botón «COMPRAR AHORA» es exactamente lo que quieren en la parte superior de la página. Probablemente no tengan que perder tiempo tratando de convencerte. El desarrollador solo necesita indicarle cómo comprar el artículo lo más rápido posible.

«Acción» no siempre es igual a «compra». Si ejecuta uno de esos sitios web raros y misteriosos que no intentan vender nada, aún se beneficiará de una llamada a la acción.

Si el enfoque de su sitio es el arte, la literatura o la cultura, aún necesita convencer a los visitantes de que es mejor que otros sitios de la industria o de un nicho. Use su llamado a la acción para atraer al visitante, hacer que comiencen y mostrarles lo que tiene para ofrecer.

Como puede ver, una llamada a la acción no es una propuesta única para todos. Tiene que adaptarse al propósito de la página. Podría ser algo tan simple como comentar una publicación de blog o decirles a los lectores que sigan los perfiles de las redes sociales.

4. Responda las preguntas del visitante

anticipar preguntas y dar respuestas

A veces es difícil resumir su mensaje en un título y un par de líneas descriptivas. Pero el pensamiento por encima del pliegue requiere que hagas precisamente eso.

Mire su mensaje en la mitad superior de la página con objetividad. Pregúntate si lo que estás diciendo podría plantear alguna pregunta en la mente de alguien que no esté familiarizado con lo que haces o vendes.

Si es así, adapte su mensaje para responder a esas preguntas. Si no puede responder las preguntas con un mensaje breve, cree una acción clara que lleve al visitante directamente a esas respuestas.

Casi todos los días me encuentro con al menos un sitio web que obviamente fue creado por profesionales. Gente que sabe lo que hace. Sitios que probablemente cuestan una gran cantidad de dinero y tiempo para producir. Son cosas de belleza.

Sin embargo, de alguna manera no tengo ni idea de para qué sirve el sitio, qué hace la empresa o por qué debería importarme.

Dado que siempre tengo curiosidad acerca de por qué la gente construye las cosas de la forma en que lo hace, me tomaré el tiempo para mirar alrededor y ver qué está pasando. Pero tenga en cuenta que a la mayoría de los visitantes no les importa por qué su sitio web no es informativo.

Simplemente se van .

No sea vago, tímido, enigmático o desconcertante. Coloque sus cartas sobre la mesa y deje que sus visitantes vean su mano.

5. Usa una imagen convincente

usar imágenes para obligar al visitante a seguir leyendo

Los seres humanos son criaturas visuales, y la web es un medio visual. A veces, una imagen llamativa puede hacer más para convencer a un visitante de que se quede que las palabras. Si puede combinar las palabras correctas con la imagen correcta, tiene una herramienta poderosa a su disposición.

Las imágenes pueden ser fotografías, ilustraciones o cualquier tipo de elemento gráfico que represente el propósito de la página o sitio. Este artículo de Smashing Magazine explica muy bien el poder de la imagen correcta.

Una imagen no es adecuada para todas las aplicaciones, pero hay muy pocos sitios web que no puedan beneficiarse de un gráfico bien elegido.

6. Ofrezca un cupón o descuento

ofrecer un cupón o descuento

Si está vendiendo productos, nada dice «queremos su negocio» más que la oferta inmediata de un descuento. La forma en que presenta el cupón o la oferta es importante.

Por ejemplo, muchos sitios usan ventanas emergentes que ocultan la página y su contenido.

Esas ventanas emergentes pueden funcionar en su contra si el visitante no ha tenido tiempo de descubrir qué está vendiendo. Asegúrese de dejar tiempo suficiente para que su mensaje se asiente antes de cubrir su página con una ventana emergente.

Mejor aún, incluya el cupón o la oferta en el contenido de la mitad superior de la página para que sea visible junto con su mensaje.

7. No haga alarde de las convenciones

no dejes que tu diseño genere confusión

Las convenciones web, es decir, no las convenciones de la sociedad, aunque algunos productos también dependen de hacerlo…

  • No le presente a un visitante un gráfico que parezca un botón pero que no se comporte como un botón.
  • Nunca subrayes un texto que no sea un enlace.
  • Trate de no mostrar texto en una fuente de tamaño fijo que podría volverse demasiado pequeña para leer en una pantalla pequeña.

Las mismas pautas de uso del sitio web que sigue en general deben seguirse cuando diseña con un pliegue de página en mente.

8. Asegúrese de que el entorno de la mitad superior de la página no parezca un anuncio

el contenido de la mitad superior de la página no debe parecer publicidad

Incluso si lo es, es mejor no dejar en evidencia que el contenido en la parte superior parece un anuncio. La mayoría de nosotros tenemos “ ceguera a los banners ”, e ignoramos automáticamente cualquier cosa que parezca un anuncio en una página.

Use el área sobre el pliegue para hacer su presentación, pero no la enmarque de la misma manera que enmarcaría un anuncio.

9. Evite la trampa de la “ilusión de integridad”

evitar la ilusión de plenitud

El pensamiento por encima del pliegue puede llevarse demasiado lejos. Algunos sitios presentan un diseño que llena completamente la ventana del navegador y están diseñados de manera que dan la impresión de que no hay nada debajo de la página.

Su mensaje en la mitad superior de la página no tiene que estar separado del resto de la página. Si necesitas un icono que apunte hacia abajo indicando que un visitante puede desplazarse, lo estás haciendo mal .

Cuando lo haces bien, tu mensaje en la parte superior de la página se convierte en una parte orgánica de una página más grande. El visitante ni siquiera se da cuenta de que está utilizando su conocimiento de su comportamiento para entregar su mensaje.

10. Termina con una nota alta

terminar fuerte, el final de la página es importante

Vale la pena recordar que es bueno concentrarse en el pliegue, pero no se olvide del resto de la página.

En particular, la parte inferior de la página.

Si sus páginas son informativas y atractivas, también puede colocar una llamada a la acción en la parte inferior de la página. Una vez que se conecte con un visitante utilizando contenido relevante e interesante que considere valioso, puede dispersar los elementos principales de los que hemos estado hablando en sus páginas.

Siempre debe concentrarse en mantener a los visitantes comprometidos, y el único método de participación seguro que nunca fallará es la relevancia .

Si puede proporcionar contenido relevante y útil, Google lo recompensará con una mejor ubicación en los resultados de búsqueda y sus visitantes se quedarán el tiempo suficiente para escuchar su historia.

Aquí estamos en la parte inferior de la página

¡Y todavía estás conmigo! Gracias.

Para resumir nuestras sugerencias de optimización de la parte superior de la página, aquí están en una práctica lista de los diez primeros.

  1. Un título informativo (encabezado)
  2. Un subtítulo informativo y atractivo (Subtítulo)
  3. La llamada a la acción
  4. Responda las preguntas del visitante
  5. Usa una imagen convincente
  6. Ofrecer un cupón o descuento
  7. No hagas alarde de las convenciones
  8. Asegúrese de que el entorno de la mitad superior de la página no parezca un anuncio
  9. Evite la trampa de la “ilusión de integridad”
  10. Termina con una nota alta

Hace más de 500 años, Johannes Gutenberg desarrolló tipos móviles para imprimir libros. Los chinos habían estado usando tipos móviles durante 500 años antes de la “invención” de Gutenberg, pero al parecer Johannes tenía una mejor empresa de relaciones públicas, así que es su nombre el que lees ahora.

Poco después de que se inventara la prensa, la gente empezó a publicar periódicos. Hoy en día, los periódicos de tinta sobre papel están al borde de la extinción. Pero la percepción que los editores de periódicos adquirieron a medida que aprendieron sobre cómo leemos sigue siendo útil.

* Voltee todo lo que hemos hablado aquí horizontalmente para aplicar estas ideas a los idiomas de derecha a izquierda. Por ejemplo, para un lector de árabe, el centro visual de una página es la esquina superior derecha.