¿Quieres mejorar los resultados de los mapas de calor de tu web?

Con las 4 técnicas que os proponemos podremos mejorar los mapas de calor averiguando los gustos y el comportamiento de los usuarios.

Como ya dijimos en el artículo anterior, los mapas de calor son una gran herramienta para saber el comportamiento de los usuarios en una página web. Pero, cómo podemos mejorar nuestro diseño web para obtener mejores resultados?

Antes, dejadnos ampliar los tipos de mapas de calor que os explicamos, con uno nuevo:

Mapa de confeti.

La novedad respecto al post anterior es el llamado “mapa de confeti”. Este es similar al mapa de clics con la diferència que no muestra la densidad sino cada uno de los clics de manera independiente. Cada uno de estos clics lo podemos filtrar por fuente de referencia (origen), país, hora o término de búsqueda para buscadores.

Una de las ventajas de este tipo de mapa es que permite ver si los usuarios hacen clic en elementos que no están enlazados a nada y poderlo solucionar. También podemos saber cuántos clics genera un elemento en particular y, si es necesario, mejorar su ubicación o potenciarlo.

En definitiva, es un mapa que nos permite precisión y detalle, de manera que podemos ver qué pequeños elementos funcionan y cuales tenemos que cambiar, ¡puede que utilizando la técnica que justo viene a continuación!

¡Adelante con las técnicas y consejos!

4 técnicas:

1. Técnica A / B testing

Consiste en lanzar dos versiones de un mismo elemento, por ejemplo, una landing y medir cuál de las dos versiones funciona mejor. En las dos versiones debe haber algún elemento diferenciado, por ejemplo, un CTA (Call To Action) de un color, tamaño o posición diferente, por lo que podemos medir si, siguiendo con el ejemplo, funciona mejor el botón al final o al principio, a la derecha oa la izquierda, el verde o el rojo, etc.

¿Qué puede ser sujeto de ser probado mediante el A / B test?

  • Titulares y descripciones de los productos
  • Extensión de texto.
  • CTAS: palabras, colores, tamaños y posiciones.
  • Formularios: extensión y tipología de los campos.
  • Layout o estructura visual de la web.
  • Presentación del precio de los productos y/o ofertas promocionales.
  • Imágenes y vídeos: ubicación, cantidad, contenido y propósito.

De esta manera podremos mejorar la efectividad de nuestra landing page.

ab-test
BoletLa explicación en un minuto y medio:

2. Técnica de foco

Esta es una técnica que proviene del cine, concretamente de la técnica del principio de escenificación (se puede recordar al artículo ‘Los principios de la animación clásica aplicados al diseño web’). Básicamente se trata de redirigir la mirada del usuario de manera subliminal con las imágenes y su contenido. Ya sea con las líneas de punto de fuga de una perspectiva que apunten a la zona que nos interesa o bien utilizar personas a las imágenes que miren o apunten con los brazos o manos hacia la zona de interés de la web.

Os dejamos algunos ejemplos de esta técnica con imágenes:

focus-example-1
focus-example-2

También podemos utilizar contrastes para destacar el texto que queremos que se lea primero. En el próximo ejemplo, podemos ver cómo, contrastando diferentes partes del texto, la mirada del usuario a primera vista cambia en cada caso.

focus-example-3
Bromelia

Foto: Reidastexturas

Algunas plantas, como la bromelia tienen unas hojas en forma de embudo para redirigir el agua de la lluvia hacia el centro de la planta, donde hay un depósito de hasta 8 litros en los ejemplares más grandes.

3. Técnica de ruta

Partiendo de los resultados de mapa de calor de scroll (explicado en el post anterior), podemos ver hasta qué profundidad llegan los usuarios en nuestra web. Para mejorar esta profundidad y que los usuarios puedan ver el contenido de más abajo, podemos ir dirigiendo como si de una ruta se tratara, de punto a punto, no muy alejados entre sí.

Podemos hacerlo con referencias a contenido posterior, con botones de scroll o utilizando también la técnica de foco con imágenes que apunten abajo, por ejemplo una persona mirando abajo.

Veamos algunos ejemplos:

ruta-example-1

Desde Intuix hemos aplicado esta técnica a la página principal, os lo demostramos.

Sólo entrar en Intuix.cat encontramos una flecha bajo el título que nos indica que hay más contenido debajo, y si le damos clic sobre la flecha, nos lleva directamente a la siguiente sección. Esta misma idea la encontramos en la imagen que acaba con la punta de una flecha que apunta hacia abajo.

ruta-example-2

Si continuamos navegando por la página principal, encontramos que varios elementos gráficos ayudan a que el usuario haga scroll por la web: uno de ellos, el más evidente, es el separador de contenidos también con forma de flecha que mira hacia el próximo punto. Dos de los menos evidentes o que pasan más desapercibidos son: por un lado, el fondo que da sensación de continuidad; y por otro, el texto que va apareciendo a medida que vamos haciendo scroll, esta es una manera de hacer crecer la curiosidad del usuario y que vaya siguiendo el texto, como mínimo, hasta donde deje de aparecer.

