¿Moda infundada o potenciador de conversiones?

¿Moda infundada o potenciador de conversiones?

Los ves en todas partes en estos días: imágenes de gran tamaño utilizadas para tomas de héroes de productos, o una foto grande como imagen de fondo en lugar de espacios en blanco. Usar imágenes como fondo es una de las últimas tendencias en diseño web.

En los últimos 6 meses, esta tendencia ha cobrado gran fuerza. Algunas de las empresas más grandes ya han implementado este estilo de diseño. Si no está seguro de a qué me refiero, aquí hay algunos ejemplos de sitios que actualmente usan el diseño de mega imagen:

KinderCare

Página de inicio de KinderCare

Google analitico

Página de inicio de Google Analytics

Camisas de Criquet (Una silueta de fondo más sutil)

Página de inicio de Criquet

Alto

Nota: Highrise fue uno de los primeros en adoptar este estilo

Alto

Pero, el diseño web de moda no siempre es igual a un diseño web de alta conversión. Por ejemplo, a los diseñadores web les encanta agregar presentaciones de diapositivas a las páginas de inicio, aunque las presentaciones de diapositivas generalmente reducen las tasas de respuesta en comparación con las imágenes estáticas.

Entonces, cuando en WhichTestWon notamos que surgía esta tendencia de imagen como fondo, inmediatamente comenzamos a buscar datos de pruebas divididas A/B de todos los que lo estaban usando. ¿Las imágenes de gran tamaño ayudan o perjudican las tasas de conversión?

por qué es popular

Es fácil ver por qué esto se está convirtiendo en una práctica habitual entre los sitios web, le da a su sitio un aspecto muy sexy.

Un sitio web atractivo es uno de los primeros aspectos de su sitio al que responde su visitante, tanto consciente como inconscientemente. La imagen de fondo, cuando se usa correctamente, es una manera fácil de darle a su sitio una apariencia elegante sin comprometer la propiedad inmobiliaria principal.

Un asesino de conversiones bien conocido es la fotografía de stock, y la tendencia de mega imagen requiere que las empresas inviertan en fotografía original y de calidad. Con un enfoque renovado en cómo la fotografía impacta en las conversiones, la tendencia de mega imágenes ha eliminado uno de los pasos en falso de conversión de mucho tiempo.

Datos de prueba de Mega-Image Split A/B

Hemos investigado algunos excelentes ejemplos de sitios que probaron su antiguo diseño de página contra la página con una mega imagen. Aquí hay algunos ejemplos de nuestra Biblioteca de casos de estudio que lo ayudarán a decidir si probar o no una mega imagen para algunas de sus propias páginas.

Prueba de rediseño de la página de contacto

Dell quería aumentar la tasa de envío en su página «Contáctenos». El equipo había completado innumerables pruebas en el formulario en sí, incluidos los campos de formulario, la inclusión del indicador de paso, el diseño del indicador de paso, etc.

Llegaron al punto en que necesitaban una idea más grande para mover la aguja. Así que decidieron realizar una prueba dividida A/B en un rediseño radical de su diseño de página de destino campeón (ver más abajo).

Variación Old Champion de Dell

Como puede ver, esta página está bien optimizada. Se deben aplaudir los esfuerzos de prueba y optimización de Dell, ya que este fue un diseño que se desarrolló y modificó en varias iteraciones de prueba durante el ya riguroso programa de prueba de Dell.

Como puede ver, la página cumple con muchas de las mejores prácticas de nuestra industria, incluida la ausencia de navegación, viñetas, desplazamiento y un formulario fácil de identificar y completar.

Entonces, en general, ya era una página de formulario muy bien optimizada. Ahora, aquí está el rediseño radical que Dell probó contra él:

Ganador de mega imagen de Dell

Se realizaron algunos cambios muy importantes en esta página, incluida la adición de prosa en lugar de viñetas, el uso de texto blanco ‘knock-out’ sobre un fondo oscuro (algo que no recomendamos), la adición del fondo de la mega imagen y el rediseño del estilo. forma.

Todos estos cambios dieron sus frutos. La variación probada ¡disminuyó las tasas de rebote en esta página en un 27% y aumentó la finalización de formularios en un 36%!

Esta prueba inspiró a Dell a probar otras pruebas de imagen de fondo en otras páginas, en las que han reportado algunos éxitos importantes.

Prueba de imagen de fondo de comercio electrónico francés

Salomon es un sitio de comercio electrónico de snowboard con sede en Francia. El equipo quería renovar el aspecto de lo que era un diseño de sitio de comercio electrónico bastante estándar. Optaron por probar el enfoque de megaimagen y, por supuesto, no quedaron decepcionados.

Primero, aquí hay un vistazo al diseño de control original. Es bastante limpio y convincente.

Variación de control de Salomon

El diseño original usaba colores para establecer la jerarquía visual del contenido, es decir, el contenido con un fondo más claro se encuentra alrededor de las áreas más importantes de la página. (Para aquellos que no lo saben, los estudios de seguimiento ocular han demostrado que el ojo se ve atraído por las áreas más claras).

Aunque esta página utilizó una presentación de diapositivas para presentar varias imágenes en el mismo espacio, no implementaron una rotación automática. (Aunque muchos sitios lo usan, la rotación automática no es una buena práctica desde el punto de vista de la conversión).

