Sites institucionais

Menus e navegação: a arquitetura que faz o visitante encontrar (e comprar)

A maioria das discussões sobre "redesenhar o site" começa pelo logótipo e pelas cores. Quase nenhuma começa pelo menu. Mal — o menu é a única coisa que toda a gente que cai no teu site usa, em todas as páginas, a toda a hora. Cores escolhem-se uma vez. O menu é interrogado milhares de vezes por mês: "onde vejo preços?", "como peço orçamento?", "isto serve para mim?". Cada clique que falha é tráfego que pagaste para ir embora.

Este guia mostra como decidir a navegação do site da tua PME em Portugal — quando precisas de mega menu, quando um simples chega, o que muda no telemóvel, e que pequenos detalhes (breadcrumbs, sticky, ordem) movem a agulha da conversão sem mexer no resto.

A regra de ouro: 7 itens, no máximo

Se o teu menu principal tem 12 itens, o teu site não tem foco — tens medo de não mostrar alguma coisa. Resultado prático: o visitante não escolhe nada.

Limites a respeitar:

  1. Menu principal: 5 a 7 itens. Acima disso, o olho parte ao meio e ninguém lê.
  2. Cada item: 1 a 2 palavras. "Serviços", "Preços", "Sobre" batem "Os nossos serviços de consultoria".
  3. CTA primário: botão destacado, separado dos itens normais (ex.: "Pedir orçamento" a cor de marca).

A regra simples: se hesitas em cortar um item, ele vai para o rodapé ou para uma página de sumário. Não para o menu principal.

Mega menu vs menu simples: como decidir

Não é gosto, é matemática. Olha para o número de páginas e a sua hierarquia.

  • Menu simples (links diretos): site com até ~15 páginas. PME de serviços, advogados, consultores, clínicas pequenas. Tudo cabe em 5-7 entradas.
  • Menu dropdown (1 nível): 15 a 40 páginas, agrupáveis em 3-5 categorias. Sites de prestadores com várias especialidades (uma clínica com 6 áreas).
  • Mega menu (painel com colunas): 40+ páginas e múltiplas dimensões (por serviço, por sector, por país). Lojas online médias, agências com matriz de serviços, sites multilingue extensos.

Erro clássico: pôr mega menu num site de 8 páginas porque "fica profissional". Fica pesado e diz ao Google que tens muita coisa importante quando, na verdade, tens pouca — o sinal de relevância dilui-se.

Se vendes na mesma loja por categoria de produto e por marca, podes precisar de mega menu na loja online — ver estrutura de categorias e filtros.

A ordem dos itens importa (mais do que pensas)

A ordem do menu funciona como a ordem de uma frase. O olho cai no primeiro e no último com mais atenção do que no meio. Padrão que funciona em PT para PME:

  1. Início (ou logótipo a fazer de "Início" — preferível, poupa um slot)
  2. O que fazemos ("Serviços" ou nomes dos 2-3 serviços)
  3. Como trabalhamos ("Processo" / "Como funciona")
  4. Preços (se mostras — ver a seguir)
  5. Sobre ou Blog
  6. Contacto ou CTA primário destacado

O CTA fica sempre à direita, separado visualmente. É a única coisa que queres que o utilizador clique se já estiver pronto. Se metes "Pedir orçamento" como item normal, perde-se no meio.

Mostrar preços no menu: sim ou não?

Tema controverso. A resposta honesta: mostra um item "Preços" ou "Como cobramos" sempre que tiveres âncoras reais para mostrar. Esconder preços é a posição maioritária do mercado PT — exatamente por isso é diferenciação.

Quando faz sentido um item dedicado:

  • Tens preços fixos ou bandas claras (ex.: landing 400€, sites desde 1.500€, lojas desde 3.500€).
  • O ICP procura "quanto custa X em Portugal" — confirma no Search Console.
  • Vendes contra concorrentes que escondem o preço.

Quando não:

  • Cada projeto é genuinamente custom (consultoria sénior, arquitetura).
  • Bandas de preço são tão largas que confundem mais do que esclarecem.

Mesmo nesse caso, podes ter "Como cobramos" a explicar o método. Esconder tudo é desconfiança gratuita.

Navegação mobile: o esconder bem feito

Mais de 70% do tráfego de PME em PT vem de telemóvel. O menu hamburger (☰) é a norma — mas a forma como abre faz a diferença entre conversão e abandono.

Boas práticas que valem mais do que parecem:

  • Hamburger no canto superior direito, com label "Menu" visível ao lado em ecrãs maiores. Ícone solto é ambíguo para utilizadores 45+.
  • CTA primário sempre visível no header, mesmo com menu fechado (botão pequeno tipo "Orçamento" ou ícone de telefone para prestadores de serviço).
  • Menu abre como overlay full-screen, não como pequeno dropdown. Toques mais largos, leitura mais clara.
  • Sub-menus expandem in-place (acordeão), não navegam para outra tela.
  • Botão de fecho (X) óbvio, na mesma posição do hamburger.

Detalhe que muita gente esquece: o número de telefone, se serviço presencial, deve aparecer no header em telemóvel como ícone clicável — chamada direta com um toque. Para um canalizador ou eletricista, isso é o site inteiro.

Sticky header: quando ajuda, quando estorva