ruta-example-2

4. Técnica de patrones

Los patrones de diseño son estándares que se basan en estudios de comportamiento de lectura. Los más famosos son: El diagrama de Gutenberg y el Patrón F de Jakob Nielsen.

Diagrama de Gutenberg:

Seguramente es el patrón de diseño más utilizado de la historia y se utiliza en carteles, publicidad y televisión.

Basa su patrón en el movimiento del ojo humano y determina, cómo se puede ver en la imagen, que los usuarios comienzan a percibir información desde la esquina superior izquierda, moviéndose horizontalmente hasta la esquina derecha y seguidamente para bajar en diagonal hasta la parte inferior izquierda y volver horizontalmente hacia la derecha.

Como se puede comprobar, este patrón forma una letra Z, por eso el Diagrama de Gutenberg también recibe el nombre de Patrón Z. Esto nos dibuja una forma de Z.

Este patrón es más efectivo en páginas con gran cantidad de texto y popularmente se llama "leer en diagonal".

Una derivado de este patrón es el llamado Patrón Zig-Zag, que básicamente es una concatenación de patrones Z y se aplica en páginas largas.

Patrón F de Jakob Nielsen:

El danés, Jakob Nielsen, denominado como "el gurú de la usabilidad Web" determinó en 2006 que con el tiempo el comportamiento de lectura de los usuarios de páginas web había cambiado y había derivado hacia un comportamiento de lectura en forma de F. Seguramente derivado por el hecho de poner los menús en la parte izquierda de la web.

De este modo, los usuarios suelen leer primero en horizontal para seguidamente hacer una lectura vertical de la parte izquierda y volver a hacer una lectura horizontal por el centro de la página. Esto crea una forma de F, como se puede comprobar en la imagen.

Estos son los más comunes y más habituales, pero hay mucho más patrones de lectura dependiendo del usuario, del motivo de la entrada en la página o de tiempo que le quiere dedicar. Debemos determinar a qué público nos dirigimos y qué patrón queremos aplicar en cada caso.

Lo que sí podemos deciros es que el caos no es bueno, y por ejemplo, un botón:

Fibonacci

Foto: imgur

El patrón más habitual que se encuentra en la naturaleza lo descubrió Leonardo de Pisa (1170-1240), más conocido como Fibonacci, con su "Sucesión de Fibonacci" en forma de espiral. Podemos encontrarlo por ejemplo a la disposición de muchas hojas de plantas.

2 consejos:

1. Call to actions efectivos / Uno, dos, tres, YA!

Los botones o call to actions deben ser suficientemente visibles y destacar del resto de contenido, que la vista se pueda centrar rápidamente. Eso sí, siempre siguiendo la estética de la web y no hacer estridencias :D .

Cosas a tener en cuenta con los Call to actions:

  • Utilizar copys amables. Huye de los imperativos como "Descarga" o "Entra" y utiliza fórmulas que inviten a hacerlo, por ejemplo "¿Quieres descargarlo?" O "Recibir más información".
  • Utiliza lenguaje adaptado a tu público. Es diferente un público aficionado que un público profesional, un público juvenil o un adulto.
  • Colócalos en lugares estratégicos y fáciles de ver. Que el usuario lo encuentre y no tenga que buscar.
  • No abuses. Es mejor pocos y efectivos que muchos Call to actions que puede llevar a desconfianza al visitante.
  • Integralo con el diseño. Que destaque pero utilizando los colores y la estética del diseño global.
  • Que respire. Y si puede ser que esté sobre una zona blanca. Un botón sobre una foto es difícil que destaque.

2. Paciencia / Es la madre de la ciencia!

Los mapas de calor son herramientas útiles pero necesitan tiempo. Al analizar los mapas de calor de una web con pocas visitas, debemos tener paciencia y esperar un tiempo bastante prudencial para que los resultados sean fiables. Si tenemos prisa y aplicamos cambios con los primeros resultados, pueden estar sesgados y no ser efectivos.

13 consejos para reducir el porcentaje de rebote de tu web.

Camaleo - Animacions web

Foto: Mahir Dalloul

El Dragón de komodo es considerado uno de los animales más pacientes, ya que después de inyectar veneno a una presa, puede esperar semanas a que esta muera para poder alimentarse. Mientras la va siguiendo a una distancia prudencial.
Eina
Un estudio de la Universidad de Missouri estableció que un usuario sólo necesita dos décimas de segundo para crear una primera impresión de la web.

Si nos quieres conocer mejor,
¡contáctanos! Y si te gusta, ¡síguenos!