Cómo y por qué deberías crear tests A/B de Landing Pages de tu e-commerce

Recuerdo, hace mucho tiempo, la primera vez que paseé por la avenida principal de tiendas de Chicago, Michigan Avenue, y alucinar con los escaparates de más de una tienda: la de Nike era un gran homenaje a Michael Jordan, la de juguetes F.A.O Schwarz era un espectacular mini parque de atracciones concentrado…, entrabas y acababas llevándote alguna cosa, ni que fuera por llevarte un recuerdo 😅

El equivalente al escaparate de una tienda física en tu tienda online es tu Landing Page. Una landing page es una página crucial de tu web: en muchos casos es la primera página que verá un visitante (de ahí que se llame «landing page» o, en español, «página de aterrizaje» o también «página de inicio») tras hacer una búsqueda en Google o después de leer un artículo en tu blog.

Muchas veces la gente piensa que la landing page es la página principal de tu web y, por lo tanto, que sólo hay una. Nada más lejos de la realidad. Este tipo de páginas son aquellas páginas que diseñamos como puntos de entrada a nuestra web. Es lo que atrae la atención del visitante, lo mantiene en tu sitio y comienza su experiencia de compra. Así, por ejemplo, en nuestra web de Nelio, para mostrar el producto de Nelio A/B Testing algunas de las páginas de aterrizaje que tenemos son:

• Página principal de Nelio A/B Testing
• Nelio A/B Testing para tu negocio
• Nelio A/B Testing para e-commerce
• etc

Cada una de estas páginas presenta nuestro producto desde una perspectiva ligeramente distinta para dar respuesta a los distintos tipos de perfiles a los que les pueda interesar nuestro producto. Así, por ejemplo, la página de aterrizaje para un e-commerce hace énfasis en características o funcionalidades de webs que tienen un e-commerce. Están creadas con el propósito de convertir a los clientes potenciales. Y es por este motivo que tu propósito principal en estas páginas es optimizar tu tasa de conversión (el porcentaje de visitantes a tu web que realizan una acción específica, ya sea comprar un producto, subscribirse a tu newsletter, realizar una reserva etc.).

En esta entrada veremos las características principales de una landing page y las mejores prácticas para mejorar la tasa de conversión de las mismas.

Características de una landing page de un e-commerce

Como ya has podido ver, una página de aterrizaje de un comercio electrónico es una página web independiente, creada específicamente con fines de marketing. Es la página en la que un visitante «aterriza» cuando hace clic en un enlace, bien sea de un anuncio o resultado del buscador o de una campaña de promoción.

El propósito de una página de aterrizaje es conseguir que los clientes completen una acción determinada, que en el caso de un e-commerce principalmente es la de realizar una compra.

Una de las principales diferencias de una landing page con otras que puedas tener en la web es, por un lado, que está personalizada para que se adecúe a un perfil de visitante determinado: los títulos, textos, imágenes y testimonios son específicos para que ese perfil se anime a comprar. Y, por otro lado, una página de aterrizaje siempre incluye una o más llamadas a la acción.

Por ejemplo, si una persona busca cómo optimizar el ratio de conversión en su e-commerce y tras ver los distintos resultados hace clic en el enlace de Nelio A/B Testing para E-commerce (puedes ver una captura parcial en la imagen anterior), cuando aterriza en la página verá un titular que coincide con la búsqueda, encontrará una imagen de una tienda y un texto y llamada a la acción que invitan a empezar a crear tests A/B. En la misma página, también se explica al visitante que puede optimizar la presentación de los productos en la tienda o las llamadas a la acción y, añade un testimonio para dar más confianza al visitante. A continuación, se añaden unas secciones en las que se explica cómo puedes aumentar las ventas gracias a los datos y, por supuesto, información adicional de porqué puedes confiar en nosotros y otras funcionalidades del producto.

Como puedes ver en el ejemplo anterior, el objetivo de cualquier landing page es que el potencial comprador pueda encontrar exactamente lo que buscaba en cuestión de segundos. El contenido de la página se ajusta a la persona compradora, incluyendo características importantes del producto (otra vez, escritas pensando en una audiencia en específico), añadiendo confianza y facilitando al visitante la compra.

La gran ventaja de tener diferentes páginas de aterrizaje es que puedes dirigirte mucho mejor a clientes específicos. El diseño, la propuesta de valor y la llamada a la acción pueden estar mucho más adaptados a un segmento de mercado.

Por qué y qué tests debo crear en una landing page

Uno puede preguntarse para qué tomarse la molestia de realizar tests A/B en vez de, sencillamente, implementar las características mencionadas anteriormente. Pues muy fácil, una cosa es lo que tu puedas creer que va a mejorar la conversión de tus usuarios y otra, muy distinta, es lo que realmente ocurre en tu web. La única forma que tienes de comprobar qué funciona y qué no, es realizando tests A/B.

