Cómo disparar tus conversiones con un Heatmap y Tests A/B

En el post 5 Herramientas imprescindibles de Conversion Rate Optimization, Maria Sánchez comentaba la importancia de optimizar la tasa de conversión de nuestra web (o CRO, Conversion Rate Optimization).

Por: 

Maria Sánchez comentaba la importancia de optimizar la tasa de conversión de nuestra web (o CRO, Conversion Rate Optimization) e insistía en que te quedaras con dos ideas:

  • La enorme mayoría de los sitios web están, como mínimo, de 2 a 3 veces por debajo de su tasa de clics potencial, la cual podrían conseguir fácilmente al optimizar un poco la conversión de sus visitas, ya sea para la venta de productos o acciones que no requieren desembolso económico como para la suscripción a una lista de correo electrónico.
  • Es mucho más fácil multiplicar por dos o por tres las tasas de clics que lograr multiplicar por dos o por tres el tráfico de tu web.aumentar conversiones heatmaps test a b

Si antes de tomar cualquier tipo de decisión, consideras que lo apropiado es evaluar las consecuencias que conllevará y las alternativas de las que dispones, en este post encontrarás la descripción de dos técnicas fundamentales que te pueden ayudar en el diseño de tu web para mejorar la conversión de la misma: los Tests A/B (en inglés: A/B Testing o Split Testing) y los mapas de calor o Heatmaps.

Tests A/B

La idea del Test A/B es que antes de realizar cambios en un sitio web, hemos de medir el rendimiento de cada uno de estos cambios y apostar sólo por los mejores.

En particular, un test A/B consiste en crear varias versiones de un mismo elemento de tu web (una página, una entrada, un título, un botón, el tema en general, etc.) y mostrarlas aleatoriamente a los visitantes (aunque cada visitante verá siempre la misma), monitorizándolas de tal manera que podamos saber cuál de ellas está rindiendo mejor, midiendo el objetivo (o la conversión) que nos hayamos marcado.

En este vídeo en castellano de Nelio A/B Testing nos explican la técnica de test A/B:

 

¿Cómo aplicar esta técnica en mi sitio web?

  1. Pensar qué elemento de nuestra web queremos mejorar. Se recomienda empezar con la página principal, la página de precios o la de contacto. Pero por supuesto, cada uno ha de escoger aquella que sea más relevante para sus objetivos.
  2. Pensar qué cambios aplicar y con qué finalidad. ¿Debo cambiar la imagen de fondo o los colores de los botones?. Y si no se te ocurre nada, puedes conseguir que un usuario externo os haga una revisión de vuestra página o ver catálogos de tests realizados por otros.
  3. Definir claramente el objetivo del test para así poder medir los resultados de cada alternativa.

 ¿He de programar que se vean las dos versiones aleatoriamente? ¿Cómo interpreto los resultados?

Es importante tener claro que actualmente con las herramientas existentes (como Nelio A/B Testing para WordPress u otras soluciones genéricas como Optimizely o VWO), podrás realizar todos los tests A/B que quieras sin necesidad de ningún conocimiento de previo de HTML o de CSS.

Crearemos las alternativas con editores gráficos y la herramienta de test A/B se encargará automáticamente de conseguir que vuestros visitantes vean una u otra versión aleatoriamente. También, los resultados del análisis los puedes ir monitorizando en gráficas muy claras y, sin necesidad de ser especialista en estadística, saber cuando los resultados son significativos y qué versión es mejor.

 ¿Seguro que es útil?

Poner tu web a prueba siempre es útil. Tanto si descubres que las versiones alternativas son mejores, y por tanto, aumentas tus resultados, como en el caso contrario, donde podrás sentirte orgulloso de confirmar con datos (y no sólo opiniones) que tu contenido original es mejor.

Podrás encontrar cientos de casos de estudios sobre los beneficios que ha aportado la realización de tests A/B a muchísimas empresas (hasta se organizan congresos sobre el tema), en muchos casos, con resultados espectaculares. Estos casos deberían poderte ser de gran utilidad para inspirarte sobre qué probar en tu web y así conseguir mejoras continuas.

Heatmaps

Veamos otra herramienta muy útil para conocer mejor el comportamiento de los visitantes de nuestra web: los Heatmaps.

Un Heatmap (o ‘mapa de calor’) es un gráfico en el que se resaltan mediante uncódigo de colores las zonas más relevantes de una web en base a criterios como elnúmero de clics, o las áreas más frecuentadas por los visitantes pasan con más frecuencia con el ratón.

El objetivo es comprobar la visibilidad de ciertos elementos o evaluar los mejores sitios para poner publicidad. Pero, sobre todo, es una herramienta perfecta para detectar aquello que nuestros usuarios no están haciendo. Más concretamente, te ayudan a detectar dónde los visitantes ponen su foco de atención, dónde hacenclics con o sin sentido, si hacen o no scroll hacia abajo para ver las partes más profundas de tu web, o incluso si realizan clics en elementos que en realidad no son clicables.

Los heatmaps también sirven de inspiración para la creación de tests A/B. Y aprovecho mi ejemplo preferido de heatmaps, también descrito por Antonio Villegas en WPrincipiante.

En este caso, se trataba de una web de venta de pañales en la que tenían la imagen del bebé con su pañal, la descripción del producto y el botón de compra. Pero no estaban del todo satisfechos con la conversión obtenida de sus visitantes. ¿Cuál es el problema? ¿Hay que cambiar la descripción del producto? ¿Hay que cambiar el botón de compra?

Como puedes ver, el heatmap de dicha página aportó mucha información.

captura bebe no optimizado

¡Ajá! ¡Si es que el bebé es una monada! ¡Y se ha llevado toda la atención de la página!

Y aquí es donde entra la creatividad del diseñador de la página para intentar cambiar el comportamiento de la gente a fin de conseguir que los visitantes se focalicen más en lo que nos interesa a nosotros.

captura bebe optimizado

Está claro que la carita del niño sigue atrayendo a los visitantes, pero también ha conseguido que los visitantes pongan su foco de atención sobre aquello que el bebé está mirando, que acaba siendo el contenido de su derecha, que es lo que queremos que reciba más atención.

Realmente sorprende la información que puede darte un heatmap sobre las flaquezas del diseño de una web y es por este motivo es algo que os recomiendo encarecidamente poner en práctica.

Con ya tienes las herramientas y la teoría básica sobre cómo usarlas en tu web para mejorar la conversión y conocer mejor a tus visitas. Y ahora, ¿a qué esperas para ponerlo en práctica?

Fuente: http://www.ciudadano2cero.com/optimizar-conversiones-heatmaps-test-a-b/

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s