← Caderno de laboratório

O problema da encontrabilidade: as regras de navegação que precisei desaprender

12 min de leitura

Não havia navegação. Não uma navegação enxuta — nenhuma. A essa altura, o laboratório tinha dois jogos disponíveis, dois experimentos de IA no navegador e nove registros de construção, mas nenhum cabeçalho, rodapé, índice dos jogos ou forma clicável de subir um nível.

O conteúdo continuava sendo publicado enquanto os caminhos até ele desapareciam. O novo hub de jogos e experimentos, o cabeçalho do site e as trilhas de navegação com links são o reparo.

Uma ilustração vetorial plana de uma praça neon em um terraço ao entardecer, em uma cidade estilizada: uma placa de sinalização laranja brilhante com placas de seta vazias aponta em três direções, um painel de diretório ciano em uma parede mostra um grafo de nós em hub e raios, e uma trilha de pontos de referência ciano brilhantes atravessa três terraços onde estão pequenas silhuetas ciano de corredores.
Três coisas que faltavam ao site: uma placa de sinalização, um diretório e uma trilha marcada de volta.

Eu sou o proprietário e desenvolvo este site e o canal AI Maker Lab — este é um registro de construção, não uma análise independente.

Quando o site cresceu além de seus caminhos

A falha era estrutural, e cada parte dela é mensurável no código-fonte anterior à mudança.

Nada no site abrangia o site inteiro. O layout raiz montava exatamente três coisas acima do conteúdo da página: um seletor de tema, um seletor de idioma e a própria página. Não havia cabeçalho nem rodapé, então nenhuma rota continha um link para qualquer outra seção. As únicas formas de mudar de seção eram o botão Voltar do navegador ou a barra de endereços.

Cada página reimplementava seu próprio cabeçalho de identidade, e nenhum deles era navegação. Sete páginas tinham, cada uma, um cabeçalho feito à mão com a marca, um link para a página inicial e uma string de localização — / games / skyline-run / ai-lab, / blog / posts / game-grammar. Essas strings pareciam trilhas de navegação e funcionavam como decoração: eram elementos span de texto simples. Uma pessoa na página do Skyline Run AI Lab conseguia ver que estava dois níveis abaixo de Skyline Run e não podia clicar em nenhum dos níveis. Abaixo de 419px, a string de localização era totalmente ocultada.

Os dois experimentos de IA não estavam, na prática, listados. Em toda a árvore de rotas, o Skyline Run AI Lab e a IA treinadora do Skyline Run eram mencionados em exatamente uma página: a página do jogo Skyline Run. A página inicial anunciava dois jogos e nenhum experimento. Não havia nenhuma rota /games — o diretório existia como pasta, não como página. Pior: o grafo de links era de mão única. As duas páginas de IA tinham links entre si, e nenhuma apontava de volta para o jogo disponível que elas treinam.

O post em destaque na página inicial era escolhido à mão, por isso ficava desatualizado sem aviso. A página inicial apontava para um post de pesquisa, measuring-the-jump, fixado diretamente no template. Esse post tem a data 2026-08-20. Quando fui verificar, seis posts com a data 2026-08-21 haviam sido publicados depois dele. A página inicial de um site de registros de construção estava seis posts desatualizada, e nada no código era capaz de perceber.

Este é o resumo honesto: o conteúdo continuou sendo publicado, mas os caminhos até ele, não.

As regras caíram; sobraram caminhos visíveis

A regra de “cinco a sete itens de navegação” toma emprestada a pesquisa errada sobre memória. O 7±2 de Miller trata de recordação. O artigo de Kate Moran para o NN/g sobre chunking explica que menus são tarefas de reconhecimento porque as opções continuam visíveis; não há ganho de usabilidade em parar em sete itens quando um menu maior tem uma estrutura significativa. O conselho existe; sua justificativa, não.

A regra dos três cliques não tem um limite publicado que a sustente. “The 3-Click Rule for Navigation Is False”, de Page Laubheimer, chama o limite de arbitrário e relata a conclusão do estudo de Josh Porter de 2003: passar de três cliques não aumentou o abandono nem reduziu a satisfação. Rastro de informação nos rótulos, trilhas de navegação, navegação local, tarefas visíveis na página inicial e hubs descritos que permitem deslocamento lateral importam mais.

O rastro de informação importa mais do que a contagem de cliques. Rastro de informação significa se um link indica visivelmente o que existe depois dele. “Information Scent”, de Raluca Budiu, diz que as pessoas avaliam o rótulo, o texto e as imagens próximos e o conhecimento prévio; sem contexto suficiente, elas saem em vez de explorar. Isso pedia cartões com nome e descrição, não uma lista simples de links.

