Como um header que reaparece ao rolar para cima aumentou a receita por usuário em 15,6% para a Joseph Joseph

Cliente: Joseph Joseph Agência: Proof3 Página: Header em todo o site Dispositivos: Desktop e tablet
  • +15,6%Receita por usuário
  • +6,3%Conversão de compra
  • +2,9%Adição ao carrinho

Introdução:

Joseph Joseph é uma marca de design de Londres conhecida por produtos inovadores e econômicos em espaço para cozinha e casa, vendidos por varejistas do mundo todo e em sua própria loja online.

A Joseph Joseph trabalha com a agência de CRO para eCommerce do Reino Unido Proof3, que usa a Mida para rodar experimentos em todo o site.

O problema:

O site da Joseph Joseph usava um header permanentemente fixo. Ele mantinha a busca e a navegação sempre ao alcance, mas também ocupava espaço da tela durante toda a experiência de compra, empurrando as imagens dos produtos e o conteúdo mais para baixo na página.

O desafio era dar mais visibilidade aos produtos sem deixar de manter a navegação fácil de acessar sempre que os compradores precisassem.

Insights e abordagem:

Em vez de testar uma única alternativa, a Proof3 usou o teste A/B/n da Mida para comparar o header existente com duas abordagens diferentes ao mesmo tempo, todas nas mesmas URLs:

  • Controle: o header existente, permanentemente fixo.
  • Variante 1 (Oculto): um header não fixo que sai da tela junto com a rolagem da página.
  • Variante 2 (Dinâmico): um header que desaparece quando os compradores rolam para baixo e reaparece assim que rolam para cima.

1. Devolver a tela aos produtos e a navegação sob demanda.

Controle: página inicial da Joseph Joseph com a barra de busca e a navegação em um cabeçalho fixo no topo da tela
Controle: o header fica fixo no topo da tela o tempo todo
Variante 1: a mesma página inicial rolada um pouco para baixo, com o cabeçalho fora da tela
Variante 1 (Oculto): o header sai da tela com a rolagem e permanece fora de vista
Variante 2: mais abaixo na página inicial, o cabeçalho voltou à tela depois que o comprador rolou para cima
Variante 2 (Dinâmico): o header se esconde ao rolar para baixo e volta deslizando ao rolar para cima

O header dinâmico buscava combinar o melhor dos dois mundos: o espaço extra de navegação de um header não fixo, com a conveniência de uma navegação que volta quando os clientes querem.

2. Veja a Variante 2 em ação.

Animação do site da Joseph Joseph em que o cabeçalho se esconde ao rolar para baixo e reaparece ao rolar para cima

Conforme os compradores navegam pela página para baixo, o header sai do caminho. No momento em que rolam para cima, ele volta, então a busca e a navegação estão sempre a um gesto de distância.

O experimento:

A Proof3 criou as três experiências com o editor de código da Mida e as rodou como um teste A/B/n em todo o site para visitantes de desktop e tablet, dividindo o tráfego igualmente entre o controle e as duas variantes. O teste durou 19 dias, com conversão de compra, adição ao carrinho e receita por usuário como métricas principais.

Recursos da Mida utilizados:

  • Teste A/B/n (várias variantes nas mesmas URLs)
  • Editor de código HTML / JS / CSS
  • Segmentação em todo o site com segmentação por dispositivo (desktop e tablet)

Os resultados:

Após 19 dias, a Variante 2 (Dinâmica), o cabeçalho que reaparece ao rolar a página para cima, estava à frente do controle com cabeçalho sempre fixo em todas as métricas principais:

  • Receita por usuário: +15,55%
  • Conversão de compra: +6,27%
  • Adição ao carrinho: +2,88%

Uma análise mais detalhada: por que o cabeçalho não fixo perdeu.

Testar três experiências lado a lado revelou algo que um simples teste A/B não teria mostrado. O cabeçalho totalmente não fixo (Variante 1) liberou o mesmo espaço, mas teve desempenho pior que o controle, com adição ao carrinho em queda de 15,10% e conversão de compra em queda de 1,86%.

Os compradores claramente ainda dependiam do cabeçalho. Removê-lo por completo tornou a navegação mais difícil de acessar, enquanto trazê-lo de volta ao rolar para cima o manteve disponível exatamente no momento em que os clientes o procuravam.

Principais aprendizados:

O contexto importa mais do que a visibilidade. A navegação não precisa estar na tela o tempo todo, mas precisa aparecer no momento em que o comprador quer usá-la. Um cabeçalho que responde à direção da rolagem oferece espaço para navegar e acesso fácil.

Teste mais de uma alternativa. Executar um teste A/B/n na Mida permitiu à Proof3 comparar uma abordagem de "removê-lo" e outra de "torná-lo mais inteligente" em um único experimento, mostrando não só que o cabeçalho fixo poderia ser melhorado, mas qual direção funcionou.

Experimente a Mida para testes A/B leves

Se você quer otimizar a performance do seu site e simplificar seu processo de testes A/B, a Mida é a solução ideal.

Com seu script leve e foco em performance, a Mida garante que seu site continue rápido e responsivo, ao mesmo tempo que oferece recursos poderosos de teste A/B. Conheça os benefícios da Mida integrando nosso script leve ao seu site hoje mesmo.

---

Comece grátis na Mida: até 100.000 monthly tracked users.

A plataforma de teste A/B para quem
se importa com a performance do site

A Mida é 10X mais rápida do que qualquer coisa que você já considerou. Experimente você mesmo.

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