Creación de una jerarquía visual: el arte de captar la atención

"¿Debería tirar esto a la basura o leerlo?" los sujetos de investigación se preguntan mientras examinan un correo directo. Evalúan la carta de arriba a abajo y, después de solo 11 segundos, toman una decisión.

Durante ese tiempo, los experimentadores de la Asociación de Marketing Directo de Munich notaron algo peculiar en los ojos de los sujetos. No siguen un camino lineal, leyendo cada palabra en sucesión, sino que saltan a diferentes puntos en el cuerpo de la letra. Entonces, ¿qué estaban mirando?

La respuesta es la clave para crear una página de destino posterior al clic que se convierta, con la ayuda de lo que se llama una "jerarquía visual". Para comprenderlo por completo, tendremos que viajar de regreso a la Alemania de 1912, donde tres psicólogos comenzaron a formar las bases de la Psicología Gestalt.

Psicología Gestalt y la base de la jerarquía visual

Hace más de un siglo, los pensadores alemanes Wolfgang Kohler, Max Wertheimer y Kurt Koffka comenzaron a estudiar cómo las personas perciben el mundo. Sus nombres y la teoría de la "Psicología Gestalt" pueden no parecer familiares, pero el mensaje que abarca su investigación será:

“El todo es distinto de la suma de sus partes” , lo que significa que el todo tiene “una existencia independiente en el sistema de percepción”, dice el Dr. Russ Dewey.

En otras palabras, los tres hombres propusieron que los humanos no perciben su entorno de forma individual e igualitaria. En cambio, los organizamos de formas específicas para que tengan sentido como un todo.

Tome la siguiente imagen, por ejemplo. ¿Que ves?

Probablemente observe tres círculos parcialmente dibujados, pero también un triángulo invertido en el centro donde no hay ninguno. Los círculos incompletos forman las esquinas del triángulo y tu mente llena los bordes. Esto se llama un "contorno ilusorio" y ejemplifica exactamente lo que Koffka quiso decir cuando dijo, "el todo es distinto de la suma de sus partes". Hay más de tres círculos parcialmente dibujados en esta imagen. Juntos, colocados como están, esos círculos forman un triángulo blanco.

A partir de su investigación, los tres hombres crearon ocho leyes de organización perceptiva, formas en las que los humanos ven los componentes de un grupo como un todo. Uno más que cualquier otro tiene que ver con la forma en que las personas encuentran información crucial en su página de destino posterior al clic.

Las leyes de la similitud

La ley de similitud establece que las cosas similares aparecen como si estuvieran agrupadas. En la imagen de abajo, ¿qué ves?

Si dijiste "36 círculos" o "6 filas de círculos" o "6 columnas de círculos", estás en la minoría. La mayoría de la gente ve tres filas de círculos negros y tres filas de círculos blancos. Dado que todas las demás filas tienen un color y una forma similares, se la considera parte de su propio grupo dentro del todo.

Al mismo tiempo, debido a esta tendencia a agrupar cosas similares, también notamos cosas que son diferentes al grupo. Los psicólogos de la Gestalt llamaron a estas diferencias "anomalías".

En la imagen de arriba, agrupamos todas las manzanas verdes similares juntas y la roja se destaca como una anomalía. Ya sea que esa anomalía sea diferente en tamaño, color o forma, llama nuestra atención porque es diferente del resto del grupo.

Este proceso de agrupación perceptual de elementos puede explicar lo que los experimentadores de la Asociación de Marketing Directo de Munich notaron en los ojos de los sujetos de investigación.

¿Qué es una jerarquía visual?

Brandon Jones de Tuts + dice que las personas no son "buscadores de igualdad de oportunidades". No solo tenemos la tendencia a notar diferencias entre grupos, sino también a hacer inferencias sobre la importancia de esas diferencias. Por ejemplo, clasifique los círculos en esta imagen:

Sin saber nada sobre ellos, probablemente los clasificó de la siguiente manera:

Y eso se debe a que el círculo más grande atrae más atención, luego el segundo más grande, y así sucesivamente. Ahora apliquemos un principio similar a las palabras de la página.

Esta es la oración más importante. Esta es la oración más importante. Esta es la oración más importante. Esta es la oración más importante. Esta es la oración más importante. Esta es la oración más importante.

En ese extracto, sus ojos probablemente se sintieron atraídos por la anomalía. Agrupó las oraciones sin formato y las palabras en negrita se destacaron. Cuando introduce diferencias de tamaño, la atención se centra en otra parte.

Esta es la oración más importante.
Esta es la oración más importante. Esta es la oración más importante. Esta es la oración más importante. Esta es la oración más importante. Esta es la oración más importante. Ésta es la oración más importante.