Uma auditoria relacionada, O blog passa pelos controles, mas a redação se desvia, também separa verificações amparadas por contrato de uma dimensão sem controle.

A profundidade custa atenção, mas a amplitude ilimitada também. “Flat vs. Deep Website Hierarchies”, de Kathryn Whitenton, diz que camadas intermediárias tornam o conteúdo mais difícil de encontrar, enquanto menus amplos demais sobrecarregam e se sobrepõem; estruturas mais planas também permitem rótulos mais específicos. Atalhos para conteúdo de nível inferior e trilhas em sites com mais de dois níveis ajudam, mas o artigo não dá uma profundidade máxima nem um número máximo de itens, então não vou inventar nenhum.

Trilhas de navegação orientam; não consertam uma estrutura ruim. “Breadcrumb Navigation Increasingly Useful”, de Jakob Nielsen, relata benefícios e nenhuma desvantagem observada, sobretudo para quem chega por um link profundo ou pela busca, e recomenda uma trilha horizontal da página inicial até a página atual, com links em todos os ancestrais. Ainda assim, coloca menus primários e busca acima dela. “Breadcrumb Navigation: Further Investigation of Usage”, de Rogers e Chaparro, mostra a escala modesta: com 45 participantes, trilhas de navegação responderam por 6% da navegação, não alteraram significativamente as páginas visitadas nem o tempo das tarefas e receberam 82% de seus 199 cliques quando ficavam abaixo do título.

O rodapé é útil, mas não é o primeiro reparo. “Web Page Footers 101”, de Therese Fessenden, descreve pessoas recorrendo ao rodapé depois de não encontrar algo acima e documenta o padrão capacho — um painel amplo de navegação que desce do cabeçalho. O artigo alerta contra o excesso e coloca a navegação global em primeiro lugar.

O formato acessível da trilha de navegação já está especificado. O padrão de trilha de navegação das Práticas de Autoria WAI-ARIA do W3C usa um marco de navegação rotulado e uma lista ordenada; aria-current="page" indica qual link de um conjunto é a página atual, enquanto os separadores em CSS não são anunciados por leitores de tela. A técnica WCAG G65 acrescenta que todos os itens anteriores devem ter link quando o local atual não tem.

A documentação de busca promete menos do que o folclore. A referência de dados estruturados de trilha de navegação diz que o JSON-LD BreadcrumbList — trilhas de navegação legíveis por máquina para mecanismos de busca — pode categorizar informações da página nos resultados. Ele exige pelo menos duas entradas ListItem e um item, exceto na última entrada, em que se usa a URL da página que a contém, mas não garante nenhum recurso na busca. A documentação de sitemaps diz que um sitemap ajuda o rastreamento, embora o envio seja “apenas uma indicação”; as Perguntas frequentes sobre sitemaps oficiais não prometem classificação, rastreamento nem indexação. A regra prática está nas práticas recomendadas de links do Google: um link rastreável é uma âncora com href, e toda página importante precisa de um link interno. Os dois experimentos falhavam nesse teste fora da própria subárvore.

Três estatísticas atraentes não tinham fonte utilizável. As afirmações de que uma navegação confusa afasta 38% das pessoas, que a arquitetura da informação acelera a busca em 70% ou que uma navegação clara aumenta a conclusão de objetivos em 50% levavam apenas a páginas de marketing sem estudo, amostra ou método; uma das trilhas terminava em uma afirmação sem apoio. Sem fonte primária, não as citei como evidência. O benchmark de navegação do Baymard resiste dentro de seu escopo: entre 180+ grandes sites de comércio eletrônico, 58% dos sites para desktop e 67% dos sites para dispositivos móveis tiveram avaliação de medíocre a ruim na navegação da página inicial e de categorias. Esse resultado descreve a amostra de comércio eletrônico do Baymard, não este site.

Cinco reparos fizeram toda rota apontar para algum lugar

A pesquisa apontou para cinco coisas específicas, então a mudança tem cinco partes.

Um cabeçalho global, montado uma vez. SiteHeader.svelte é renderizado no layout raiz: marca, um link para a página inicial, um marco de navegação rotulado com dois links — o hub de jogos e experimentos e o caderno de laboratório — além do seletor de tema e do seletor de idioma que antes flutuavam em uma caixa fixa no canto. Dois itens não são uma homenagem à regra dos sete itens; são o número de seções de nível superior que existem hoje.

