CategoriaDesign de produto

Navegação e rótulo de link: o que a pesquisa mostra

8 minutos de leitura

A navegação decide se o resto da página chega a ser visto, e o rótulo de link decide se o clique cai onde a pessoa espera. O NN/g mediu parte desse custo ao longo de duas décadas de artigos, e as medições são mais úteis que os slogans construídos em cima delas. O índice de tema de navegação (em inglês) reúne os textos por trás deste post.

O que a pesquisa mede em navegação

Duas perguntas aparecem no acervo. As pessoas acharam a navegação, e quanto esforço isso custou depois que começaram a procurar? O estudo de navegação escondida (em inglês) enfrentou a primeira com um teste quantitativo em 2016: 179 participantes, 6 sites, três condições.

Todos os números da próxima seção vêm desse único estudo, então compartilham os mesmos limites. Uma rodada, seis sites, um estilo de interface.

No desktop, o uso da navegação caiu de 48% quando ela estava visível para 27% quando estava escondida. No celular a distância foi maior: 86% com o menu combinado contra 57% com o escondido. A descoberta de conteúdo caiu mais de 20%. A dificuldade percebida subiu 21% contra o menu visível e 11% contra o combinado. As tarefas levaram ao menos 39% mais tempo no desktop e 15% mais no celular. Chegar à navegação custou de 5 a 7 segundos a mais no desktop e cerca de 2 no celular (NN/g (em inglês)).

Uma queda dessas tem custo, mas não é uma condenação. O estudo de 2025 sobre reconhecimento do ícone (em inglês) confirma que o ícone de três linhas virou convenção familiar, lida pela maioria como menu principal. Ele também declara o que não mediu: reconhecimento, não tempo ou sucesso de tarefa. Reconhecer o ícone não apaga o preço de esconder o menu.

No ponto da posição, os textos concordam. Não esconda a navegação no desktop. No celular, mostre até quatro links de topo, e esconder o resto é aceitável acima disso. Use o ícone padrão, coloque no canto que as pessoas esperam, rotule como “Menu” e dê contraste e padding. Depois mantenha outras rotas abertas, com links no corpo, busca visível e rodapé.

Quantos itens antes de virar rolagem

Um menu expansível cobra em dois momentos. Primeiro a pessoa precisa notar o gatilho, depois escolher um item. A revisão sobre menus expansíveis (em inglês) separa o segundo custo em busca visual mais movimento do ponteiro. A lei de Fitts governa o movimento, então um alvo pequeno e longe do cursor custa mais tempo. Um menu linear por isso penaliza os próprios últimos itens, e é uma razão para ele ser curto.

O layout pode diminuir esse custo. Alinhar o gatilho ao item do meio corta o deslocamento médio. Um megamenu retangular mantém os itens mais próximos no conjunto. Um menu radial deixa cada item equidistante e paga por ser pouco familiar. Um marking menu transforma a direção em atalho e, no modo expert, dispensa abrir o menu.

No toque, a pergunta é outra. O dedo pode não estar no gatilho quando o menu abre, então o que conta é onde o painel aparece em relação a onde as mãos provavelmente estão.

A orientação sobre dropdowns (em inglês) trata o widget como sobre-usado e nomeia quatro usos legítimos: dar um comando, navegar, preencher formulário e escolher um atributo. Mantenha o rótulo visível com o menu aberto. Desabilite em cinza uma opção indisponível em vez de removê-la, para preservar a posição que a pessoa aprendeu. Um dropdown longo com rolagem obriga o ponteiro a descer um corredor, custo que a steering law prevê. Onde digitar é mais rápido, como estado ou país, use o campo de texto. Vale o mesmo para um dado que a pessoa sabe de cor, como o mês de nascimento. No desktop, mantenha a navegação global fora de dropdown, e suporte o teclado.

Evite ainda o menu que muda por causa de outro menu na mesma página.

O texto de 2007 a favor do breadcrumb (em inglês) enquadra a trilha como navegação secundária de uma linha. Ela mostra onde a página está, dá acesso em um clique aos níveis acima, ajuda quem chegou de busca ou de link externo e ocupa quase nada. O autor declara não ter o número exato de quantas pessoas usam a trilha e não ter achado que a pergunta merecia estudo próprio.

