O Que os Visitantes Veem Antes de Rolar
O conceito "acima da dobra" — emprestado do layout de jornais, onde o conteúdo mais importante aparecia na metade superior da primeira página dobrada — continua sendo um dos princípios mais confiáveis no design web. Os utilizadores agem com base no que veem imediatamente. O conteúdo que requer rolagem ou interação para ser revelado recebe dramaticamente menos atenção e envolvimento do que o conteúdo visível na chegada.
Aplicado à navegação, isso significa: os elementos de navegação imediatamente visíveis quando um visitante chega à sua loja — sem rolar, sem abrir um menu, sem qualquer interação — são os que influenciam de forma confiável cada visitante. Os elementos de navegação que requerem abrir um menu, rolar além de um cabeçalho ou interagir com um menu suspenso alcançam apenas o subconjunto de visitantes motivados o suficiente para dar esses passos adicionais.
Para visitantes móveis — que representam a maioria do tráfego da maioria das lojas — a superfície de navegação acima da dobra é ainda mais restrita do que no desktop. Um ecrã móvel padrão mostra um cabeçalho com um logótipo e um ícone hamburger. É só isso. Toda a capacidade de navegação visível acima da dobra é um único ícone que, quando tocado, abre um menu. O custo desta limitação é que cada ação de navegação requer pelo menos um toque adicional antes que o visitante possa começar a navegar.
«Acompanhámos quais elementos de navegação eram usados por novos visitantes versus visitantes recorrentes. Os novos visitantes usavam o menu hamburger numa fração da taxa dos visitantes recorrentes — dependiam quase inteiramente da Tab Bar. A Tab Bar estava visível acima da dobra; o menu completo exigia uma interação. O que estava imediatamente visível orientava o comportamento. O que exigia esforço era maioritariamente ignorado.»
— Um cliente Navi+, marca lifestyle multi-categoria
O Inventário de Navegação Acima da Dobra
Antes de fazer alterações, vale a pena auditar exatamente quais elementos de navegação estão visíveis acima da dobra na sua loja agora mesmo. Isso significa visualizar a sua própria loja num dispositivo móvel representativo — não numa janela do browser com ferramentas de desenvolvimento mostrando um viewport móvel, mas num telefone real — e anotar exatamente qual navegação está presente sem qualquer rolagem ou interação.
Para a maioria das configurações padrão de temas Shopify, este inventário é mínimo: uma barra de cabeçalho com um logótipo, um ícone hamburger e um ícone de carrinho. Três elementos, dos quais dois são ícones. O hamburger abre um menu. O carrinho abre o carrinho. Não há navegação direta para nenhuma categoria de produto específica, nenhum atalho para promoções atuais, nenhum caminho para os destinos mais importantes da loja.
Esta é a navegação que molda a maioria das experiências de primeira sessão na maioria das lojas Shopify. É a linha de base a partir da qual qualquer melhoria deve começar — e quase qualquer melhoria a partir desta linha de base gerará um aumento mensurável no engagement de navegação.
Aproveitando ao Máximo a Superfície de Navegação Visível
A Tab Bar muda completamente o cálculo de navegação acima da dobra. Uma Tab Bar fixa na parte inferior é visível em todas as páginas, em todas as profundidades de rolagem, sem qualquer interação. Ela adiciona até cinco destinos de navegação à superfície visível acima da dobra — cinco caminhos específicos que um visitante pode tomar com um único toque, sem precisar abrir nenhum menu antes.
Escolher o que vai nesses cinco slots da Tab Bar é uma decisão estratégica que deve ser informada pelas mesmas análises que orientam qualquer priorização de navegação: quais destinos geram mais receita por visitante? Quais categorias têm as maiores taxas de conversão? Quais são as primeiras ações de navegação mais comuns de visitantes que acabam por fazer uma compra?
As respostas a estas perguntas devem determinar diretamente a alocação dos slots da Tab Bar. Se "Promoções" gera a maior taxa de conversão entre visitantes de primeira sessão, merece um slot na Tab Bar. Se "Novidades" é a segunda página mais visitada após a homepage, ela pertence à Tab Bar. Os cinco destinos de navegação mais valiosos da loja devem ser imediatamente visíveis, imediatamente acessíveis, sem qualquer interação preliminar.
| Elemento de navegação | Visível sem interação | Acessível com um toque |
|---|---|---|
| Menu hamburger | Sim — ícone visível | Não — abre menu, depois requer segundo toque |
| Conteúdo do menu hamburger | Não — oculto até o menu ser aberto | Não — requer no mínimo duas interações |
| Slot Tab Bar (Navi+) | Sim — sempre visível na parte inferior do ecrã | Sim — um toque de qualquer lugar |
| FAB (Navi+) | Sim — botão flutuante persistente | Sim — um toque de qualquer lugar |
O Efeito Composto da Visibilidade Imediata
Os elementos de navegação imediatamente visíveis não são apenas mais utilizados do que os elementos ocultos — são também utilizados mais cedo na sessão. Um visitante que usa a navegação nos primeiros 10 segundos após chegar tem muito menos probabilidade de sair do que um visitante que passa esses 10 segundos a tentar orientar-se na homepage sem um caminho claro. O engagement de navegação mais precoce correlaciona-se fortemente com sessões mais aprofundadas e taxas de compra mais elevadas.
Tornar os seus destinos de navegação mais importantes imediatamente visíveis — através de uma Tab Bar, um cabeçalho sticky bem configurado ou um FAB — desloca efetivamente o engagement de navegação para mais cedo na sessão típica, o que se traduz em sessões mais longas, maior exposição a categorias e taxas de conversão mais elevadas. O Navi+ instala-se em minutos e disponibiliza esta mudança para qualquer loja Shopify sem modificações no tema.
Experimente grátis — sem código, sem desenvolvedor
Instale em minutos no Shopify, WordPress ou qualquer site.