Menus de Navegação: Por que seus visitantes não conseguem encontrar seu pricing e como consertar

Você lançou sua landing page. O produto é sólido. Mas visitantes chegam, olham sua nav e não conseguem encontrar pricing. Saem antes de chegarem à página onde você realmente converte.

Navegação é o sistema de orientação do seu site. Erre e até conteúdo bom fica invisível. Acerte e visitantes fluem naturalmente até a página que você quer. Este guia desmonta os padrões de menu que funcionam e quando usar cada um.

O que um menu de navegação realmente é

Um menu nav é uma lista estruturada de links , o mapa visual do seu site. Diz aos visitantes o que está disponível e como chegar lá. Os padrões são bem conhecidos: barras superiores, hamburgers, dropdowns, headers fixos, mega menus.

O princípio por trás de um bom nav é reconhecimento em vez de memorização. Visitantes não deveriam ter que lembrar onde as coisas estão; o menu deveria tornar óbvio através de labels claros.

"Navegação eficaz não é apenas sobre organização; é antecipar necessidades do usuário e criar caminhos que o levem exatamente aonde precisa." , Steve Krug

Navegação não é uma lista de links. É a espinha dorsal de como visitantes vivenciam seu produto.

Por que a escolha de menu importa

O menu que você escolhe afeta diretamente se visitantes encontram sua oferta.

Descoberta. Bom nav expõe coisas que visitantes não sabiam procurar: features, integrações, tiers de pricing.

Menos pensamento. Hick's Law: quanto mais opções, mais tempo a decisão leva. O menu certo divide complexidade em chunks que visitantes conseguem escanear.

Mobile. Mais da metade do seu tráfego está em celular. Um menu que funciona em monitor de 27" e quebra em tela de 6" é um vazamento.

SEO. Mecanismos de busca usam estrutura de nav para entender seu site. Menus lógicos ajudam Google a indexar você corretamente.

Como escolher o tipo certo de menu

É sobre ajuste, não moda. Combine o padrão ao seu site.

1. Barra de navegação no topo

Barra horizontal no topo. 5-7 links principais. O padrão para a maioria das landing pages e sites SaaS.

• Quando: Estrutura de site rasa (pouquíssimas seções principais).
• Faça: Labels curtos , uma ou duas palavras. Links mais importantes no começo ou fim.
• Não faça: Amontoar 12 itens. Se tem tantos, precisa agrupar ou usar outro padrão.

2. Menu hamburger

O ícone de três linhas. Escondido até ser tocado.

• Quando: Mobile, quase sempre. Pode funcionar em desktop para apps minimalistas.
• Faça: Alvo de toque de no mínimo 44x44px.
• Não faça: Torne sua única nav em desktop. Escondido = ignorado.

3. Menu dropdown

Passe o mouse ou clique em um pai para expandir opções.

• Quando: Poucas categorias com listas curtas de subcategorias.
• Faça: Adicione atraso ao passar mouse para o menu não desaparecer durante movimento. Torne acessível por teclado.
• Não faça: Aninhe dropdowns dentro de dropdowns. Ninguém ganha.

4. Menu fixo

Fica preso enquanto visitantes scrollam.

• Quando: Páginas longas, listagens de e-commerce, sites com muito conteúdo.
• Faça: Afinei-o no scroll para economizar espaço.
• Não faça: Torne tão alto que ocupa 15%+ da tela.

5. Mega menu

Painel expansível grande com colunas de opções, às vezes com imagens.

• Quando: Muitas categorias , e-commerce, notícias, portfólios grandes.
• Faça: Agrupe com headers claros. Use peso e tamanho para guiar o olho.
• Não faça: Apenas jogue cada link lá. Hierarquia importa mais que cobertura.

Jeitos comuns que builders quebram isto

Labels vagos

• O erro: "Soluções", "Recursos", "Produtos" , palavras que significam tudo e nada.
• O conserto: Seja específico. "Pricing", "Para agências", "Docs de API".

Ignorar a zona do polegar

• O erro: Nav móvel crítico no topo-esquerda. Lugar mais difícil para polegares.
• O conserto: Mova ações primárias para o fundo ou meio da tela em mobile.

Sem estado ativo

• O erro: Visitantes não conseguem saber que página estão.
• O conserto: Deixe em negrito, mude cor, ou sublinhe a seção atual na nav.

Como produtos reais fazem

Google

Google usa um ícone limpo de grid para alternar entre apps. Toque, veja tudo disponível , Gmail, Drive, Calendar , sem poluir a interface de busca.

Spotify

Spotify eliminou o hamburger e se mudou para nav fixa no fundo para Home, Search, Library. Resultado: cada ação principal fica a um toque do polegar.

YouTube (desktop)

A barra superior fixa do YouTube mantém o campo de busca sempre alcançável. Busca é a ação primária. Deixá-la sempre visível é uma escolha deliberada.

Princípios relacionados

Nav é parte de um sistema maior. Estes moldam como a sua se sente:

Recursos e leitura adicional

Material Design: Menus

Diretrizes oficiais do Google para comportamento e estilo de menus.

NNGroup: Navigation Research

Estudos aprofundados sobre como usuários interagem com diferentes estilos de menu.

Perguntas frequentes