El primer bloque de tu web es la sección más importante. Todos los visitantes que aterricen en esa página es lo primero que verán. De ello depende que sigan navegando por tu web, hagan scroll para ver más o huyan despavoridos a cualquier otro rincón de Internet.
Cuando hablamos de los heatmaps, ya vimos que el primer corte de la web es aquel que recibe más relevancia en la mayoría de los casos. Tanto en el heatmap como en el scrollmap, la afluencia de actividad en el primer bloque de la web es muy clara.
Muchos visitantes sólo verán el primer corte, no harán scroll. Optimizar lo que mostramos allí es de vital importancia para mejorar el ratio de conversión. Es por esto que este mes vamos a hablar de la optimización del primer bloque de una página de aterrizaje (landing) de nuestra web.
La hipótesis: resaltar el mensaje
En Nelio tenemos dos plugins premium para WordPress: Nelio Content y Nelio A/B Testing. Nos vamos a centrar en el segundo, que también es el que usamos para aplicar los tests de esta sección de nuestra web. Y hoy vamos a analizar la página principal de Nelio A/B Testing.
El objetivo de esta página es enseñar el producto a posibles usuarios de forma que acaben visitando la página de precios. Cuantos más visitantes pasen de esta landing a la página de precios, más posibilidades tendremos de que compren el producto, que es lo que queremos.
Los datos que tenemos gracias a nuestra herramienta de analítica de referencia nos dicen que esta página ya funciona suficientemente bien. Para ser más específico, sabemos que la mitad de los visitantes que llegan a nuestra página acaban pasando a la página de precios. Nada mal, ¿verdad? Ahora bien, ¿podemos mejorarlo?
Si te fijas en la captura de pantalla anterior, eso es lo que se ve en el primer corte de la web, es decir, en el primer renderizado de la página sin hacer scroll. Como título principal tenemos el nombre del producto: Nelio A/B Testing. Luego tenemos un subtítulo que intenta crear un sentimiento de urgencia por empezar a hacer tests en la web.
Sin embargo, si le damos una vuelta al texto e intentamos dirigir el mensaje a crear curiosidad en vez de a crear urgencia, es posible que podamos mejorar estos números que justo te comentaba. Además, para evitar distracciones podemos hacer que el primer bloque de la web ocupe todo el primer corte y así evitar ver parcialmente la segunda sección de la página, cosa que no aporta nada. El que quiera, siempre puede hacer scroll y ver más cosas.
Por tanto, la hipótesis del test que vamos a hacer es que si resaltamos el mensaje dentro del primer corte de nuestra web, la conversión ha de mejorar. ¿Acertaremos?
Creando una variante del primer bloque visible
Lo primero que vamos a hacer es ir a Nelio A/B Testing y crear un nuevo test A/B de páginas. Te animo desde aquí a que hagas lo mismo con tu página principal y que compartas tus resultados con nosotros en los comentarios. Puedes hacer este test de forma gratuita con sólo instalar Nelio A/B Testing desde el directorio de plugins de WordPress.
Ahora hemos de ponerle nombre al test y a la variante que vamos a crear. El objetivo del test es que se visite la página de precios, por lo que añadimos como acción de conversión la visita a esta página. Configurar todo esto te va a llevar menos de un minuto. Ahora vamos a editar la variante para hacer los cambios.
Al editar la variante vamos al editor de páginas que tengamos configurado por defecto en WordPress. Nosotros usamos el editor de bloques Gutenberg. Yo te recomiendo que utilices este o cualquier otro con el que te sientas cómodo.
En la siguiente comparativa puedes ver los cambios que hemos hecho en el primer bloque de la web. Ten en cuenta que si pasas el ratón por encima del bloque puedes mover el tirador hacia derecha o izquierda para ver la versión original de la página que vamos a poner a prueba o su variante.
En la variante hemos cambiado el título y en vez del nombre del producto, que ya aparece en el logo, hemos añadido un mensaje que invite a estimular la curiosidad del visitante. Queremos que piense qué cambios en su web pueden funcionar mejor. ¿Un color diferente? ¿Otra forma para los botones? ¿Un emplazamiento alternativo para todo ello?
Siguiendo con esto, cambiamos el subtítulo por algo que indique que tenemos la solución para saciar su curiosidad: «crea y prueba diferentes versiones de tu WordPress para descubrir lo que más le gusta a tu audiencia y mejora tus conversiones».
Por último, el texto del botón de acción también ha cambiado para, aquí sí, usar un texto que añada un punto de urgencia: «Empieza ahora». Además, como ya anticipamos antes, ahora la primera sección de la web ocupa todo el primer corte. Hemos cumplido el objetivo de centrarnos en el mensaje.
Crear el test A/B y editar la variante de nuestra página es algo que no nos lleva más que unos pocos minutos. Lo que podemos sacar a cambio es mucho mayor que el esfuerzo dedicado, eso esta claro.
Por último, como tenemos la web en Español e Inglés, hacemos lo propio con la página en inglés. Puedes ver los cambios en la variación de la página en la siguiente comparativa:
Una vez lo tenemos todo preparado, sólo tenemos que iniciar los dos tests de páginas, uno por cada idioma, y esperar a que empiecen a llegar los resultados. Recuerda que Nelio A/B Testing ya se encarga de dividir tu tráfico entre las diferentes variantes a probar y de ir contabilizando las visitas y conversiones. No es necesario que hagas nada. Sólo tienes que esperar.
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: ¿Han funcionado los cambios?
Empecemos con los resultados del test para la página de Nelio A/B Testing en inglés. Puedes ver todo el detalle en la captura siguiente:
Este test ha estado funcionando 26 días, y se han analizado casi 1000 visitantes en total. Como ves, en este tiempo el test ha podido identificar que la variante de la página con los cambios es la ganadora, aún cuando la página que hemos testeado no es la que más tráfico recibe precisamente.
Como ya sabíamos, la versión original tiene un ratio de conversión que en este caso está en el 54%. Esto cuadra con los datos de la herramienta de analítica que he comentado anteriormente. En cambio, la variante ha conseguido más de un 60% de conversión, lo que supone una mejora del 12,3%.
Los datos son estadísticamente significativos, con un valor de confianza superior al 95%. Por tanto, podemos confirmar que la variante con los nuevos textos y que ocupa todo el primer corte de la web es mejor que lo que teníamos hasta ahora. Se cumple nuestra hipótesis. Hemos de estar contentos, pues.
Aplicar la variante ganadora en la web
Una vez sabemos que tenemos una versión alternativa de nuestra página que es mejor que la actual, hemos de hacer que esta variante pase a ser la que todos los visitantes vean. Para ello primero hemos de parar el test. Luego, vamos al apartado donde tenemos los resultados de la variante y pulsamos el botón para aplicarla.
Esto lo que hace es sustituir la página que teníamos por la que hemos encontrado que funciona mejor. Así de fácil, con sólo un clic. Y si te equivocas, no pasa nada. Siempre puedes volver a aplicar la original y volver al estado anterior.
Y el test en español, ¿qué?
Me alegra que me hagas esta pregunta (como si no fuera yo el que la ha escrito ?). Tienes los resultados a continuación:
Después de los 26 días, el test no ha llegado a ninguna conclusión debido al bajo tráfico de la página bajo test. El número de visitantes es tan bajo que poner esta página a prueba no tenía sentido. Por tanto, la única conclusión que podemos sacar de aquí es que nuestra audiencia en español no tiene demasiado interés en hacer tests A/B.
Esto es interesante, ya que en una misma web podemos tener audiencias muy diferentes. En este caso, el hecho diferenciador no es sólo el idioma, sino el hecho de que en países anglosajones este tipo de técnicas de optimización de la conversión estén más extendidas y maduras.
Nos queda hacer mucha más formación en español sobre el tema para, poco a poco, intentar ir ganando más tráfico y despertando más interés en el público hispanohablante.
Y hasta aquí el test de este mes. No te olvides de pasarte regularmente por nuestra web de cara a conocer las novedades que te esperan en los próximos meses.
Imagen destacada de Matthew T Rader on Unsplash.
Deja una respuesta