Si no sabe qué cambiar, intente cambiar los colores de su sitio web

Uno de los mayores problemas a la hora de mejorar el rendimiento de tu web es no saber qué cambios hacer. Esto nos ha pasado a todos en algún momento. En tales casos, lo correcto es centrarse en aquellas partes de la web que son más críticas. Con esto me refiero a las secciones de su página que llaman más la atención o son más importantes para su modelo de negocio.

Por ejemplo, si tu objetivo es que quienes visiten tu sitio web acaben rellenando un formulario, céntrate en el formulario en sí: hazlo más destacado y simplízalo todo lo posible para que sea fácil de rellenar y enviar. Como he dicho antes, busca primero los elementos que, al ser modificados, puedan tener un mayor impacto en tus visitantes, ya que así obtendrás resultados interesantes más rápido.

Si aún no sabes qué cambiar, algo que nunca decepciona y que es muy fácil de probar es aplicar cambios en los colores de tu página web. Sin ánimo de dejar de lado a los invidentes, está claro que los colores de tu web son muy importantes. Mucho más de lo que puedas imaginar.

Hay varios estudios sobre la teoría del color y la forma en que los humanos lo percibimos. Lo que puede parecer solo una interpretación de las diferentes longitudes de onda captadas por nuestro sistema visual (ojos, nervio óptico y cerebro), esconde un enorme trasfondo psicológico.

Por eso, te animo a que pruebes a cambiar los colores de tu página web (o de algunos elementos de alto impacto dentro de ella) y estudies cómo evoluciona la interacción de tus visitantes ante estos cambios. Esto es justo lo que os voy a explicar hoy con un completo y real ejemplo que hemos probado en esta web.

Definición de la prueba A/B

Para probar cualquier cambio en su sitio web, debe usar una prueba A/B. Al hacer esto puedes 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 pliegue de la página de precios de Nelio A/B Testing. Este primer pliegue tiene un gran impacto en nuestro negocio, ya que es el encargado de mostrar la tabla de precios a través de la cual nuestros visitantes terminan convirtiéndose en clientes al adquirir el plugin.

En la siguiente comparativa podéis ver la versión original del primer pliegue (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, usamos Nelio A/B Testing como nuestro complemento de prueba 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 testear.

Hacemos esto porque podemos cambiar los colores a través del propio editor de páginas de WordPress. Si no pudiéramos hacerlo así porque los colores vienen a través de una plantilla de tema o de alguna otra forma menos ortodoxa –la experiencia nos dice que los estilos de color se pueden definir de varias formas en WordPress–, otra opción que siempre funcionaría sería use una prueba A/B de estilos CSS, donde podríamos aplicar los nuevos colores agregando nuevas reglas de estilo CSS en la variante.

En la pantalla de edición de la prueba A/B, seleccionamos la página base que queremos probar (nuestra página de precios) y creamos una nueva variante, que editaremos más adelante:

Otro aspecto importante a destacar es definir qué métricas queremos que rastree la herramienta de pruebas A/B para luego saber cuál de las dos versiones funcionó mejor. Lo definimos en la sección de acciones y objetivos de conversión, como puedes ver en la captura de pantalla anterior.

En nuestro caso, definimos cinco objetivos, que nos darán cinco resultados diferentes para una misma prueba A/B. Primero definimos el objetivo que mide la cantidad de clics en los botones de compra de cualquiera de los planes que están en la tabla de precios. Luego tenemos 3 objetivos adicionales que miden los clics para cada plan individualmente. Y finalmente tenemos un objetivo que mide el número real de compras que se realizan después de ver cada versión de la página bajo prueba.

Finalmente, editamos la versión alternativa de la página. Esto nos lleva al editor de páginas de WordPress que estamos usando (en nuestro caso, el editor de bloques), como puedes ver en la siguiente captura de pantalla:

Aquí solo 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. Y también cambiamos la imagen de fondo por otra que hemos subido a nuestra mediateca de WordPress.

Una vez que la página alternativa con los cambios que queremos probar está lista, es hora de volver a la pantalla de edición de la prueba A/B e iniciarla. Esto dividirá automáticamente el tráfico a nuestra página de precios en dos. La mitad de nuestros visitantes interactuarán con la versión original, la otra mitad verá la variante.

De esta forma, podemos comprobar qué versión de la página funciona mejor frente a los cinco objetivos de conversión. Ahora solo queda esperar a que los resultados nos den la información que buscamos.

Análisis de los resultados de la prueba.

Eventualmente, si una variante es mejor que la otra, la propia herramienta de prueba A/B nos lo dirá. En el test A/B que hemos descrito antes, los resultados han sido claros. La versión con los nuevos colores es peor que la que ya teníamos. Puedes ver el detalle de los resultados para cada uno de los cinco objetivos definidos en la prueba en la siguiente galería:

La variante no solo obtuvo menos clics en los botones de acción, sino que también generó menos ventas (casi un 22 % menos).

Esto puede parecer una tontería, pero si en lugar de probar los cambios con un test A/B los cambias directamente en tu web sin probarlos antes, corres el riesgo de introducir cambios que pueden funcionar peor. Este podría haber sido nuestro caso, ya que los cambios que queríamos hacer no han funcionado tan bien como pensábamos.

Es posible que cambiar los colores en un momento dado sea una buena solución, porque simplemente te gustan más los nuevos. Has encontrado una nueva paleta de colores que crees que es mucho mejor desde un punto de vista estilístico y eliges usarla directamente. Pero esto es un gran error. El hecho de que te guste más un color que otro no es importante. Lo importante es verificar cuidadosamente si este es realmente el caso para su audiencia y sus visitantes. Y puedes hacerlo en un entorno controlado a través de un test A/B.

Imagen destacada de Jeremy Thomas en Unsplash.