De forma resumida, un test A/B consiste en, a partir de una hipótesis de mejora (por ejemplo, una redistribución de la Landing Page para visualizar mejor cierta información relevante), ver si ese cambio funciona mejor que lo que tenías antes. Técnicamente, el test A/B mostrará la versión original y la variante propuesta de la misma página web a diferentes segmentos de visitantes al mismo tiempo y comparará qué variante genera más conversiones.

Esto te garantiza que cualquier cambio que realices en tus páginas, basándote en datos contrastados, tendrá mejor conversión que la que tenías anteriormente.

Ten en cuenta, tal y como te mostraré con algún ejemplo, que los resultados obtenidos en un test A/B pueden ser distintos a los esperados, y es por este motivo tan importante realizarlos. Además, los tests A/B han de realizarse de forma continuada y formar parte de lo que se conoce como el proceso de optimización del ratio de conversión o CRO.

Veamos algunas de las mejores prácticas que puedes empezar a usar en las páginas de aterrizaje de tu web.

Nelio A/B Testing

Pruebas A/B nativas en WordPress

Usa tu editor de páginas favorito en WordPress para crear variaciones y lanza pruebas A/B con solo un par de clics. No se necesita saber nada de programación para que funcione.

Más info

Simplifica la página

Una landing page debería ser sencilla y fácil de seguir. Asegúrate de que el visitante no se siente abrumado por demasiado texto o se pierda y no sepa encontrar el botón de «Comprar ahora».

Algunos consejos para simplificar la página son:

• Muestra titulares concisos y directos
• Muestra llamadas a la acción bien visibles y claras
• Elimina enlaces de navegación que no sean a la página de compra
• Muestra los detalles del producto con viñetas
• Reduce el texto mostrando sólo la información imprescindible

Piensa que una landing page es una página en la que primero se echa una ojeada rápida para decidir si sigues en ella o intentas buscar algo mejor. Evita texto innecesario y limítate a responder aquello que le aporta valor al visitante.

Aunque está muy bien la teoría, ten claro que lo más importante es crear el test A/B que confirme que la simplificación que hayas creado en tu página es, efectivamente, la que prefieren tus visitantes.

Por ejemplo, quisimos simplificar nuestra página principal de Nelio Software y creamos un test A/B de la misma. Nuestro objetivo era el de diseñar una versión alternativa más simple, más visual y concisa, para aumentar la conversión.

En este caso pudimos comprobar que nuestro nuevo diseño, por mucho que tuviera todo el sentido para nosotros, no era una solución mejor para mejorar la conversión. Encontrarás los detalles del test A/B que realizamos en esta entrada.

Pero como puedes ver en la siguiente imagen, tras seguir trabajando en la optimización de la página principal de Nelio, el diseño que tiene en el momento de escribir esta entrada es muy distinto a las propuestas anteriores. Y efectivamente, con un resultado más claro, simplificado y ordenado.

El primer bloque de tu web

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 al buscador de Google en menos de dos segundos.

En el primer bloque no puedes tener toda la información que se muestra en la página de aterrizaje. Para empezar debes ser muy selectivo sobre qué es lo más importante que quieres visualizar. Crear test A/B del primer bloque puede resultar en un gran impacto en la mejora de la conversión de tu web.

Por ejemplo, en la landing page de Nelio A/B Testing en la que se describe el producto y cuyo objetivo de conversión es conseguir que el usuario visite la página de precios del mismo, realizamos un test A/B realizando modificaciones al primer bloque de la página tal y como puedes ver en la siguiente comparativa. 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 pusimos a prueba o su variante.

En la variante cambiamos el título y en vez del nombre del producto, que ya aparece en el logo, añadimos un mensaje que invitara a estimular la curiosidad del visitante: 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». Y por último, cambiamos el texto del botón de acción añadiendo un punto de urgencia: «Empieza ahora». Además, la primera sección de la web ocuparía todo el primer corte. El objetivo era centrarnos en el mensaje.

En este caso, los resultados del test A/B fueron distintos para la versión en inglés que para la castellana. Mientras que en la versión en inglés obtuvimos una mejora de la conversión de más de un 12%, en la versión en castellano no conseguimos sacar datos concluyentes. Para más detalles sobre este experimento, haz clic aquí.

Este ejemplo te demuestra una vez más la importancia de realizar tests A/B de tus páginas de aterrizaje. No puedes saber qué impacto va a tener cualquier cambio en tu web hasta que no lo pruebas.

Las imágenes destacadas

