Arquitetura da informação

Que forma uma página assume. Isso se decide antes de qualquer cor ou espaçamento.

As outras páginas desta seção respondem perguntas sobre as peças. Esta responde a que vem antes: com tudo o que a tela precisa carregar, o que a pessoa veio fazer e qual arranjo permite que ela faça?

Use quando estiver começando uma tela que precisa carregar vários objetos, vários estados e as relações entre eles: um console, um painel, um backoffice, uma bancada de trabalho, uma página de monitoramento. Não uma landing page nem um formulário de conversão única, que se ganham ou se perdem pela persuasão e não por alguém conseguir julgar bem em meio a informação densa.

Ter todos os dados não é ter a página desenhada. Uma tela pode exibir cada campo que a API devolve, com filtros, etiquetas de status e ações em lote, e ainda assim deixar quem lê sem saber o que olhar primeiro. Não falta informação: falta ordem.

Três perguntas antes de qualquer componente

1. Qual é a única coisa que precisa ser vista na chegada? Essa é a informação principal da página.
2. O que mais precisa estar visível para que ela faça sentido? Os recursos relacionados, os modelos relacionados, o contexto.
3. O que a pessoa faz em seguida? Julgar algo, agir sobre algo ou continuar pensando em algo.

Responda as três antes de abrir a lista de componentes. Uma página com essas três respostas claras raramente erra a forma; uma que as pula acaba organizada em torno da resposta da API.

Uma página, um modelo principal. Modelos de apoio podem ajudar a entender ou a operar o principal. Não podem disputar a primeira tela com ele.

A forma segue a tarefa, não o payload

Dois atalhos produzem quase todas as páginas malformadas:

• O endpoint devolveu um array, então virou tabela.
• A rota carrega um ID, então virou página de detalhe.

Nenhum dos dois é razão. O mesmo objeto assume outra forma sob outra tarefa: uma issue é uma coleção enquanto você busca, um fluxo de status enquanto você a trabalha, uma thread de discussão enquanto colabora e uma sequência de eventos enquanto audita. Um registro ter campo de data diz que há uma data nos dados. Não diz que a página é um calendário.

Como escolher o esqueleto

Escolha o arranjo que responde à pergunta principal com o menor número de conversões mentais.

Pares que se confundem

• Linha do tempo ou etapas. A linha do tempo conta o que já aconteceu, em ordem. As etapas dizem onde você está e o que vem. São parecidas e apontam para direções opostas no tempo.
• Kanban ou filtro. Kanban cabe quando mover um cartão é a ação. Se as colunas são condições de filtro salvas, você construiu um filtro que custa um arrasto.
• Calendário ou linha do tempo. O calendário responde ocupação e conflito; a linha do tempo responde ordem. A data do registro não escolhe entre os dois; a pergunta escolhe.
• Grade de cartões ou tabela. Ou a imagem é a âncora de reconhecimento ou não é. Se a escolha se faz comparando números, uma miniatura na primeira coluna soterra os campos que decidem.
• Grafo ou lista de adjacência. Desenhe o grafo só quando o caminho ou a propagação forem o próprio julgamento. Caso contrário, uma lista agrupada de montante e jusante se lê mais rápido.
• Documento ou grade de campos. Prosa lida em ordem continua prosa. Picar cada parágrafo em um cartão ou em um par chave-valor destrói justamente o que a tornava legível.

Não construa as três visões porque dá. Cada visão extra é outro conjunto de filtros, outro mapeamento de status e outro conjunto de ações para manter em sincronia. Acrescente a segunda quando o segundo uso for realmente frequente, não por precaução.

Onde vai cada tipo de informação

Cada fato tem exatamente um lugar autoritativo. Nos demais entra um resumo ou uma entrada que aponta de volta.

Ordem de leitura

Identidade da página
→ status atual ou exceção
→ tarefa principal e ação principal
→ a informação de que o julgamento precisa
→ relações, mudanças, evidência
→ informação secundária e ações pouco frequentes

