Dé más estilo a su formulario de comentarios de WordPress

Una de las cosas más interesantes que puede suceder cuando tienes un blog y escribir regularmente en él es recibir comentarios de los lectores. Pero para que esto suceda, el contenido que escribe debe ser interesante, y el formulario de envío de comentarios debe ser lo suficientemente visible y atractivo para que el visitante lo complete y lo envíe. En esta publicación perteneciente a la serie de pruebas de la serie, intentaremos resaltar el formulario de comentarios de nuestro blog, dándole un poco de rediseño para ver si funciona mejor que la versión actual.
Como siempre, probaremos los cambios utilizando la técnica de prueba A/B. Es la mejor manera de ver con los datos reales de los visitantes de su sitio si los cambios que realiza funcionan o no. Mejorar el diseño del formulario de comentarios de WordPress Nuestro formulario de comentarios es bastante simple. Por defecto, WordPress agrega un campo para ingresar el sitio web del visitante de comentarios, pero creemos que este campo no agrega ningún valor. Por el contrario, lo único que atrae son los comentarios de spam de los robots que desean obtener un enlace a cualquier precio. Por esta razón, lo ha eliminado de nuestra forma original.
En la próxima comparación, puede ver la versión original de nuestro formulario de comentarios de blog y la variante con los cambios que realizamos. No olvide deslizar el mango que aparece en el centro al otro para ver las dos versiones:


Antes y después de la forma de reenvío del formulario de comentarios de WordPress. Deslice el separador para ver las diferencias. Básicamente, hice tres cambios en el formulario de comentarios:
Agregué algunas emociones al título para resaltar el área de comentarios y alentar a los visitantes a escribir. Parece que ahora firmamos con su mano y los alentamos a escribir con el emoji de saludo y escritura a mano. Gente como el emoji. Veremos si esto lo ayuda a tener más comentarios. El tema legal en el que explicamos dónde se almacenan los comentarios para completar la información utiliza una fuente más pequeña. Tiene que estar allí por razones legales, pero no queremos darle tanta relevancia.
Convertimos el botón para enviar el formulario a un color naranja que se destaca. Como vimos anteriormente, los colores son importantes.
Ahora que tenemos el nuevo diseño listo, lo que debemos hacer es probarlo.
Creación de una prueba A/B de los estilos CSS para probar este cambio de diseño en nuestro formulario de comentarios de blog de WordPress, lo más fácil es usar una prueba A/B de las reglas CSS. La versión de nuestro sitio es el formulario original, mientras que la versión B contendrá las reglas CSS adicionales para realizar los tres cambios en el diseño del formulario que hemos anticipado anteriormente. Con las pruebas Nelio A/B, creamos una nueva prueba A/B. La siguiente imagen muestra la pantalla de edición de dicha prueba:
Crear una prueba A/B para probar un conjunto de reglas CSS adicionales es muy fácil con las pruebas Nelio A/B. Llamamos a la prueba (“forma de resaltar comentarios”, en nuestro caso) y la variante (“Formulario de comentarios rediseñado”). También podemos agregar una descripción de prueba al campo apropiado en la barra lateral derecha. En la captura de pantalla anterior, puede ver la descripción que agregué, que sirve como referencia para que cualquier usuario vea la prueba en el futuro. También redujimos la esfera de prueba a URL que contiene https://neliosoftware.com/ blog/, para que La prueba solo se aplica a las publicaciones en nuestro blog. Como acción de conversión, colocamos al clicílo 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 la prueba de la versión que ve el visitante. Antes de terminar, debemos pasar a editar la B de la prueba. Colocamos el mouse sobre esta variante y aparecerá la opción de edición. Una vez que hagamos clic en él, un editor de CSS abre con una vista previa, como puede ver en la siguiente captura de pantalla:

Con las pruebas Nelio A/B, agregando reglas CSS a una variante de una prueba A/B y una vista previa del sitio para ver cómo parece que es muy fácil. Como puede ver, en la barra del lado izquierdo tenemos el editor CSS donde puede escribir las reglas específicas que hacen los cambios de diseño que hemos visto antes. Además, en el lado derecho puede explorar su sitio para obtener una vista previa del resultado de estos cambios. Solo necesita seis reglas CSS simples para rediseñar nuestro formulario de comentarios. Cuando terminemos, guarde y vuelva al editor de pruebas A/B para comenzar. Ahora estamos esperando que los visitantes visiten nuestras publicaciones. Cada visitante verá la versión original del formulario o la versión de rediseño. Esto se realiza mediante pruebas Nelio A/B por sí misma, sin que tenga que hacer nada. Analizar los resultados de la prueba A/B La prueba se ejecuta durante aproximadamente seis semanas, analizando casi 20,000 visitantes a nuestro blog (una hermosa muestra de población). Puede ver los resultados completos de la prueba A/B en la siguiente captura de pantalla:

Los resultados de la prueba A/B de las reglas CSS. El número total de conversiones que recibió la prueba no es espectacular. En ese momento, nuestro blog recibió 27 comentarios (por lo que hay 27 conversiones en los resultados de las pruebas). Pero lo que debe tenerse en cuenta es que la variante con el rediseño del formulario de comentarios ha logrado duplicar el número de conversiones de la versión original. Por lo tanto, es la variante ganadora de la prueba A/B, con un alto valor de confianza estadística.

Como puede ver, los pequeños cambios de diseño, que se pueden hacer con algunas reglas CSS, pueden tener un impacto directo en los resultados de su sitio. Hemos aplicado esta variante en nuestro sitio, agregando las reglas CSS adicionales a nuestro tema.Un diseño más elaborado fomenta el diseño de interacción es la clave para modificar el comportamiento de los visitantes de nuestro sitio.Obtener un diseño que funcione mejor que el actual no debe consumir recursos.Aquí vimos que con algunas reglas CSS simples podemos hacer cambios que nos dan resultados rápidos.Aplicar cambios en el diseño de nuestro sitio web es algo que debemos hacer con cuidado.Por eso usé una prueba A/B.Debido a esta técnica, podemos consultar con datos reales de nuestros visitantes si cambia o no.De lo contrario, no sabremos si hemos elegido una forma correcta de mejorar o volver.