Uno de los mayores problemas a la hora de mejorar el desempeño de tu página web es no saber qué cambios hacer. Este bloqueo creativo nos ha pasado a todos alguna vez. En casos así, lo correcto suele ser centrarse en aquellas partes de la web que sean más críticas. Con esto me refiero a las secciones de tu página que reciben más atención o que son más importantes para tu modelo de negocio.
Por ejemplo, si tu objetivo es que quienes visitan tu web rellenen un formulario, céntrate en el propio formulario: haz que sea visible y simplifícalo al máximo para que no dé pereza completarlo y enviarlo. Como ya he dicho, busca primero los elementos cuyo cambio tenga un mayor impacto en tus visitantes, porque de esta forma conseguirás obtener resultados interesantes.
Si aún así no sabes qué cambiar, algo que nunca defrauda y que resulta muy sencillo de probar es aplicar cambios en los colores de tu página web. Sin ninguna intención de dejar de lado a las personas con discapacidad visual, está claro que los colores de tu web son muy importantes. Mucho más de lo que puedas imaginar a simple vista.
Existen estudios concienzudos sobre teoría del color y la forma en la que los humanos lo percibimos. Lo que a priori no es más que una interpretación de diferentes longitudes de onda diferentes captadas e interpretadas por nuestro sistema visual (ojos, nervio óptico y cerebro), esconde un trasfondo psicológico nada desdeñable.
Por esta razón, te animo a que pruebes a cambiar los colores de tu página web (o de algunos elementos de alto impacto dentro de esta) y estudies cómo cambia la interacción de tus visitantes ante estos cambios. Esto es justo lo que te voy a explicar hoy con un ejemplo completo y real que hemos probado en esta web.
Definición del test A/B
Para probar cualquier cambio en tu página web deberías utilizar un test A/B. De este modo podrás garantizar con datos reales y siguiendo el método científico que los cambios aplicados funcionan mejor (o no) que tu versión actual.
En el ejemplo de hoy, lo que vamos a hacer es probar un cambio en los colores del primer bloque de la página de precios de uno de nuestros productos. Este primer bloque tiene un gran impacto en nuestro negocio, ya que es el encargado de mostrar la tabla de precios a través de la cual las y los visitantes acaban convirtiéndose en clientes y clientas al comprar nuestro producto.
En la siguiente comparativa puedes ver la versión original del primer bloque (a la izquierda) y la versión alternativa (a la derecha) con los diferentes colores de botones y márgenes, y una nueva imagen de fondo:
Para probar los cambios, utilizamos Nelio A/B Testing como nuestro plugin de test A/B de referencia. Lo primero que vamos a hacer es crear un nuevo test A/B de páginas, que es el elemento que vamos a probar.
Esto lo hacemos así porque podemos cambiar los colores a través del propio editor de páginas de WordPress. Si en cualquier otro caso no pudiéramos hacerlo así porque los colores nos vienen a través de una plantilla del tema o de alguna otra forma menos ortodoxa (la experiencia nos dice que en WordPress te puedes encontrar de todo), otra opción que funcionaría siempre sería utilizar un test A/B de estilos CSS, dónde podríamos aplicar los nuevos colores añadiendo nuevas reglas de estilo CSS en la variante.
En la pantalla de edición del test A/B seleccionamos la página base que queremos probar (la página de precios anterior) y creamos una alternativa que editaremos después:
Otro aspecto importante a destacar es seleccionar qué métricas queremos que el test A/B controle para decidir cuál de las dos versiones funciona mejor. Esto lo definimos en la sección de objetivos y acciones de conversión, tal y como puedes ver en la captura de pantalla anterior.
En nuestro caso, definimos cinco objetivos, que nos darán cinco resultados diferentes para el mismo test A/B. Primero definimos el objetivo que mide los clics que se hace en la página a los botones de compra de cualquiera de los planes que hay en la tabla de precios. Luego tenemos 3 objetivos adicionales que miden los clics para cada plan de forma individual. Y por último tenemos un objetivo que mide las compras que se acaban realizando después de ver cada versión de la página bajo test.
Finalmente, nos queda ir a editar la versión alternativa de la página. Esto nos lleva al editor de páginas de WordPress que estemos usando (en nuestro caso, el editor de bloques), tal y como puedes observar en la siguiente captura:
Aquí sólo tenemos que cambiar los colores de los botones de acción de cada una de las tres columnas y del elemento que usamos para crear el margen superior, que irá a juego. Y también cambiamos la imagen de fondo por otra que hemos subido a nuestra biblioteca de medios de WordPress. El resultado que obtenemos es el mismo que habíamos visto en la comparativa.
Una vez lista la página alternativa con los cambios que queremos probar, es hora de volver al test A/B e iniciarlo. Esto hará que el tráfico de visitantes que recibe nuestra página de precios se divida automáticamente en dos. Una parte interactúa con la versión original y la otra mitad hace lo mismo pero con la versión con los colores cambiados.
De este modo, podemos comprobar qué versión de la página funciona mejor respecto a los cinco objetivos de conversión que habíamos definido antes. Por tanto, sólo nos queda esperar a que los resultados nos den la información que queremos saber.
Nelio A/B Testing
Me sorprendió mucho la calidad del plugin, lo fácil que fue configurarlo y el increíble soporte que me dio Nelio. Recomiendo encarecidamente usar Nelio A/B Testing.
Josette Millar
Análisis de los resultados del test A/B
Llegará un momento en el que la propia herramienta de test A/B nos indicará si tenemos o no una versión de la página que es mejor, teniendo en cuenta que los datos sean estadísticamente significativos y no causados por el puro azar.
En el test A/B que hemos descrito antes, los resultados han sido claros. La versión con los nuevos colores funciona peor que lo que ya teníamos. Puedes ver el detalle de los resultados para cada uno de los cinco objetivos definidos en el test en la siguiente galería:
Resultados del test respecto al objetivo de hacer clic en alguno de los planes de la tabla de precios. Los resultados del test respecto al objetivo de hacer clic en el plan básico de la tabla de precios. Resultados del test respecto al objetivo de hacer clic en el plan profesional de la tabla de precios. Los resultados del test respecto al objetivo de hacer clic en el plan enterprise de la tabla de precios. Resultados del test respecto al objetivo de hacer una compra.
De hecho, además de recibir menos clics en los botones de acción, la versión con los nuevos colores claramente consigue menos ventas (casi un 22% menos).
Esto puede parecer una tontería, pero si en vez de probar los cambios con un test A/B los cambias directamente en tu web sin probarlos antes, corres el peligro de introducir cambios que funcionen peor. Este podría haber sido nuestro caso, ya que los cambios que queríamos hacer no han funcionado tan bien como creíamos.
Es posible que te parezca que cambiar los colores en un momento dado sea una solución acertada porque, simplemente, a ti te gustan más los nuevos… has encontrado una nueva paleta de colores que crees que queda mucho mejor desde el punto de vista estilístico y de diseño y optas por usarla directamente. No te confíes. Que a ti te guste más un color que otro importa poco. Lo importante es comprobar de forma cuidadosa si eso realmente es así para tu audiencia y tus visitantes. Y esto sólo lo podrás probar en un entorno controlado a través de un test A/B.
Imagen destacada de Jeremy Thomas en Unsplash.
Deja una respuesta