Esta vez, antes de que notaras las palabras en negrita dentro del párrafo, probablemente hayas visto las palabras en negrita aún más grandes encima. Podríamos seguir alterando las palabras con el color y el posicionamiento para que se destaquen aún más, pero entiendes el punto. "Diferente" llama la atención, y la atención es lo que desea que se le preste a la información más importante en su página de destino posterior al clic.

Con las diferencias en el diseño, puede atraer estratégicamente la atención de sus visitantes hacia los mensajes de marketing que son fundamentales para impulsar las conversiones: su propuesta de valor, los beneficios de su producto y la llamada a la acción, por ejemplo. Estas estrategias para llamar la atención forman la "jerarquía visual".

Dentro de esa jerarquía, la información más importante es dónde los ojos de sus visitantes aterrizan primero en la página, y luego la segunda información más importante es dónde aterrizan sus ojos a continuación, y así sucesivamente. Sin siquiera darse cuenta, clasifican mentalmente estos elementos de cruciales a innecesarios en función de las diferencias.

Estilos de lectura dentro y fuera de la web

Ahora revisemos el experimento de la Asociación de Marketing Directo de Munich, en el que los sujetos 'eligieron si tirar a la basura o leer una carta de ventas en solo 11 segundos. Pudieron tomar una decisión tan rápido debido a las diferencias de diseño.

Primero, sus ojos saltaron a lo que percibieron como la información más importante en la página: titulares y fotos. A continuación, llamaron la atención los subtítulos, las listas con viñetas y los párrafos cortos. La copia larga y sin formato se digirió en último lugar, si es que lo hizo.

Desde entonces, numerosos estudios han reforzado los hallazgos, sobre todo la investigación del Grupo Nielsen Norman que dio lugar al "Patrón en forma de F". Después de rastrear la mirada de 232 sujetos en miles de páginas web, el grupo encontró:

• Los primeros usuarios leen en la parte superior de la página, creando la barra horizontal superior de la forma de "F".
• Luego, las personas avanzan hacia abajo en la página, leyendo los subtítulos para formar la barra horizontal inferior de la "F".
• Por último, los usuarios escanean el lado izquierdo, formando el tallo vertical de la "F".

Se veía algo como esto:

Sin embargo, el nombre "en forma de F" es un poco engañoso. Como explican los investigadores, los patrones de lectura de los usuarios de Internet no siempre son tan nítidos:

Obviamente, los patrones de escaneo de los usuarios no siempre se componen de exactamente tres partes. A veces, los usuarios leerán una tercera parte del contenido, lo que hará que el patrón se parezca más a una E que a una F. En otras ocasiones, solo leerán una vez, lo que hará que el patrón parezca una L invertida (con la barra transversal en la parte superior). . Sin embargo, en general, los patrones de lectura se asemejan aproximadamente a una F, aunque la distancia entre la barra superior e inferior varía.

Independientemente de si se trata de una "F", una "L", una "E" o incluso un patrón "en forma de Z" para páginas con menos texto, las implicaciones son las mismas: las personas de habla inglesa leen de izquierda a derecha y de arriba a abajo mientras busca diferencias en el contenido. Titulares, subtítulos, imágenes, palabras en negrita, subtítulos, listas: estos son elementos diferentes del texto estándar sin formato.

Mire las páginas simuladas a continuación:

No contienen palabras reales, pero probablemente seas capaz de organizar mentalmente la correcta mejor que la izquierda. El derecho se adapta al estilo de lectura del patrón F, mientras que el izquierdo no organiza su contenido en una jerarquía visual de ningún tipo.

Ya sabemos por investigaciones que los bloques de texto como los de la página izquierda rara vez se leen. Entonces, ¿cómo te aseguras de que el tuyo funcione?

Diseñe teniendo en cuenta las diferencias

Antes de comenzar a crear una jerarquía visual, necesita un objetivo, dice Peep Laja de CXL:

Debe clasificar los elementos de su sitio web en función de su objetivo comercial. Si no tiene un objetivo específico, no puede saber qué priorizar.

Utiliza una captura de pantalla de una página de inicio de Williams Sonoma para demostrar:

Lo que más llama la atención es el enorme trozo de carne (hazme quererlo), seguido del título (di lo que es) y el botón de llamada a la acción (¡consíguelo!). El cuarto lugar va a un párrafo de texto debajo del título, el quinto es el banner de envío gratuito y la navegación superior es la última. Esta es una jerarquía visual bien hecha.

Sin embargo, en su página de destino posterior al clic, no debería haber un menú de navegación. Entonces, la atención se llamará un poco diferente. Echemos un vistazo a una página de destino posterior al clic de Simply Measured:

¿Dónde aterrizaron primero tus ojos? ¿Próximo? ¿Último? Si tuviéramos que adivinar, diríamos ...

