Una de las cosas que más ilusión hacen cuando tienes un blog y escribes en él con asiduidad es recibir comentarios de los lectores. Pero para que esto pase, el contenido que escribes debe ser interesante y el formulario para escribir comentarios ha de estar visible y ser lo suficientemente atractivo para que el visitante lo rellene y envíe.
En esta entrada que pertenece a la serie del test del mes vamos a intentar resaltar el formulario de comentarios de nuestro blog dándole un pequeño rediseño para ver si funciona mejor que la versión actual.
Como siempre, vamos a probar los cambios utilizando la técnica del test A/B. Es la mejor manera de ver con datos reales de los visitantes de tu web si los cambios que haces funcionan o no.
Mejorando el diseño del formulario de comentarios de WordPress
Nuestro formulario de comentarios es bastante simple. Por defecto WordPress añade un campo para introducir la página web del visitante que comenta, pero nosotros creemos que no ese campo no aporta nada. Al contrario, lo único que atrae es comentarios de spam de bots que quieren conseguir un enlace a toda costa. Por este motivo lo hemos quitado de nuestro formulario original.
En la siguiente comparativa puedes ver la versión original de nuestro formulario de comentarios del blog y la variante con los cambios que hemos hecho. Recuerda deslizar el tirador que aparece en el centro a un lado y a otro para ver las dos versiones:
Básicamente, hemos hecho tres cambios en el formulario de comentarios:
- Hemos añadido un par de emojis en el título para resaltar la zona de comentarios y animar a los visitantes a escribir. Si te fijas, ahora parece que estás saludando y animando a que escriban con el emoji del saludo y la mano escribiendo. A la gente le gustan los emojis. Veremos si esto ayuda a tener más comentarios.
- El texto legal en el que explicamos dónde se almacenan los comentarios al rellenar la información lo hemos reducido de tamaño. Tiene que estar, pero no queremos darle tanta relevancia.
- El botón de envío del formulario lo pasamos a un color naranja que resalta mucho más. Como ya vimos anteriormente, los colores son importantes.
Ahora que ya tenemos el diseño nuevo preparado, lo que tenemos que hacer es probarlo. Vamos a ello.
Creando un test A/B de estilos CSS
Para probar este cambio de diseño en el formulario de comentarios de nuestro blog en WordPress lo más sencillo es utilizar un test A/B de reglas CSS. La versión A de nuestra web es la que tiene el formulario original, mientras que la versión B contendrá las reglas CSS adicionales para conseguir los tres cambios en el diseño del formulario que hemos anticipado antes.
Con Nelio A/B Testing, creamos un nuevo test A/B de CSS y lo que veremos es la siguiente pantalla con el editor del test:
Le ponemos un nombre al test («Highlight comments form», en nuestro caso) y a la variante («Redesigned comment form»). También le podemos añadir una descripción al test en el campo correspondiente de la barra lateral derecha. En la captura anterior puedes ver la descripción que añadimos, que sirve de referencia para cualquier usuario que vaya a ver el test en el futuro.
También hemos reducido el ámbito de aplicación del test a URLs que contengan https://neliosoftware.com/blog/, que son justamente las entradas de nuestro blog, donde tenemos el formulario de comentarios.
Como acción de conversión hemos establecido el clic en el botón de envío del formulario. Cada vez que un visitante haga clic en ese botón, contaremos una conversión en el test para la variante que ese visitante esté viendo.
Antes de terminar, tenemos que ir a editar la variante B del test. Pasamos el ratón por encima de esta variante y nos aparecerá la opción para editarla. Una vez hacemos clic, se nos abre un editor de CSS con previsualización tal y como puedes ver en la siguiente captura:
Como puedes ver, en la barra lateral izquierda tenemos el editor de CSS en el que puedes escribir las reglas concretas que hacen los cambios en el diseño que vimos antes. Además, en la parte derecha puedes navegar por tu web para ver el resultado de estos cambios. Con seis simples reglas tenemos todo para que el formulario de comentarios de nuestra web coja el nuevo diseño.
Cuando terminamos, guardamos y volvemos al editor del test A/B para iniciarlo. Ahora ya sólo nos queda esperar a que los visitantes vayan pasando por nuestras entradas. Cada visitante verá la versión original del formulario o la versión con el rediseño. Esto lo hace Nelio A/B Testing por si solo, sin que tú tengas que hacer nada.
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.
Analizando los resultados del test A/B
Hemos dejado el test funcionando durante unas seis semanas, analizando a casi 20,000 visitantes de nuestro blog (una muestra poblacional nada desdeñable). Puedes ver los resultados completos del test A/B en la siguiente captura:
El número de conversiones total que el test ha recibido no es espectacular. En ese tiempo nuestro blog en inglés ha recibido 27 comentarios (por eso hay 27 conversiones en los resultados del test).
Pero lo que si hay que destacar es que la variante con el rediseño del formulario de comentarios ha conseguido doblar el número de conversiones de la versión original. Por tanto, es la opción ganadora del test A/B, con un índice de confianza estadístico suficientemente algo.
Como ves, pequeños cambios en los diseños, que se pueden conseguir con pocas reglas CSS, pueden tener un impacto directo en los resultados de nuestra web. Hemos aplicado esta variante en nuestra web añadiendo el CSS adicional en nuestro tema.
Un diseño más trabajado fomenta la interacción
El diseño es clave para modificar el comportamiento de los visitantes de nuestra web. Dedicar esfuerzos a conseguir un diseño que funcione mejor que el actual no tiene porqué requerir muchos recursos. Aquí hemos visto que con unas pocas reglas CSS simples podemos hacer cambios que nos den resultados rápidamente.
Probar cambios en el diseño de nuestra web ha de ser algo que hagamos con mucho cuidado. Por eso hemos utilizado un test A/B. Gracias a esto, podemos comprobar con datos reales de nuestros visitantes si los cambios funcionan o no. De lo contrario, no sabremos si hemos escogido un camino correcto o estamos dando vueltas sin sentido.
Imagen destacada de Jason Leung en Unsplash.
Deja una respuesta