bbulman/navigation

Navegação

A navegação decide quais partes da estrutura ganham um lugar permanente na tela e quais são alcançadas de outra forma. Os slots são escassos, e cada superfície tem sua própria regra para definir o que merece um.

O que você precisa primeiro

Entrada	De onde vem	Se estiver faltando
Cada superfície como está	Em uma base de código, leia as rotas e os componentes de navegação (cabeçalho, rodapé, alternador de aplicativos, barras laterais, barras de guias) primeiro. Nunca redesenhe a partir apenas da página inicial.	Peça capturas de tela ou uma lista digitada de itens por superfície.
A árvore por trás disso	Um sitemap, ou as rotas	Mapeie a árvore atual você mesmo e informe isso. Se a estrutura em si estiver errada, pare e use sitemaps.
Tarefas prioritárias, aquelas em que as pessoas falham, e o uso	O usuário, analytics, logs de busca, perguntas repetidas de suporte	Pergunte, ou declare sua suposição no início. Nunca estime o uso; diga quais decisões mudariam se você o tivesse.

Se você não conseguir nada disso, diga o que precisaria e produza a especificação vazia a partir de references/spec-template.md com as regras de entrada preenchidas.

Método

1. Mapeie cada superfície. Superfície, item, destino, contagem. Marque o mesmo destino com dois nomes, itens que não levam a lugar nenhum e qualquer coisa que existe apenas em uma superfície por acidente.

2. Separe o global do local.

   	Global	Local
   Função	O que todo este lugar oferece	O que está ao redor desta página
   Mostra	O mesmo em todas as páginas	Apenas dentro de sua seção
   Superfícies	Principal, utilitário, rodapé	Barra lateral, conteúdo na página, breadcrumbs, links relacionados
   Dá errado quando	Lista os filhos de uma seção	Repete os itens globais

   Uma seção que precisa de mais de dois níveis de navegação geralmente quer sua própria barra lateral ou sua própria página inicial.

3. Dê a cada superfície uma regra de entrada e aplique-a a cada item.

   Superfície	O que pertence	O que não pertence	Regra de entrada
   Principal	Os 3 a 6 destinos mais importantes para usuários e negócios	Qualquer coisa que não tenha conquistado o slot	Atende a uma tarefa prioritária ou a um objetivo de negócio declarado, faz sentido para um novo usuário e supera o item mais fraco já existente
   Utilitário	Login, conta, busca, idioma, configurações	Itens ranqueados por marketing	É sobre a sessão da pessoa ou a ferramenta, não o conteúdo
   Rodapé	O sitemap mais completo, legal, contato, chamadas para ação secundárias	Uma gaveta de tranqueiras (pessoas e robôs ainda leem)	Alguém precisa a partir de qualquer página, ou a lei exige; encaixa-se em um grupo nomeado
   Contextual	Barra lateral, conteúdo na página, breadcrumbs, links relacionados	Qualquer coisa global	Significa algo apenas aqui e é colocado por uma regra escrita
   Barra de guias do aplicativo	No máximo 5 guias; uma 6ª vira "Mais" ou é cortada	Destinos raramente usados	Um trabalho repetido e de alto nível no produto

4. Aloque. Trate mais de sete itens principais como um sinal de que alguns não estão conquistando seu lugar: consolide-os ou mova-os para o rodapé. Funda quase-gêmeos em um único item. Dê a cada tarefa em que as pessoas falham um lar canônico e diga que qualquer outro ponto de entrada leva até lá.

5. Ofereça dois ou três arranjos (por tarefa, por objeto, por público), cada um com seus custos e onde tensiona. Recomende um e justifique.

6. Escolha o padrão.

   Situação	Use	Nota
   Um item tem três ou mais subgrupos com filhos próprios	Mega-menu	Projete seu foco de teclado e versão móvel como trabalhos separados
   Uma lista plana curta de filhos	Um dropdown simples, ou um link para uma página hub	Frequentemente a página hub é melhor
   Profundidade de três níveis ou mais	Breadcrumbs	Cada migalha é uma página real. Uma trilha por página, seguindo o lar canônico, não a rota que a pessoa seguiu.
   Páginas de referência longas	Conteúdo na página	Apenas local
   Papéis diferentes precisam de pontos de partida diferentes	Atalhos personalizados	Personalize os atalhos, não o mapa. Se todos veem um menu diferente, as pessoas não conseguem dar direções, o suporte não consegue descrever onde as coisas estão e as análises perdem o significado.