De entre los elementos del primer bloque de una web que más afectan a la percepción del visitante, la imagen destacada que usamos es clave. Al ser lo primero que se ve, si el sentimiento que general al visitante es de rechazo, lo habremos perdido. Además, al compartir tus contenidos en redes sociales, las imágenes destacadas ayudan a captar la atención de los usuarios que reciben el mensaje.

Por este motivo, algo tan fácil como crear un tests A/B de imágenes destacadas puede sacarte una sonrisa en cuanto veas los resultados de conversión. Nosotros en la landing page de Nelio Content, cuyo objetivo de conversión es que nuestros usuarios acaben visitando la página de precios, realizamos un test A/B de la imagen destacada de la misma.

En esta página, el primer bloque contiene una imagen destacada que muestra un peculiar hombre sonriente con un post-it en la frente y una frondosa barba, delante de un ordenador. En el monitor del ordenador vemos el calendario editorial de Nelio Content. Decidimos crear un test A/B con dos variantes adicionales: la primera alternativa es una imagen más convencional que muestra un equipo de gente trabajando delante de un portátil. En la segunda opción mostramos una captura del calendario editorial, a la que le habíamos aplicado un efecto blur para que el texto que va encima se leyera mejor.

En este caso, ¿tuvimos alguna imagen destacada ganadora?

¿Podrá el señor barbudo ganar a las otras dos variantes de imagen destacada? Pues curiosamente hubo una imagen ganadora. Aquí tienes la página de resultados del test completa:

En concreto, la imagen con el grupo de gente delante del ordenador tuvo una conversión un 25% mejor que la del señor barbudo con casi un 90% de confianza en la versión española y un porcentaje de mejora que roza el 15% en la versión ganadora en inglés, ahora con una fiabilidad estadística más alta si cabe, superando el 95%.

Como ves, es muy difícil intuir qué funcionará mejor si no has creado un test A/B que corrobore tus hipótesis. Encontrarás más detalles sobre este test aquí.

Y de la misma forma que probamos distintas imágenes destacadas, otro tipo de test interesante a probar es si es mejor cambiar una imagen por un vídeo. En esta entrada te explicamos más detalles sobre este experimento.

Los botones de acción

Otro tipo de test que deberías probar en una landing page es probar distintos estilos de botones de acción de la misma. Puedes realizar pruebas sobe el tamaño del botón, el estilo del mismo y su texto.

Nosotros, siguiendo algunas de las teorías sobre qué color es mejor para un botón de acción, decidimos hacer un test A/B sobre el color de los botones en la landing page de Nelio Content. En este caso, realizamos un test de estilos CSS con Nelio A/B Testing.

Aquí tienes como quedan los botones de acción vistos desde el editor de estilos CSS de cada variante del test A/B que realizamos. Primero tienes la versión original, con los botones en naranja. Las otras dos variantes incluyen el CSS para poner los botones en verde y rojo, respectivamente:

En este caso, los resultados que obtuvimos (puedes ver aquí más detalles sobre este experimento) fueron que el color verde es el que mejor nos ha funcionado para nuestra audiencia en inglés de las páginas de Nelio Content. Sin embargo, para nuestra audiencia en español, no hemos sido capaces de encontrar un color que funcione mejor que el que ya teníamos.

¿Cómo creo estos tests A/B?

La creación de un test A/B es muy fácil si utilizas una herramienta de A/B Testing. En particular, si usas Nelio A/B Testing, al ser un plugin totalmente integrado y desarrollado para WordPress, podrás crear las variantes de cualquier test de manera tan fácil como realizar modificaciones a una página con el editor de bloques.

Además, como ya has visto en alguna de las imágenes anteriores, también tienes los resultados en el propio WordPress y no tienes ninguna necesidad de tener conocimientos de programación ni utilizar una herramienta externa a WordPress. 

En esta guía completa te explico cómo crear tests A/B con el editor de bloques de WordPress.

Empieza a mejorar la conversión de tu e-commerce

Mejorar la conversión en tu e-commerce es tan o más crucial que aumentar el número de visitas a tu web. Las páginas de aterrizaje son las páginas a las que llegan tus visitantes y conseguir que no te abandonen a la primera de cambio y que conviertan debería ser tu principal prioridad. Ya has visto que todas ellas tienen algunas características comunes pero sólo si creas tests A/B sabrás como mejorarlas. Hemos mostrado algunos ejemplos, pero en vez de copiarlos, realiza tus propias hipótesis y empieza a experimentar.

Nuestra experiencia creando tests A/B de forma continuada nos ha permitido ir incrementando las ventas con muy poco esfuerzo. ¿A qué esperas para mejorar la conversión en tu web?

Imagen destacada de Igor Miske en Unsplash.