Toda loja começa do mesmo ponto: algumas dezenas de produtos, uma ideia e muita incerteza. Nessa fase, a navegação de uma loja nova não precisa ser complexa. Precisa estar correta e ser suficiente. O difícil não é fazer o menu parecer “cheio” — é se conter para não construir um sistema de navegação maior do que a loja realmente precisa.
Este artigo é sobre a primeira fase: uma loja nova com catálogo pequeno, abaixo de 50 produtos. Vou descrever como ela se parece, o que a navegação realmente exige, alguns erros recorrentes e uma configuração sugerida para começar.
Como é essa fase
O catálogo é pequeno, muitas vezes apenas alguns grupos de produtos. Às vezes, a loja inteira cabe dentro de “todos os produtos” sem precisar de categorias ainda.
O tráfego ainda é baixo e irregular. Os visitantes chegam de alguns posts, alguns compartilhamentos ou de um círculo de amigos. De algumas dezenas a algumas centenas de visualizações por dia é normal.
Mais importante: você ainda está experimentando. Testando quais itens vendem, testando preços, testando como fotografar, testando como receber o cliente. Tudo ainda está mudando. Uma navegação rígida, montada com cuidado desde o início, vira um peso que você precisa corrigir toda vez que muda de direção.
Em outras palavras, este é um momento que pede flexibilidade mais do que completude.
O que a navegação de uma loja nova precisa
A resposta curta: simples e clara. O cliente precisa encontrar o caminho para comprar em poucos segundos — ele não precisa de um diagrama de menu bonito.
No desktop, um cabeçalho organizado com 3 a 5 itens é suficiente. Por exemplo: Produtos, Sobre, Contato. As pessoas costumam ler a página da esquerda para a direita, de cima para baixo, então os itens mais importantes devem ficar à esquerda e permanecer visíveis, não escondidos.
Você não precisa de um mega menu nessa fase. Um mega menu é indicado para lojas com muitas subcategorias que precisam se espalhar de uma vez. Quando o catálogo ainda é pequeno, um mega menu vai parecer vazio e desajeitado: você abre e vê apenas uma ou duas linhas flutuando dentro de uma moldura grande. Isso faz a loja parecer maior do que realmente é, e o cliente não ganha nada com isso.
Não esqueça do mobile
Esta é a parte mais facilmente negligenciada e, ainda assim, a mais importante. No e-commerce de hoje, a maioria das visitas às lojas vem de celulares — muitos números do setor colocam esse índice em torno de 70 a 80%. Em outras palavras, a maioria dos seus clientes está olhando para a sua loja por uma tela pequena que cabe na mão.
A forma como as pessoas seguram o celular decide o que é fácil de tocar. A pesquisa de Steven Hoober (publicada na Smashing Magazine) constatou que a maioria das ações no mobile é feita com o polegar, e a área mais fácil de alcançar é a metade inferior da tela — muitas vezes chamada de “zona do polegar”. O canto superior é o lugar mais difícil de alcançar.
É por isso que uma barra de navegação posicionada na parte de baixo da tela (uma Tab Bar) faz sentido: ela fica bem ao alcance do polegar. O cliente não precisa esticar o dedo até o canto superior para encontrar o menu.
Quanto ao menu hambúrguer — aquele ícone de três linhas que esconde toda a navegação atrás dele — o Nielsen Norman Group comprovou que ele torna os itens mais difíceis de notar e mais lentos de encontrar em comparação com mantê-los visíveis. Para uma loja pequena com apenas alguns itens principais, não há motivo para escondê-los. Uma tab bar básica, que mantém alguns botões importantes visíveis, atende ao cliente muito melhor.
Dois erros comuns
Eu vi esses dois erros com tanta frequência que quase os considero um rito de passagem para quem está começando.
Erro um: deixar o menu complexo cedo demais. O lojista olha para lojas grandes, vê menus de vários níveis e quer que a sua loja pareça “profissional” logo de cara. Então cria categorias para coisas das quais ainda não tem produtos, ou divide um grupo de seis itens em quatro subcategorias só para o menu parecer cheio.
O resultado é o cliente clicando em “Acessórios” e encontrando exatamente dois itens, clicando em “Novidades” e encontrando vazio. Essa experiência é muito pior do que uma categoria limpa de “Todos os Produtos”. Um catálogo pequeno não é uma fraqueza para esconder — agrupar as coisas, na verdade, facilita a compra.
Erro dois: se preocupar só com o desktop e esquecer o mobile. As pessoas costumam montar a loja no computador, admirá-la numa tela grande e depois esquecem de conferir no celular. O menu no desktop parece ótimo, mas no mobile os itens se amontoam, os botões se apertam ou a navegação some atrás de um ícone pequeno no canto.
A correção é simples: toda vez que você ajustar o menu, abra a loja no seu próprio celular e tente comprar algo como um cliente de verdade. Se a sua mão precisar se esticar ou você errar o toque algumas vezes, seus clientes também vão errar — e eles têm menos paciência do que você.
Uma configuração sugerida com o Navi+
O Navi+ permite configurar desktop e mobile separadamente, então você não precisa forçar um único design nos dois. Nessa fase, sugiro manter realmente o mínimo.
No desktop, monte um cabeçalho simples com 3 a 5 itens. Escolha exatamente as páginas de que o cliente precisa: a categoria principal de produtos, a página sobre, a página de contato. Deixe o mega menu para quando o catálogo realmente crescer.
No mobile, use uma Tab Bar básica de 4 itens. Um layout seguro que os compradores já conhecem:
- Início — voltar para a página inicial
- Loja — ir para a lista de produtos
- Carrinho — o carrinho, sempre ao alcance
- Conta — conta ou login
Esses quatro botões cobrem quase tudo o que o cliente precisa fazer. Colocar o carrinho logo na barra inferior também tem um ponto prático: segundo o Baymard Institute, a taxa média de abandono de carrinho no e-commerce gira em torno de 70%, então qualquer coisa que ajude o cliente a voltar para o carrinho e seguir adiante vale a pena. Um botão de Carrinho sempre visível e sempre fácil de tocar é um pequeno passo nessa direção.
Mais uma coisa que vale acompanhar desde o início é a velocidade. O Google define os limites de “bom” para o Core Web Vitals: LCP abaixo de 2,5 segundos, INP abaixo de 200 milissegundos e CLS abaixo de 0,1. O menu é algo que carrega cedo e aparece em todas as páginas, então um menu pesado pode arrastar a loja inteira junto com ele. O Navi+ foi feito para não atrapalhar essas métricas — esse é um bom hábito para manter desde cedo, porque corrigir depois é sempre mais difícil.
Na fase de loja nova, um menu simples que o cliente consegue usar de imediato sempre vence um menu chique que você precisa ficar consertando.
Como o Navi+ é arrastar e soltar e não exige código, você consegue montar o layout acima em poucos minutos e ajustá-lo a qualquer momento conforme o catálogo cresce. O menu também permanece no lugar quando você troca de tema, então os experimentos de design da fase inicial não vão quebrar a navegação que você acabou de montar.
Comece pequeno. Quando a loja crescer, fazer a navegação crescer junto não será tarde demais.
Este artigo faz parte do guia mais amplo sobre Navegação em cada fase do crescimento de uma loja — de 10 a 10.000 produtos.