Header que fica fixo ao fazer scroll. Útil em sites longos (homepage com 8 secções, posts de blog), porque mantém o CTA acessível sem o utilizador ter de voltar ao topo.

Quando usar:

  • Páginas com >3 ecrãs de altura.
  • CTA primário no header (orçamento, contacto).
  • Sites de e-commerce (carrinho sempre visível).

Quando não usar:

  • Páginas curtas (landing single-screen).
  • Headers muito altos (ocupam 15% do ecrã móvel — desperdício).

Regra: sticky encolhe ao fazer scroll (de 80px para 56px, por exemplo). Mantém o logótipo e o CTA. Esconde itens secundários se preciso.

Breadcrumbs: pequenos, mas fazem três coisas ao mesmo tempo

Os breadcrumbs ("Início > Blog > SEO > Este post") são um dos elementos mais subestimados do site. Em sites com mais de uma camada de profundidade, fazem três coisas em simultâneo:

  1. Mostram ao utilizador onde está — reduz ansiedade, especialmente em catálogos grandes.
  2. Reduzem a bounce rate — porque oferecem caminho lateral sem voltar ao menu.
  3. Ajudam o Google — via dados estruturados BreadcrumbList, aparecem no SERP a substituir o URL — mais clicks.

Onde pôr:

  • Imediatamente abaixo do header, alinhados à esquerda.
  • Texto pequeno, mas legível (14-15px).
  • Último item (página atual) sem link, em texto neutro.

Não uses breadcrumbs em sites de uma página ou em homepages — não há "onde" para mostrar. Para perceber a hierarquia que os justifica, vê o que devias mapear antes em estrutura de site institucional: páginas essenciais.

Rodapé: o segundo menu (e às vezes o mais útil)

O rodapé é onde acaba quem chegou ao fundo da página sem encontrar o que queria. Tratar isso como zona perdida é desperdício. O que deve estar lá:

  • Replicação do menu principal (texto pequeno).
  • Páginas legais: Política de Privacidade e Termos, Política de Cookies, Livro de Reclamações Eletrónico (loja).
  • Contactos diretos: email real, telefone, morada (mesmo que sem rua, "Portugal · NIF X").
  • NIF/NIPC — sinal de seriedade fiscal em PT.
  • Links a guias relevantes (sitemap simplificado, "Os 3 posts mais lidos").

O rodapé é o lugar certo para itens que não cabem no menu mas que utilizadores avançados procuram: livro de reclamações, RGPD, sitemap, GitHub se aplicável.

Erros de navegação que matam conversão

Os 7 mais comuns que vejo em sites de PME PT:

  1. Logótipo que não leva à homepage — convenção web universal. Quebra-la é fricção gratuita.
  2. "Saiba mais" como CTA principal — verbo formal e vago. Trocar por verbo específico ("Pedir orçamento", "Ver preços").
  3. Item "Home" quando o logótipo já faz isso — desperdício de slot.
  4. CTA igual aos outros itens — sem destaque visual, ninguém clica.
  5. Menu mobile sem CTA visível — utilizador tem de abrir hamburger para chegar ao botão. Perda direta.
  6. Sub-menus com 10+ itens — pior que menu principal grande. Divide ou repensa categorias.
  7. Links externos no menu principal (ex.: Instagram) — manda o tráfego embora. Esses vão para o rodapé.

Testar antes de mudar (e como)

Não mudes o menu por intuição. Testa.

Métodos baratos:

  • Treejack / card sorting com 5 pessoas do teu ICP — pede que organizem 30 cartões com nomes de páginas em grupos. Vê onde colidem com a tua estrutura.
  • Teste de 5 segundos — mostra o homepage a alguém durante 5s, depois pergunta: "o que vendem? a quem? onde clicarias primeiro?". Se não acerta, o menu (ou o hero) falhou.
  • Search Console + GA4 — vê que queries trazem tráfego. Se "preços X" tem volume e não tens item "Preços", pintaste-te ao canto.
  • Heatmaps e gravações de sessão — Hotjar, Microsoft Clarity (grátis). Vês exatamente onde os utilizadores clicam (e onde clicam em coisas que não são links — sinal de copy enganadora).

Mexe um elemento de cada vez. Mede 2 semanas. Decide com dados.

Em resumo

  • Menu principal: 5-7 itens, 1-2 palavras cada, CTA separado à direita.
  • Mega menu só com 40+ páginas reais — caso contrário, dilui sinais.
  • Mostra "Preços" sempre que tenhas âncoras concretas — diferenciação no mercado PT.
  • Mobile: hamburger overlay, CTA sempre visível, telefone clicável.
  • Sticky header só em páginas longas, e que encolhe ao fazer scroll.
  • Breadcrumbs com schema em qualquer estrutura com >1 nível.
  • Rodapé como segundo menu — legais, NIF, contactos, sitemap.
  • Testa com 5 pessoas reais antes de mexer.

No sitesfixe.pt desenhamos sites e lojas online com navegação pensada para conversão — menu, mobile, breadcrumbs e CTA bem postos desde o briefing. Sites desde 1.500€, lojas desde 3.500€. Pedir orçamento.

Lê também:

Fontes

Precisas de um site ou loja online?

Agência digital portuguesa. Sites e lojas online rápidos, otimizados para o Google e feitos para resultado.

Pedir orçamento