Desde una perspectiva de comercialización, la página se centró en permitir que los visitantes navegaran por seis categorías clave, en lugar de mencionar productos específicos o demasiadas categorías.

Esto también es una mejor práctica. En una página de inicio es importante limitar la cantidad de decisiones que debe tomar su cliente. Si se hubieran centrado en el producto con una larga lista de productos, este diseño probablemente no habría sido tan efectivo.

Bien, ahora veamos la versión de rediseño radical que la división del sitio probó contra este control:

Mega imagen ganadora de Salomon

A pesar de que la variación de control se ajusta a muchas de las mejores prácticas (al igual que la prueba de Dell), la nueva imagen de mega fondo marcó una gran diferencia. Esta variación aumentaron las ventas de los compradores franceses en un 39,8 % y las ventas de los compradores globales en un 29,7 %, ambos con una tasa de confianza del 99,9 %.

Además de la megaimagen, otros cambios (más pequeños) incluyeron una llamada a la acción más sucinta y visible, un diseño de navegación superior alterado y el diseño del botón en la cuadrícula de comercialización.

Obviamente, todos estos cambios tenían que tener algún impacto en el cambio de conversión. Entonces, a continuación, el equipo debe ejecutar más iteraciones de prueba, cada una de las cuales se centra en la prueba dividida de un solo elemento, para descubrir qué tuvo el mayor impacto.

Rediseño de la página de inicio de KinderCare

Aunque es posible que no se haya dado cuenta, KinderCare es un sitio muy probado y optimizado para la conversión. Casi todos los aspectos del sitio, desde la cantidad de campos en los formularios de generación de prospectos hasta las rutas de las páginas geodirigidas, han sido probados, con la ayuda de la firma de pruebas ISITE Design.

Entonces, naturalmente, cuando las megaimágenes se convirtieron en la gran novedad, KinderCare decidió probar la idea en su página de inicio utilizando pruebas A/B y multivariadas para crear las imágenes, los botones y los CTA más atractivos.

En primer lugar, aquí está la página de inicio de control, que ya se ha optimizado para la conversión con una serie de pruebas.

Variación de control de KinderCare

Ahora, aquí está la variación del retador de mega-imagen. Como puede ver, eliminó gran parte del espacio en blanco en el fondo, usó orientación geográfica para decirle cuántos centros había a su alrededor, usó cuadros de texto de colores y movió el cuadro de búsqueda a la parte inferior derecha en lugar de a la parte superior izquierda.

Versión ganadora de mega imagen de KinderCare

Esta nueva página de inicio aumentó los clientes potenciales en un 18 %. Al igual que los otros ejemplos de este artículo, muchos elementos cambiaron durante el proceso de diseño. Por lo tanto, no podemos estar seguros de cuánto del aumento general se debió a la megaimagen en comparación con los otros cambios.

Felizmente, KinderCare tiene el volumen de tráfico para ejecutar pruebas de seguimiento más extensas para averiguar qué elementos deben permanecer igual y qué elementos deben modificarse aún más.

Conclusión: Cuatro Reglas de Mega-Imagen

Dato fascinante: todos nuestros ejemplos de casos de estudio anteriores comparten otra tendencia. Las pruebas se realizaron en páginas que ya habían sido optimizadas para la conversión y funcionaban bien. Las pruebas de mega-imagen no fueron un último intento desesperado de salvar una página con mal desempeño. Tampoco se agregaron megaimágenes solo porque ahora están de moda.

En cambio, los equipos probaron megaimágenes como parte de sus programas de optimización en curso.

A medida que cambien las tendencias de diseño web en el futuro, esperamos que estos sitios continúen probando nuevas tendencias y tácticas de diseño para mejorar las conversiones. Si visita alguno de estos sitios hoy, es posible que no vea el diseño que mostramos aquí. De hecho, ¡puede encontrarse en parte de un segmento de prueba para una nueva idea!

Esto debería recordarle que debe volver a visitar las páginas que han visto mejoras importantes en el pasado; ¡siempre hay espacio para la oportunidad!

La divulgación completa, me siento muy cómodo con el rediseño radical seguido de más iteraciones. Algunos de mis compañeros de prueba detestan esta metodología y abogan por un enfoque más de ‘sitio en evolución automática’. En la medida en que no saque conclusiones importantes hasta que pruebe iteraciones futuras, ¡le digo que pruebe!

Ahora, sé que este artículo ha sido muy ‘fondos de mega-imágenes profesionales’. Sin embargo, no recomiendo simplemente implementar ciegamente este esquema de diseño sin probarlo primero. No podemos garantizar que esto ayude a aumentar las conversiones, pero se ha demostrado que tiene un historial probado.

Finalmente, si decide seguir este camino, asegúrese de tener en cuenta las siguientes cuatro reglas:

  1. Su foto debe reducirse de manera receptiva.
  2. Usa una foto única, no una fotografía de archivo.
  3. Asegúrate de que tu foto no cause confusión con el seguimiento ocular.
  4. Diseño de la página de prueba (no puedo enfatizar esto lo suficiente).

Buena suerte actualizando su sitio para mantenerse al día con el panorama de diseño en constante cambio. Como siempre, si tiene un hallazgo que desea compartir, ¡no dude en comentarlo o contactarme directamente!