Usando los patrones F y Z para crear una jerarquía visual en los diseños de las páginas de aterrizaje

A veces los diseños se crean meticulosamente y con gran cuidado, otras veces, al azar y casi inconscientemente. Ya sea que lo hagamos intencionalmente o no, cada vez que diseñamos algo, le damos un flujo. La clave es saber cómo controlar el flujo para lograr nuestros objetivos, particularmente con algo tan enfocado como una página de aterrizaje. ¿Cómo se hace esto? Hágase tres preguntas importantes:

  1. ¿Dónde irán los ojos del espectador inicialmente para enfocar?
  2. ¿Qué influirá en cómo se mueven sus ojos y en dónde se enfocarán después?
  3. ¿Podemos diseñar nuestras páginas para controlar su enfoque para guiarlos hacia nuestro objetivo?

Hay varias herramientas y teorías que pueden ayudarnos a encontrar las respuestas a estas preguntas, y ayudarnos a diseñar páginas de aterrizaje con un flujo intencional, que lleve a sus espectadores a la CTA y los haga más propensos a actuar.

Entre estas herramientas, el rastreo ocular ha dilucidado la forma en que la gente mira las cosas tanto en la página impresa como en la web. Cuando se trata de páginas de aterrizaje, es especialmente importante entender cómo la gente percibirá las páginas que creamos:

Aquí es donde entran los patrones de movimiento de los ojos.

Seguimiento de los ojos: mira donde están mirando

El rastreo del ojo ha dilucidado la forma en que la gente mira las cosas, tanto en la página impresa como en la web. Como campo de estudio, llegó a ser propio en la década de 1980, pero ya en el siglo XIX se hicieron observaciones sobre cómo el ojo se mueve a través de una página. Los historiadores acreditan a Louis Émile Javal como el primero en observar que en lugar de un suave barrido de los ojos a través de una página, la lectura implica una serie de fijaciones y sacacorchos para enfocar un punto seguido de un rápido movimiento hacia el siguiente punto de enfoque.

Naturalmente, esto planteó preguntas sobre por qué uno podría centrarse en una cosa en lugar de otra, y cómo uno decide dónde mover su enfoque a la siguiente. Estas preguntas formaron la base de más de un siglo de investigación de seguimiento ocular. Aunque se han hecho importantes progresos para responderlas, siguen siendo un punto de intriga hoy en día.

El patrón F

Las conclusiones del Grupo Nielsen Norman, compiladas en varios informes, siguen siendo quizás los recursos de rastreo ocular más citados y más útiles en la comunidad del diseño. El principal de sus hallazgos, este informe describe el ahora famoso Patrón-F:

  1. Los usuarios leen primero en un movimiento horizontal , generalmente a través de la parte superior del área de contenido. Este elemento inicial forma la barra superior de la F.
  2. A continuación, los usuarios se mueven un poco hacia abajo en la página y luego leen a través de un segundo movimiento horizontal que típicamente cubre un área más corta que el movimiento anterior. Este elemento adicional forma la barra inferior de la F.
  3. Finalmente, los usuarios escanean el lado izquierdo del contenido en un movimiento vertical . Este último elemento forma el tallo de la F.

Los siguientes mapas de calor demuestran el patrón F:

En ausencia de cualquier cosa colocada intencionalmente para llamar su atención, el Patrón-F describe la forma en que los ojos de una persona se moverán a través de una página que es densa en texto, lo que lo hace particularmente aplicable a las entradas de blog y a las páginas de resultados de búsqueda.

Lo importante es que los ojos comenzarán en la parte superior izquierda antes de escanear la página para buscar algo interesante o relevante. Si tienes algo a lo que quieres que alguien preste atención (como una proposición de valor) y tu página es de texto pesado, es una buena idea colocarla hacia la parte superior izquierda para asegurarte de que recibirá la atención que merece.

También vale la pena mencionar que los patrones F no tienen que seguir una “F” tradicional con dos tallos horizontales. Para demostrarlo, la página de aterrizaje de Fleetmatic muestra tres tallos (logo, encabezado, CTA), pero el Patrón-F sigue siendo claramente visible:

El Patrón Z

Las páginas menos densas en información, o como escribe Jerry Cao, “más suelto organizado”, tienden a provocar un movimiento ocular que se asemeja a la letra ‘Z’. Este llamado Patrón Z tiene muchas de las mismas características que el Patrón F. Pero como el Sr. Cao señala, “donde la simplicidad es una prioridad y la llamada a la acción es la principal ventaja”, el Patrón Z surgirá en lugar del Patrón F.

Este enfoque en la simplicidad hace que el Patrón Z sea el más adecuado para el diseño de páginas de aterrizaje, donde se quiere un enfoque singular para atraer a la gente y animarla a actuar. Para aprovechar las ventajas del Patrón Z, Brandon Jones, coloca tu llamada a la acción a lo largo del camino Z para asegurarte de que tu espectador la vea. Esto llevará a más conversiones.

Echa un vistazo a la página de aterrizaje de Offerpop y cómo se aplica el patrón Z, llamando más la atención sobre la forma y el CTA:

En los ejemplos anteriores se utilizan páginas de aterrizaje centradas en un solo objetivo para demostrar el uso eficaz de los patrones F y Z. Obsérvese cómo el componente principal de cada página, el CTA en el primer ejemplo y el formulario en el segundo, se coloca exactamente a lo largo del camino que los ojos de alguien tomarán naturalmente cuando miren la página. Colocando los componentes más importantes a lo largo del camino natural de esta manera, y haciendo un poco de optimización de la página de destino, se asegurará de obtener la mayor cantidad de conversiones. A veces este camino natural se ajusta exactamente al patrón F o Z, pero en el fondo la estrategia consiste en utilizar la jerarquía visual para guiar a la gente.

Jerarquía visual: la clave para un buen diseño

Tanto el patrón F como el Z están muy bien documentados, y han sido utilizados por los diseñadores con gran efecto en las páginas de la web. En ausencia de cualquier otro flujo creado intencionalmente, estos son los patrones que los ojos de la gente seguirán. Y ese es un conocimiento extremadamente útil para tener cuando se arma una página.

En última instancia, sin embargo, el diseño se trata de guiar a la gente hacia sus objetivos deseados. Los patrones F y Z son sin duda herramientas poderosas, pero aún más poderosa es la idea de establecer una jerarquía visual para guiar a la gente a través de una página.

En contraste con las páginas de la F y la Z de arriba, veamos otro ejemplo:

Cuando miras esta página por primera vez, ¿a dónde van tus ojos?

  • ¿La cara de la mujer?
  • ¿Precio amarillo?
  • ¿Garantía de devolución de dinero?
  • ¿El formulario?
  • ¿El gráfico de la parte inferior derecha?

Cada uno de los elementos de esta página ha sido diseñado para atraer tanta atención como sea posible, con el resultado de que ninguno de ellos tiene éxito. Es como tratar de tener una conversación con alguien en una habitación llena de gente que te está gritando. Con tantas distracciones, la página no logra centrar su atención en el único objetivo de obtener un “informe de auditoría SEO gratis”.

Fíjense en la falta de jerarquía visual – no sigue un patrón F o Z – lo que hace más difícil generar conversiones. Piénsalo: si llegaras a esta página, ¿te convertirías? ¿Sabes siquiera en qué convertir, cuál es la oferta, y lo sabes inmediatamente? ¿Qué harías para arreglar la jerarquía y la disposición general?

Espacio blanco

En su post en WordStream, Fahad Muhammad explica cómo el espacio blanco puede ser la clave para establecer una jerarquía visual efectiva:

“Todos los elementos merecen un lugar destacado en su página dedicada porque es el equilibrio entre estos elementos lo que ayuda a persuadir al visitante para que se convierta en un líder/cliente… Con la ayuda del espacio en blanco, puede establecer una jerarquía visual para los visitantes dictando qué elemento deben ver primero y qué elemento debe seguir. El espacio blanco es la razón por la cual sus visitantes mirarán primero su titular, luego pasarán a la copia, procederán al formulario y finalmente a su botón de llamada a la acción. El espacio en blanco le permite proporcionar relaciones espaciales entre cada elemento de la página permitiéndole guiar a sus visitantes a través de la página.”

El uso de espacios en blanco para guiar a sus visitantes a través de la página marca la diferencia entre una jerarquía visual efectiva y una página sin una estructura clara o una indicación de qué hacer.

La página de aterrizaje de Lyft para inscribir a los conductores da a cada proposición de valor un enorme buffer de espacio en blanco, permitiéndoles a cada uno dibujar nuestra mirada. Una página con una clara jerarquía visual se convertirá a un ritmo mucho mayor porque la gente que visite su página sabrá exactamente dónde mirar, logrando tanto su objetivo como dándoles lo que vinieron a buscar.

Tomando el control de sus diseños

El diseño es una combinación de arte y ciencia. Veamos un último ejemplo que demuestra cómo el seguimiento de los ojos, la jerarquía visual y la psicología humana pueden hacer que los visitantes se centren en lo que usted quiere que se centren.

Notarán que los mapas de calor de arriba son de la misma página, la única diferencia es la línea de los ojos del bebé. A la izquierda, el bebé te está mirando directamente, y la parte más caliente del mapa de calor está en la cara. A la derecha, el bebé está mirando el titular, que dirige nuestros ojos de su cara al titular y lo copia. Esta variación probablemente funcionaría mejor en las pruebas A/B porque la atención de los visitantes estaría en los elementos más importantes de la página. Los humanos automáticamente quieren mirar hacia donde otros humanos están mirando. Al cambiar la mirada del bebé, posteriormente hemos tomado el control de la mirada de nuestros visitantes y la hemos dirigido hacia la proposición de valor.

No sólo es importante entender las reglas estructurales, sino también ser sensible al contenido de nuestro texto e imágenes. Mientras que el patrón F y el patrón Z sirven como herramientas útiles para estructurar una página, encontrarás más éxito (y te divertirás mucho más) si adoptas el verdadero poder del diseño y creas una jerarquía visual para guiar a la gente a través de las partes más importantes de tu página. Toma el control de tus diseños y utilízalos para lograr tu objetivo, te alegrarás de haberlo hecho.

admin

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Publicar un comentario