1. El titular: "Cómo tomar decisiones de marketing social con mayor rapidez".
2. El subtítulo: "Aprenda a ahorrar tiempo y a verse como un profesional".
3. El texto en negrita: "En esta guía aprenderá a ..."
4. La copia con viñetas debajo del texto en negrita.
5. El llamado a la acción: "Enviar".

Este es un ejemplo de una gran jerarquía visual porque transmite información en el orden más relevante para los visitantes. Primero, el título y el subtítulo comunican el PVU de la oferta de una manera orientada a los beneficios. Los clientes potenciales entienden de inmediato que aprenderán a tomar decisiones sociales más rápido con la oferta de esta página.

Después de eso, escaneando el lado izquierdo de la página en el típico patrón F, los visitantes notan el texto en negrita que los lleva a la lista con viñetas, que detalla exactamente lo que se puede ganar al reclamar la oferta.

Por último, los prospectos escanean un poco más hacia abajo, luego a través de la página, donde ven el botón de llamada a la acción que ha sido coloreado de manera diferente al resto de los elementos de la página para llamar la atención. Les permite saber cómo reclamar su oferta.

Es posible que el texto del cuerpo se lea en su totalidad después de fijar esos tres elementos, pero es posible que no, por lo que es importante destacar la información más importante. En este orden, su jerarquía visual debería al menos:

1. Capte la atención con un título y deje que los visitantes sepan por qué deberían leer el resto de su página.
2. Explique brevemente los beneficios de su oferta con palabras en negrita, texto con viñetas y párrafos pequeños.
3. Muéstreles cómo reclamar la oferta con un llamado a la acción.

Entonces, ¿cómo se hace exactamente eso con los elementos de diseño? Sabe que lo "diferente" llama la atención, lo que a su vez transmite importancia, pero ¿qué elementos de diseño debería utilizar al crear una jerarquía visual?

Las características que impactan la jerarquía visual

Según el diseñador y autor independiente Steven Bradley, se pueden manipular cinco características para formar una jerarquía visual en su página:

• Tamaño: como es de esperar, los elementos más grandes tienen más peso.
• Color: no se comprende completamente por qué, pero se percibe que algunos colores pesan más que otros. El rojo parece ser más pesado mientras que el amarillo parece ser el más claro.
• Densidad: empaquetar más elementos en un espacio determinado, le da más peso a ese espacio
• Valor: un objeto más oscuro tendrá más peso que un objeto más claro
• Espacio en blanco: el espacio positivo pesa más que el espacio negativo o el espacio en blanco

El grado en el que utilice estos elementos en su página de destino posterior al clic afectará a dónde se posan los ojos de sus visitantes. A continuación, le mostramos cómo usarlos para crear su jerarquía visual:

• Tamaño: su título debe ser el texto más grande de su página. Si tiene uno, el subtítulo debe ser el segundo más grande. Más pequeños que eso deberían ser los subtítulos que usa para separar el contenido si su página es larga, y el más pequeño debería ser el texto del cuerpo sin formato.

• Color: este elemento es más importante para su llamado a la acción. La combinación de colores juega un papel importante en guiar a su visitante a su botón. La clave aquí es el contraste. Observe que en la página de destino post-clic de Simply Measured, el color naranja aparece solo una vez en una página principalmente azul y blanca. Eso hace que el botón de CTA sea extremadamente perceptible para el visitante.

• Densidad: Mire hacia arriba en la página de Williams-Sonoma nuevamente. El título y la llamada a la acción se superponen en la imagen destacada. Al empaquetar todos estos elementos en un espacio tan pequeño, los diseñadores han llamado más la atención que el menú o el banner de arriba.

• Valor: las palabras en negrita atraen más la atención que las sin formato. Su título, subtítulo y cuerpo del texto que presenta los beneficios de su oferta debe tener más valor que el resto del texto de su página.

• Espacio en blanco: recuerde los resultados del estudio de la Asociación de Marketing Directo de Munich: uno de los puntos que más llaman la atención son los párrafos pequeños. "Fragmentar" el texto en secciones formadas por tres oraciones como máximo puede hacer que no solo llame más la atención, sino que también sea más fácil de leer y retener.

Haz que se lea tu información más importante

La jerarquía visual ayuda a los visitantes a priorizar la información en su página de destino posterior al clic. Consiga que sus visitantes se conviertan creando uno que:

• Enfatiza su PVU en el título.
• Transmite los beneficios de su oferta en el cuerpo del texto.
• Permite a los clientes potenciales saber cómo reclamar su oferta con su botón de llamada a la acción.

Comience a diseñar su jerarquía visual rápida y fácilmente, regístrese hoy para una demostración de Instapage Enterprise.