Prueba dividida con hojas de estilo CSS

La forma más rápida de dividir significativamente un sitio web es realizar cambios audaces en la hoja de estilo en cascada (CSS) dentro de un experimento en todo el sitio.

Por qué las hojas de estilo CSS son importantes

El archivo CSS principal de un sitio web es un punto de referencia central que controla los estilos, posiciones y comportamientos comunes de todos los elementos en todas y cada una de las páginas web.

Dentro del archivo CSS principal se encuentran las configuraciones para todas las fuentes, márgenes, colores, alineaciones y mucho más. Es el archivo más importante en la mayoría de los sitios web con plantillas y puede cambiar drásticamente el aspecto de un sitio web con solo una pequeña edición.

Pruebas divididas en todo el sitio que debe realizar cada vez

Hay muchos elementos comunes en un sitio web que juegan un papel importante en lo fácil que es leer, usar, navegar, resaltar llamadas a la acción y mostrar toda la información clave.

Cuando un usuario está decidiendo si establecer contacto, o quizás realizar una compra en un sitio web, cualquiera de los anteriores podría ser un factor decisivo para detener esa conversión. A continuación, se muestran algunas consideraciones clave para los elementos de todo el sitio:

Botones de llamada a la acción

Todas las conversiones en línea comienzan con un botón, enlace o widget de llamado a la acción (CTA). El tamaño, el color, la redacción e incluso la posición de estas llamadas a la acción hacen una gran diferencia en las tasas de conversión. Ciertos colores de los botones de llamada a la acción, por ejemplo, pueden mezclarse demasiado con el fondo o pueden desanimar al usuario inconscientemente a hacer clic en ellos, dependiendo de lo que perciban como un color negativo. El texto utilizado en enlaces y botones también marca la diferencia. Por ejemplo, simplemente cambiar el botón "ENVIAR" de un formulario para que diga "ENVIAR" produce mejores resultados, ya que "enviar" se percibe como una palabra contundente. Puede leer más sobre esto en la guía definitiva de CTA aquí en VWO.com.

Tamaño de fuente

Este elemento raramente probado juega un papel importante en la accesibilidad para muchos usuarios. Las fuentes suelen ser demasiado pequeñas para que las lean algunos usuarios, por lo que es posible que tengan que usar la función de zoom si la conocen, pero esto no siempre es posible o fácil en los dispositivos móviles. Los tamaños de fuente que son demasiado grandes también pueden ser perjudiciales porque pueden ralentizar la velocidad de lectura, especialmente en las versiones de sitios web compatibles con dispositivos móviles. Lea más sobre la ciencia detrás de los tamaños de fuente aquí en imarc.com.

Tipo de fuente

Una vez más, el estilo de la fuente rara vez se prueba en muchos sitios web, parece que se decide en la fase de diseño inicial del desarrollo y luego se olvida en muchos sitios web. Los diferentes estilos de fuente tienen diferentes niveles de legibilidad. Además, algunas fuentes solo están disponibles en ciertos dispositivos y algunas se muestran realmente mal en ciertos dispositivos en ciertos tamaños sin la rasterización de fuentes. Puede usar una familia de fuentes para usar una serie de fuentes, comenzando con su favorita y bajando a fuentes más simples, como Arial, que siempre están en todos los dispositivos Se pueden incluir nuevas fuentes en un sitio web a través de JavaScript, o un servicio como Fuentes de Google. Puede encontrar más información en esta publicación en TypeWolf.com sobre las diez fuentes web principales de 2016.

Estilo de fuente

Los estilos de fuente como la altura de la línea, el subrayado, la negrita, el color y los márgenes también afectan la accesibilidad y la legibilidad. Es más probable que se haga clic en los enlaces cuando están en azul y subrayados, algo que Google y eBay han probado meticulosamente a lo largo de los años y Google incluso probó los enlaces negros en 2016. Si los enlaces no se destacan claramente como enlaces en su sitio web , luego deben probarse y encontrará que a menudo muestran un mayor compromiso después de ser cambiados.

Colores de fondo

A menudo, los sitios web se crean sobre un fondo blanco, pero si miras tu sitio web de noticias favorito o plataforma de redes sociales, suele ser un ligero tono azul o gris. Los colores de fondo pueden ayudar a que ciertas áreas de la página web se destaquen, como un cuadro de información o un banner de oferta especial. Además, el color de fondo puede reforzar la marca o el tipo de producto mostrado y esta correlación mejora las tasas de conversión, ya que el contenido parece más relevante. Obtenga más información sobre la psicología del color para sitios web en este artículo de Jimdo.com y vea cómo colores como el naranja significan mucho (piense en Amazon) y el azul significa neutralidad y tecnología (piense en Facebook o Twitter).

Reposicionar u ocultar elementos

El archivo CSS controla los márgenes y el relleno de todos los elementos comunes en las páginas web y también le permite eliminar completamente ciertos elementos usando el comando "display: none". Algunas formas en que puede utilizar esto es tratando de reducir el espacio desperdiciado verticalmente, eliminando información innecesaria, alterando el espacio entre llamadas a la acción importantes o experimentando con la eliminación de ciertos bloques de contenido. A veces, menos es mejor en las páginas web (el principio de mantenerlo simple y estúpido) y es una buena práctica ver cuánto se puede eliminar de una página web mientras se mejora la tasa de conversión.

Plataformas para pruebas divididas de archivos CSS en todo el sitio

Es muy importante mantener las plantillas en un sitio web coherentes para cada usuario individual cuando van de una página a otra. Podría ser perjudicial (y ciertamente un experimento deficiente) si solo una página se probara con división A / B mientras que otras permanecían igual.

Se requiere un software especial de prueba dividida para mantener la coherencia de los cambios en el archivo CSS de una página a otra para cada usuario individual. Desafortunadamente, los "Experimentos de contenido" gratuitos de Google Analytics no se adaptan a estos tipos de prueba dividida. A continuación, se muestran algunas herramientas que puede utilizar:

• Optimizador visual de sitios web (VWO) - vwo.com - Hemos descubierto que este es el software de pruebas divididas más fácil de implementar. Maneja todo tipo de pruebas divididas en HTML, CSS o JavaScript y también genera mapas de calor de usuario si es necesario. Las estructuras de precios se pueden encontrar aquí.
• Optimizely - optimizely.com - Esto también maneja todo tipo de pruebas divididas en HTML, CSS o JavaScript y puede hacer algunas pruebas divididas muy avanzadas si es necesario. La información de precios se puede encontrar aquí.

Conclusión

La configuración de una prueba dividida de CSS en todo el sitio es fácil y eficaz, pero es posible que necesite 15 minutos de ayuda de un desarrollador si no está familiarizado con CSS.

Una vez que el sitio web tiene las fuentes, los estilos y las llamadas a la acción correctos, puede concentrarse en las páginas de destino clave del sitio web y otros elementos más específicos. Esto aumenta las tasas de conversión y hace que el sitio web sea mucho más efectivo sin necesidad de tráfico adicional.

Si necesita ayuda con su no dude en contactarnos.