Cómo un header que reaparece al hacer scroll hacia arriba aumentó un 15,6% los ingresos por usuario de Joseph Joseph

Cliente: Joseph Joseph Agencia: Proof3 Página: Header de todo el sitio Dispositivos: Escritorio y tablet
  • +15,6%Ingresos por usuario
  • +6,3%Conversión de compra
  • +2,9%Añadir a la cesta

Introducción:

Joseph Joseph es una marca de diseño con sede en Londres, conocida por sus innovadores productos de cocina y hogar que ahorran espacio, vendidos a través de minoristas de todo el mundo y en su propia tienda online.

Joseph Joseph trabaja con Proof3, una agencia británica de CRO para eCommerce que usa Mida para ejecutar experimentos en todo el sitio.

El problema:

El sitio de Joseph Joseph usaba un header fijo de forma permanente. Mantenía la búsqueda y la navegación siempre al alcance, pero también ocupaba espacio de pantalla durante toda la experiencia de compra, empujando las imágenes de producto y el contenido más abajo en la página.

El reto era dar más visibilidad a los productos sin perder la facilidad de acceso a la navegación cuando los compradores la necesitaran.

Conclusiones y enfoque:

En lugar de probar una sola alternativa, Proof3 usó los tests A/B/n de Mida para comparar el header existente con dos enfoques distintos al mismo tiempo, todo en las mismas URLs:

  • Control: el header existente, fijo de forma permanente.
  • Variante 1 (Oculto): un header no fijo que se desplaza con la página.
  • Variante 2 (Dinámico): un header que desaparece cuando los compradores hacen scroll hacia abajo y reaparece en cuanto hacen scroll hacia arriba.

1. Devuelve la pantalla a los productos y la navegación, cuando se necesite.

Control: página de inicio de Joseph Joseph con la barra de búsqueda y la navegación en un header fijo en la parte superior de la pantalla
Control: el header está fijo en la parte superior de la pantalla en todo momento
Variante 1: la misma página de inicio con un poco de scroll hacia abajo, con el header fuera de la pantalla
Variante 1 (Oculto): el header se desplaza con la página y queda fuera de la vista
Variante 2: más abajo en la página de inicio, el header vuelve a aparecer tras hacer scroll hacia arriba el comprador
Variante 2 (Dinámico): el header se oculta al hacer scroll hacia abajo y vuelve a aparecer al hacer scroll hacia arriba

El header dinámico buscaba combinar lo mejor de ambas opciones: el espacio extra para navegar de un header no fijo, con la comodidad de una navegación que vuelve cuando los clientes la quieren.

2. Mira la Variante 2 en acción.

Animación del sitio de Joseph Joseph donde el header se oculta al hacer scroll hacia abajo y reaparece al hacer scroll hacia arriba

Mientras los compradores avanzan por la página, el header se aparta. En el momento en que hacen scroll hacia arriba, vuelve, de modo que la búsqueda y la navegación están siempre a un gesto de distancia.

El experimento:

Proof3 creó las tres experiencias con el editor de código de Mida y las ejecutó como un test A/B/n en todo el sitio para visitantes de escritorio y tablet, repartiendo el tráfico a partes iguales entre el control y las dos variantes. El test duró 19 días, con la conversión de compra, añadir a la cesta y los ingresos por usuario como métricas clave.

Funciones de Mida utilizadas:

  • Tests A/B/n (varias variantes en las mismas URLs)
  • Editor de código HTML / JS / CSS
  • Segmentación en todo el sitio con segmentación por dispositivo (escritorio y tablet)

Los resultados:

Tras 19 días, la Variante 2 (Dinámica), el header que reaparece al hacer scroll hacia arriba, superó al control con header fijo permanente en todas las métricas clave:

  • Ingresos por usuario: +15,55%
  • Conversión de compra: +6,27%
  • Añadir a la cesta: +2,88%

Una mirada más de cerca: por qué perdió el header no fijo.

Probar tres experiencias en paralelo reveló algo que un simple test A/B habría pasado por alto. El header totalmente no fijo (Variante 1) liberaba el mismo espacio, pero rindió peor que el control, con un descenso del 15,10% en añadir a la cesta y del 1,86% en la conversión de compra.

Está claro que los compradores seguían apoyándose en el header. Eliminarlo por completo dificultaba el acceso a la navegación, mientras que hacerlo reaparecer al hacer scroll hacia arriba lo mantenía disponible justo en el momento en que los clientes lo buscaban.

Conclusiones clave:

El contexto importa más que la visibilidad. La navegación no necesita estar siempre en pantalla, pero sí debe aparecer en el momento en que el comprador la quiere. Un header que responde a la dirección del scroll ofrece espacio para explorar y acceso fácil a la vez.

Prueba más de una alternativa. Ejecutar un test A/B/n en Mida permitió a Proof3 comparar un enfoque de "quitarlo" y otro de "hacerlo más inteligente" en un solo experimento, y mostrar no solo que el header fijo se podía mejorar, sino qué dirección funcionaba.

Prueba Mida para hacer tests A/B ligeros

Si quieres optimizar el rendimiento de tu sitio web y agilizar tu proceso de tests A/B, Mida es la solución ideal.

Gracias a su script ligero y su enfoque en el rendimiento, Mida garantiza que tu sitio web siga siendo rápido y ágil, a la vez que ofrece potentes capacidades de tests A/B. Descubre las ventajas de Mida integrando hoy mismo nuestro script ligero en tu sitio web.

---

Empieza gratis con Mida: hasta 100.000 usuarios rastreados al mes.

La plataforma de tests A/B para quienes
se preocupan por el rendimiento de su sitio web

Mida es 10 veces más rápido que cualquier otra cosa que hayas considerado. Pruébalo tú mismo.

Gráfico decorativoGráfico decorativoGráfico decorativoGráfico decorativo