A orientação de 2018, revisada em 2026 (em inglês), aperta as regras. O breadcrumb complementa a navegação em vez de substituí-la, e mostra a hierarquia do site e não o histórico da sessão. Em site com vários caminhos, mostra um único caminho canônico. Inclua a página atual como último item, sem link. Só linke páginas reais. Dispense a trilha quando a hierarquia tem um ou dois níveis, e use um separador de um caractere.

Um rótulo tem um trabalho antes do clique: dizer o que há do outro lado. A orientação sobre rótulos de link (em inglês) lista quatro qualidades, todas começando com S. Específico quer dizer que o rótulo nomeia o destino, e “saiba mais” é o novo “clique aqui”. Sincero quer dizer que o link é uma promessa, e uma promessa quebrada encolhe a disposição de clicar de novo. Substancial quer dizer que o rótulo precisa se sustentar sozinho, porque a pessoa escaneia links e pula a frase em volta. Sucinto quer dizer nenhuma palavra a mais, com a informação útil no começo.

As quatro puxam em direções diferentes, e o artigo admite isso. Específico empurra o rótulo para mais longo, e mais longo é mais difícil de escanear. O ajuste comum é começar pelo substantivo que a pessoa procura. É o mesmo problema de casar intenção de busca, onde rótulo e consulta precisam se encontrar.

A aparência de um link carrega informação, além de estilo. As diretrizes de visualização de links (em inglês) um dia pediram cor mais sublinhado. Uma nota do editor de 2026 revoga essa regra visual e remete ao critério 1.4.1 do WCAG 2.1, que exige que a cor sozinha não separe um link. A maioria dos leitores hoje combina cor, posição e contexto.

O que ficou depois da revisão foi um aviso. Não use a cor de link em texto que não é link, e não deixe um link parecer texto comum.

O estado visitado é mais discreto e mais útil. O artigo sobre links visitados (em inglês) defende que a cor alterada diz onde a pessoa esteve, onde está e para onde ainda pode ir. Ignore a convenção e as pessoas reabrem páginas por acidente, perdem o lugar, confundem dois links parecidos e desistem mais rápido.

Esse problema é difícil de pegar em teste. Quase ninguém reclama da cor do link. As pessoas só ficam andando em círculos.

Dois números daquele artigo não têm fonte declarada, então ficam fora de qualquer resumo.

Paginação, rolagem infinita e lista longa

Uma lista longa precisa de estratégia, e o tamanho do acervo escolhe qual. A comparação de opções para páginas de listagem (em inglês) ordena as escolhas. Paginação numerada serve a um acervo grande e oferece controle preciso. Carregar tudo de uma vez serve a um site pequeno. Rolagem infinita funciona com poucos itens e bons filtros, e falha em acervo grande, porque o rodapé fica inalcançável e a pessoa perde a posição na lista. Um botão de carregar mais alcança o rodapé e cai bem no celular, desde que diga o total, o quanto já carregou e o quanto falta.

Uma regra vale para todas. Quando alguém abre um item e volta, devolva a pessoa ao ponto onde deixou a lista. O mesmo problema de listagem aparece em páginas de produto com dado denso, onde o acervo é o próprio produto.

Onde o outro lado ganha

Os textos do acervo nem sempre concordam, e vale deixar à vista as cinco divergências abaixo.

  • Breadcrumb no celular: o texto de 2007 chama a trilha de sem problema e barata. A revisão de 2018 diz que o custo supera o benefício no celular, porque a trilha quebra em várias linhas e o alvo fica pequeno.
  • Trilha completa contra trilha curta: 2007 quer o caminho inteiro por consistência. 2018 manda encurtar no celular e depois admite que o conselho conflita com a própria regra de mostrar a trilha completa.
  • Sublinhado: o texto de 2004 queria cor mais sublinhado. A nota do editor de 2026 revoga a regra visual e leva o leitor ao critério 1.4.1 do WCAG 2.1.
  • Familiaridade do ícone: o estudo de 2016 mede custo alto para esconder a navegação. O estudo de 2025 acha o ícone amplamente reconhecido, mas declara que mediu só a reconhecibilidade e reafirma o conselho antigo. É limite de escopo, não revogação, e o texto deve dizer isso.
  • Mecanismo: o estudo de 2016 explica o custo por percepção e cognição. Os artigos de menu e de dropdown explicam o mesmo defeito por movimento, com a lei de Fitts e a steering law. As explicações se complementam em vez de competir.

Um rótulo também precisa sobreviver à tradução, o que empurra a mesma disciplina para decisões de conteúdo multilíngue.

Fontes

Outros textos

Ver todos os textos