Uma página de hub com entradas descritas. /games lista as quatro construções em dois grupos rotulados, jogos disponíveis e experimentos de IA, cada uma como um cartão com nome, uma frase que a descreve e um rótulo de ação. Tanto o hub quanto a página inicial são renderizados a partir de uma única fonte, GAME_CATALOG em src/lib/games/catalog.ts, portanto as duas superfícies não podem divergir, e adicionar uma quinta construção exige uma única entrada em vez de dois templates editados à mão.

Trilhas de navegação que são links de verdade. Um componente Breadcrumbs.svelte substituiu sete cabeçalhos de identidade feitos à mão e agora é usado em oito páginas. Ele próprio acrescenta a página inicial no começo, cria links para cada ancestral, marca a página atual com aria-current="page" em um nav rotulado com uma lista ordenada de acordo com o padrão APG, mantém os separadores no CSS e continua visível em larguras estreitas em vez de ser ocultado. Ele também emite JSON-LD BreadcrumbList, com position e name em cada entrada, item como uma URL localizada absoluta em cada ancestral com link e nenhum item na página atual — exatamente o formato documentado pelo Google. A trilha mais curta do site, no próprio hub, é a página inicial mais a página atual, então até ela supera o mínimo de duas entradas.

Uma página inicial que lê o conteúdo, não a minha memória. A página inicial agora renderiza os três posts mais recentes de listPosts(getLocale()), com título, descrição, data e tempo de leitura, além de um link para o caderno completo. O template de post em destaque que ficou seis posts desatualizado foi removido. A página inicial também ganhou a seção de experimentos de IA, então os dois experimentos são mencionados na página inicial pela primeira vez.

Um rodapé e uma nova entrada no sitemap. SiteFooter.svelte segue o padrão capacho com um grupo Explorar que repete os três destinos primários e um grupo Seguir com o link do canal, deliberadamente pequeno. /games foi adicionado a STATIC_PATHS no sitemap, que passou de seis caminhos estáticos para sete. Cada caminho é emitido nos três idiomas com alternativas hreflang recíprocas — que informam aos mecanismos de busca qual URL serve cada idioma — e x-default, conforme a reciprocidade exigida pelo Google.

A estrutura mudou; o comportamento dos leitores continua em aberto

O antes e depois estrutural é a parte que posso afirmar sem ressalvas. O contraste que importa é que tudo passou de zero ou desatualizado para conectado e gerado, exceto a distância em cliques, que continuou em dois cliques.

PropriedadeAntesDepois
Páginas com navegação em todo o site0todas as rotas, por meio do layout raiz
Links clicáveis para ancestrais nos cabeçalhos de identidade das páginas08 páginas com trilhas que contêm links
Rotas que mencionam qualquer um dos experimentos de IA13, além de uma trilha de navegação em cada experimento
Páginas de experimentos de IA com link de volta para o jogo02, pela trilha de navegação
Links para o caderno na página inicial1, escolhido à mão, com atraso de 6 posts3, dos mais recentes para os mais antigos, gerados
Caminhos estáticos no sitemap67
Dados estruturados de trilha de navegaçãonenhumBreadcrumbList em 8 páginas

Um número, deliberadamente, não mudou. Chegar à IA treinadora do Skyline Run a partir da página inicial exigia dois cliques antes desta mudança e exige dois cliques agora. Se a regra dos três cliques fosse o padrão, o site antigo já a cumpria mesmo sendo genuinamente difícil de usar — esta é a ilustração mais clara que tenho do motivo pelo qual o NN/g chama essa regra de falsa. O que mudou não foi a distância, mas a visibilidade do caminho: antes, a única rota até a IA treinadora do Skyline Run passava por uma página de jogo que nunca dizia que os experimentos existiam; agora ela é mencionada na página inicial, listada no hub e acessível pelo cabeçalho de todas as páginas do site.

O que não medi: se alguma dessas mudanças aumenta as visualizações de página. Há analytics instalado, mas ainda não tenho dados de antes e depois, e este post é publicado junto com a mudança, não depois dela. Uma melhoria estrutural no grafo de links não prova uma mudança no comportamento das pessoas. O próximo passo é comparar períodos iguais para sessões que atravessam seções, entradas no hub e no Skyline Run AI Lab vindas de fora de Skyline Run e impressões da URL do hub na busca, relatando o resultado mesmo que nada mude. O que este trabalho provou é mais restrito: toda rota agora tem navegação global, os experimentos estão listados e cada ancestral nas trilhas tem link. Para começar onde o diário de construção começou, leia o primeiro post sobre fluxo, informação e resposta nos jogos.

Fontes

Eu sou o proprietário e desenvolvo este site e o canal AI Maker Lab — este é um registro de construção, não uma análise independente.

Continue lendo