7. Projete para dispositivos móveis e teclado agora. No móvel, diga como o principal recolhe, o que permanece visível e o que acontece com cada mega-menu. No teclado, todo item é acessível em ordem visual, o foco é visível, Escape fecha o que Enter abriu e nada funciona apenas com hover. Detalhes estão em references/mobile-and-keyboard.md; leia para qualquer menu que abra.

8. Coloque pistas onde a decisão acontece. Uma boa pista responde a uma pergunta que a pessoa já tem, no momento da escolha, onde ela já está olhando, silenciosa e barata. A seta ao lado do medidor de combustível de um carro mostrando de que lado fica a tampa é o modelo. Mostre a localização atual com um estado ativo.

9. Planeje como os itens saem. Remover um link não é remover uma página.

   Passo	O que fazer
   Decida seu destino	Fundido, movido para o rodapé ou utilitário, acessível apenas por busca, ou removido
   Se a página sair	Adicione-a ao mapa de redirecionamento
   Se ela permanecer	Confirme que outro caminho ainda a alcança
   Avise as pessoas	Em um produto com login, deixe um ponteiro no lugar antigo por uma ou duas versões e corrija artigos de ajuda, tutoriais e e-mails que nomeiam o caminho antigo
   Mantenha a palavra	O rótulo antigo permanece como sinônimo de busca, depois monitore a busca e o suporte quanto a ele

10. Passe a validação para tree-tests. Ele escreve o plano e as tarefas. Dê a ele cada problema que motivou o trabalho, cada colocação duvidosa e as respostas propostas. Metas: pelo menos 70% de sucesso, 80% para tarefas prioritárias, razão de caminho no máximo 1,5.

Entregável

navigation-spec.md, nesta ordem:

1. Recomendação: duas ou três frases e o motivo principal.
2. Estado atual: cada superfície, sua contagem, seus problemas.
3. Opções: uma linha por arranjo, com seus custos.
4. A especificação: por superfície, rótulo e destino, e por que cada item principal conquista seu slot. Depois o padrão de breadcrumbs, dispositivo móvel, teclado e estado ativo.
5. Lares canônicos: cada tarefa problemática, seu único lar e os pontos de entrada que levam até lá.
6. Antes e depois: cada item atual e para onde foi, incluindo o que foi aposentado e como.
7. Regra de entrada: o teste que um novo item de nível superior deve passar.
8. Suposições e perguntas em aberto.
9. Passagem para tree-tests: as tarefas problemáticas, as colocações duvidosas e as respostas propostas.

Reduza a escala. Uma revisão de menu precisa do diagnóstico, da nova árvore, de um lar para cada tarefa problemática e da passagem para tree-tests; não precisa de um modelo de conteúdo ou de uma política de URL. Um documento mais longo não é um documento mais completo. Um pedido para colocar cada item significa que cada item ganha um lar.

Verifique

Não há script. Estas verificações são curtas e exigem a leitura da especificação, então faça-as manualmente e corrija o que falhar:

• Conte itens principais (no máximo 7, preferível 3 a 6) e guias (no máximo 5).
• Cada item atual aparece na tabela antes e depois com um novo lugar ou uma aposentadoria declarada.
• Cada destino existe na árvore ou nas rotas, cada pai de breadcrumb é uma página real, e a barra lateral, os breadcrumbs e a URL contam a mesma história.
• Cada tarefa problemática tem exatamente um lar e está na passagem para tree-tests com sua resposta proposta.
• Nenhuma afirmação de uso que não lhe foi dada. Palavras de frequência são marcadas como suposições.

O que Claude não pode fazer aqui

• Saber a estratégia ou política da organização a menos que lhe seja dito. Qual item conquista um slot é parcialmente uma decisão de negócio, então apresente um rascunho e diga de quem é a decisão.
• Inventar tráfego, uso ou pesquisa, ou executar um teste de árvore com pessoas reais.
• Dizer o que o componente de menu de um framework faz. Diga o que você esperaria e peça ao usuário para confirmar, porque o que uma plataforma suporta varia.

Para onde isso passa

• information-architecture: a porta de entrada, quando o trabalho abrange várias destas habilidades.
• sitemaps: quando a árvore subjacente precisa ser alterada.
• labeling: para nomear os itens. taxonomies: quando filtros ou facetas são a real necessidade.
• url-structure e redirect-maps: quando os destinos mudam de endereço. content-models: quando uma regra contextual precisa de campos por trás.
• tree-tests: para executar o estudo. findability: quando o problema é busca ou rastro (scent). content-inventory e card-sort: quando ninguém sabe o que existe ou como as pessoas agrupam.