• Um único título principal visual por página. Os títulos de seção avançam por semântica, não por um tamanho de fonte fingindo hierarquia.
• No máximo uma ação principal por região de tarefa. O botão principal é o próximo passo mais provável, não o mais destrutivo. O perigoso ganha semântica de perigo, não o maior peso visual.
• Cor de aviso e de perigo é para estados que realmente pedem atenção. Uma página toda verde já gastou o próprio sinal.
• Selos, etiquetas e faixas dividem um mesmo orçamento de atenção. Destaque só o que mudaria uma decisão.

Densidade

Densidade não é quantos controles cabem por centímetro quadrado, e sim quanta informação utilizável alguém leva em um olhar. Apertar o espaçamento sobe a densidade visual e deixa a efetiva onde estava; tirar campos irrelevantes e pôr a comparação em um lugar só sobe a de verdade.

• Use no máximo dois níveis vizinhos em uma página. Uma tabela compacta dentro de uma página padrão tudo bem; cada região inventando a própria escala não.
• Compacto não é «encolher texto e alvos de toque juntos». O preenchimento do contêiner e a altura de linha podem apertar; a legibilidade do corpo, o anel de foco visível e o tamanho do alvo de ponteiro não.
• Para usuários especialistas, gestão de colunas, visões salvas, ações em lote e atalhos rendem mais do que mostrar mais de uma vez.

Preservar o contexto da tarefa

Com o esqueleto escolhido, decida onde mora o conteúdo de apoio:

Um modal não é uma camada de navegação. Tudo que precisar de link copiável, histórico, comparação lado a lado ou trabalho que sobreviva a um recarregamento ganha rota.

O que o ranui oferece nesta camada

O ranui é deliberadamente neutro quanto à forma da página: entrega primitivos e tokens, não modelos de página. O que ele dá aqui:

• r-section para as faixas em que um esqueleto se divide e r-card para uma entrada repetida genuinamente independente. Nunca um cartão dentro de outro; agrupe campos de formulário com um título ou um divisor.
• r-tabs para visões pares de um mesmo objeto (sua conversa, suas verificações, seu diff), nunca para módulos sem relação: disso cuida a navegação.
• r-disclosure-row para divulgação progressiva, r-popover e r-dropdown para contexto passageiro, e r-modal só para o que a tabela acima permite.
• r-state-dot para status, sempre com o rótulo: nunca só cor.
• r-skeleton enquanto a primeira tela carrega, r-progress para qualquer coisa longa o bastante para gerar dúvida, r-message para o resultado.

No ranui não existe tabela, árvore, calendário, kanban nem linha do tempo. Ao construir uma, construa sobre os tokens e as diretrizes de design em vez de levantar um segundo sistema visual: espaçamento vindo da escala, tipografia por papel, cor de tokens semânticos e todos os estados alcançáveis desenhados.

Antipadrões

• Cada campo que o endpoint devolve vira uma linha de detalhe, e identidade, status, relações e evidência chegam todas com o mesmo peso.
• Hierarquia fabricada com cartões, cor e espaçamento decorativo, sem dizer nada sobre o que ler primeiro.
• Várias ações dividindo o estilo principal, ou uma ação rara instalada na região de título.
• Status, atributos, relações e mudanças misturados em uma tabela, de modo que nenhuma comparação se forma.
• Um grafo de relações quando só se queria consultar um nome e um status.
• Um modal carregando um fluxo longo, uma comparação ou algo cujo link alguém vai querer enviar.
• A mesma frase repetida no título, no resumo, na aba e na tabela, sem acrescentar nada novo em nenhum deles.

Checklist antes de publicar uma página

• A informação principal, a de apoio e a próxima ação estão escritas.
• O esqueleto foi escolhido a partir da pergunta, não do formato da resposta.
• A página tem um modelo principal e as visões de apoio servem a ele em vez de competir.
• Sem ler a especificação, o objeto, seu status e a ação principal ficam claros em cinco segundos.
• A comparação acontece em um lugar só; nada obriga a lembrar um valor entre abas ou páginas.
• Cada fato tem um lugar autoritativo e os demais apontam para ele.
• A densidade corresponde à frequência de uso e não aparecem mais de dois níveis vizinhos.
• Texto longo, números grandes e viewport estreita não quebram a ordem da informação.
• Todo bloco, campo, etiqueta e botão que não ajuda a julgar foi removido.