Depois de ler os artigos sobre cada tipo de menu, muita gente ainda trava no último passo: então, o que minha loja deveria realmente usar? Essa sensação é normal. A teoria sobre Tab Bars, Mega Menus ou Slide Menus só se torna útil quando você a aplica aos seus próprios números.
Este artigo apresenta um processo de seleção de menu com 5 passos que você consegue percorrer em mais ou menos uma tarde. Não existe uma fórmula única que sirva para toda loja, mas existe uma forma de trabalhar que ajuda você a decidir com base em dados reais, em vez de no instinto. Cheguei a essa abordagem depois de tocar algumas lojas pequenas e errar o palpite algumas vezes.
Passo 1: Olhe a sua própria divisão entre celular e desktop
Não confie no discurso de que “todo mundo diz que celular é a maioria”. Abra os seus próprios números e olhe.
Entre no Google Analytics (categoria Tech / Device) ou no Shopify Analytics (Online store sessions by device type). Puxe os últimos 30 a 90 dias para ter uma amostra grande o suficiente. Você vai ver a porcentagem de sessões vindas de celulares versus computadores.
Esse número decide para qual tela você projeta primeiro. Se 80% dos visitantes chegam pelo celular, a experiência no celular é o palco principal, e o desktop é secundário. Se você vende B2B e a maioria dos seus clientes usa computador no escritório, a história se inverte.
Olhe também a taxa de conversão dividida por dispositivo, não só o tráfego. Segundo o Baymard Institute, o abandono de carrinho no celular fica em torno de 80%, mais alto que no desktop (cerca de 66%). Se a sua loja tem muitos visitantes no celular mas a conversão pelo celular é baixa, uma navegação difícil de usar pode ser parte do motivo.
Passo 2: Conte suas categorias de nível 1 e nível 2
Abra a seção de Navegação no Shopify e conte de verdade.
- Categorias de nível 1: os maiores grupos. Numa loja de moda, por exemplo: “Feminino”, “Masculino”, “Acessórios”, “Promoção”.
- Categorias de nível 2: as subdivisões dentro de cada categoria de nível 1. “Feminino” pode incluir “Blusas”, “Calças”, “Vestidos”, “Calçados”.
Esse número estreita suas opções. Uma loja com apenas 3 a 4 categorias de nível 1 e quase nenhuma categoria de nível 2 não precisa de um Mega Menu — o Mega Menu existe para acomodar estruturas com vários níveis. Por outro lado, uma loja com 8 categorias de nível 1, cada uma com 5 a 6 subdivisões, faria o cliente rolar a tela até a mão doer se tudo fosse enfiado num único Slide Menu.
Uma regra grosseira que costumo usar: quanto mais plana e enxuta for a sua estrutura, mais você deve favorecer um menu sempre visível (como um Tab Bar na parte de baixo). Quanto mais profunda e ramificada for a sua estrutura, mais você precisa de um menu que agrupe e expanda (um Mega Menu no desktop, um Slide Menu no celular).
Passo 3: Identifique as 3 a 5 páginas que os clientes mais precisam alcançar
Este é o passo mais frequentemente pulado, e ainda assim ele importa.
Volte ao Google Analytics ou ao Shopify Analytics e abra o relatório de páginas mais vistas (Top pages / Landing pages). Anote os 3 a 5 destinos que os clientes realmente precisam. Eles costumam ser: a página inicial, algumas coleções importantes, a página de busca, o carrinho e, às vezes, uma página de rastreamento de pedido ou de contato.
Por que só 3 a 5? Porque esse é o número razoável de “atalhos” que você consegue colocar nos pontos mais fáceis de tocar. Um Tab Bar na parte de baixo da tela do celular geralmente só comporta 4 a 5 itens antes de ficar apertado. Se você identificar corretamente os 4 destinos mais importantes, já sabe exatamente o que colocar no Tab Bar.
Seja honesto neste passo. O que você quer que os clientes vejam (digamos, a página da história da sua marca) não é necessariamente o que eles precisam para comprar. Siga os dados de comportamento, não os desejos.
Passo 4: Escolha a configuração do seu menu com base em quatro fatores
Agora combine os três passos acima com os quatro fatores discutidos nos artigos anteriores: o dispositivo dominante, a profundidade das categorias, o número de destinos importantes e as particularidades da sua categoria de produto. Confronte com as tabelas comparativas daqueles artigos. Abaixo, algumas combinações comuns.
| Sua situação | Configuração sugerida |
|---|---|
| Visitantes majoritariamente no celular, estrutura plana, 4 destinos claros | Tab Bar na parte de baixo + Slide Menu para o resto |
| Muitas categorias, muitas subdivisões, tráfego relevante no desktop | Mega Menu no desktop + Slide Menu no celular |
| Necessidade de uma ação em destaque (chat, agendamento, ligação) | FAB para essa ação, combinado com o menu principal |
| Catálogo com muitas imagens e pouco texto (cosméticos, alimentos) | Visual Grid Menu |
Uma observação sobre como as pessoas seguram o celular. Segundo a pesquisa de Steven Hoober, cerca de metade dos usuários segura o celular com uma mão só, fazendo a maior parte do trabalho com o polegar. A zona de fácil alcance do polegar fica na metade inferior da tela. É por isso que um Tab Bar na parte de baixo costuma ser mais fácil de tocar do que um hambúrguer no canto superior — o canto de cima cai na zona do “não dá bem para alcançar”.
Este também é o momento de pensar na navegação escondida. O Nielsen Norman Group mediu e descobriu que menus sempre visíveis são descobertos e usados cerca de 1,5 vez mais do que menus escondidos atrás de um ícone de hambúrguer. Isso não quer dizer que o hambúrguer esteja errado — ele continua útil para acomodar itens secundários — quer dizer: não esconda atrás dele os seus destinos mais importantes.
Passo 5: Instale o Navi+, monte um protótipo e veja num dispositivo real
A esta altura você já tem uma hipótese. O que falta é construí-la e ver com os próprios olhos.
O Navi+ permite montar Tab Bars, Mega Menus, Slide Menus, FABs e Grid Menus sem código — só arrastar e soltar — e configurar celular e desktop separadamente. Você monta exatamente a configuração que escolheu no Passo 4, um estilo por dispositivo, e então liga o modo de pré-visualização. Como o menu é criado de forma independente do tema, ele continua intacto mesmo que você troque de tema depois.
O ponto que quero reforçar: veja num celular real, não só num emulador.
O emulador do seu navegador dá o tamanho de tela certo, mas não consegue reproduzir como um dedo de verdade toca um botão — se o botão é pequeno demais, ou se o Tab Bar fica coberto pelo teclado ou pela barra de navegação do celular. Alguns problemas só aparecem quando você pega o telefone e tenta comprar algo como um cliente de verdade.
Enquanto pré-visualiza, fique de olho na velocidade também. O Google define o limite de “bom” para os Core Web Vitals em LCP abaixo de 2,5 segundos, INP abaixo de 200 milissegundos e CLS abaixo de 0,1. Um menu pesado pode fazer a página engasgar ou deslocar o layout. O Navi+ é otimizado para limitar o impacto nessas métricas, mas mesmo assim vale verificar na sua própria loja.
Por fim, não tenha medo de ajustar. A configuração que você escolheu no Passo 4 é um ponto de partida, não um veredito. Adicionar ou remover uma ferramenta de navegação não é nada de mais. Monte um protótipo, olhe os números depois de algumas semanas e então ajuste. É assim que esse processo realmente compensa.
Em resumo, um bom processo de seleção de menu não começa pelo tipo de menu que você prefere, mas pelos números: a sua divisão entre celular e desktop, a profundidade das categorias e os destinos que os clientes realmente precisam. Os quatro fatores mais um protótipo num dispositivo real vão lhe dar uma resposta mais próxima da sua loja do que qualquer conselho genérico.
Este artigo faz parte do guia maior sobre Como escolher o tipo de menu certo para sua loja Shopify.