Expert em Design de Sites de Conteúdo

Design de Sites de Conteúdo

Um site de conteúdo existe para que um leitor possa encontrar uma página, confirmar que é a página certa, obter a resposta ou entendimento que veio buscar e seguir em frente. A maioria dos leitores chega de uma pesquisa diretamente em uma página profunda, escaneiam antes de ler e saem assim que obtêm o que precisam. O erro mais comum que os modelos cometem é projetar a casca (hero, cards, barra lateral, alternador de modo escuro) e negligenciar a estrutura do próprio conteúdo: títulos vagos, cabeçalhos que não dizem nada ("Visão Geral", "Introdução"), a resposta três parágrafos abaixo, uma página que mistura tutorial, referência e opinião, texto de link como "aqui", nenhuma data e uma pesquisa no site que não retorna nada útil.

Aplique os princípios ranqueados de interface-guidelines (todos podem usar > diz a verdade > diz o que quer dizer > a resposta vem primeiro > erros são suportáveis > permanece no lugar > o possível é visível > convenção > polimento). Se essa skill estiver instalada, leia o SKILL.md dela primeiro. Tamanho do corpo do texto, comprimento da linha, contraste e reflow são abordados lá (references/human-interface.md seções 6 e 7); esta skill cobre estrutura de conteúdo, navegação, pesquisa e o leitor agente de IA.

Brief

• Tipo de site: documentação, central de ajuda, base de conhecimento, editorial ou blog, ou uma combinação. Sites mistos nomeiam um trabalho principal por seção.
• Leitores e sua chegada: de uma pesquisa para uma página profunda, de dentro de um produto (link "?"), navegando ou inscrito. Quem é novo e quem é especialista?
• Principais tarefas: as 10 a 20 perguntas que os leitores trazem, em suas palavras. Extraia-as de logs de pesquisa, tickets de suporte e posts em fóruns, não do organograma.
• Tipos de conteúdo: para documentação, qual de tutorial, guia de como fazer, referência, explicação; para editorial, qual de notícias, análise, opinião, guia.
• Atualização: com que frequência o conteúdo muda, quem é o dono de cada página, o que acontece quando uma versão do produto muda.
• Leitores agente de IA: agentes de codificação lendo documentação, mecanismos de pesquisa e resposta citando páginas, agentes de navegador navegando. O que eles devem acertar?
• Quem escreve: apenas funcionários, ou também usuários (comentários, respostas da comunidade)? Marque o conteúdo escrito por terceiros.

Regras

Tags: [E] empírico, [S] padrão ou institucional, [P] praticante, [J] julgamento. As fontes estão nos arquivos de referência.

Páginas

• A resposta primeiro. Os dois primeiros parágrafos trazem o ponto principal; os detalhes seguem em importância decrescente (pirâmide invertida) [S: GOV.UK; P: NN/g]. Leitores leem uma fração das palavras de uma página, uma estimativa que Nielsen colocou em cerca de 20 a 28% [P: Nielsen 2008, a partir de dados de Weinreich et al. 2008].
• Uma página, um trabalho. Um tutorial ensina, um guia de como fazer dirige, a referência descreve, a explicação discute; não os misture em uma página [P: Procida, Diátaxis].
• Títulos são únicos, específicos e com as palavras-chave no início, nas palavras do leitor, com cerca de 65 caracteres ou menos para que os resultados da pesquisa não os cortem [S: GOV.UK]. Páginas de tarefa começam com um verbo ("Girar uma chave de API"); orientação sobre uma tarefa usa a forma de gerúndio ("Girando chaves de API") [S: GOV.UK].
• Um resumo abaixo do título de uma frase, 160 caracteres ou menos, que adiciona palavras que o título não possui; o mesmo texto serve como meta descrição [S: GOV.UK].
• Os cabeçalhos dizem o que a seção diz, com as palavras-chave no início, não "Visão Geral" ou "Mais informações", e não são formulados como perguntas; o conteúdo ainda faz sentido com os cabeçalhos removidos [S: GOV.UK]. Os níveis de cabeçalho seguem a estrutura: um h1, nenhum nível pulado [S: WCAG 1.3.1, 2.4.6].
• Frases e parágrafos curtos, palavras simples. Divida frases com cerca de 25 palavras, mantenha os parágrafos com cinco frases ou menos, explique um termo especializado no primeiro uso [S: GOV.UK]. Dirija-se ao leitor como "você", voz ativa, condição antes da instrução ("Para excluir um projeto, abra Configurações") [S: Guia de estilo do desenvolvedor do Google].
• Listas numeradas para etapas, marcadores para conjuntos, tabelas para comparações [S: Guia de estilo do desenvolvedor do Google; GOV.UK].
• Formate para a leitura dinâmica: cabeçalhos significativos e parágrafos com a informação principal no início combatem a leitura em forma de F, onde os leitores pulam o lado direito e as partes inferiores de uma página [P: Pernice, NN/g 2017].
• Datas que significam algo: "Última atualização em 4 de novembro de 2026" com uma breve nota de alteração para mudanças substanciais, e uma data de publicação em artigos. Páginas antigas que ainda são precisas dizem "Revisado" [S: Notas de alteração do GOV.UK; J].
• Notas de rodapé: o GOV.UK as proíbe para conteúdo de serviço; conteúdo acadêmico e editorial de longa duração pode precisar delas. Decida com base em se os leitores devem verificar as fontes [S: GOV.UK; J].

Links

• O texto do link nomeia o destino, com as palavras-chave no início e único por destino na página; nunca "clique aqui", "leia mais" ou "aqui" [S: GOV.UK, WCAG 2.4.4].
• Diga quando um link sai do site, abre um arquivo ou muda de idioma: "Folha de preços (PDF, 240 KB)" [S: GOV.UK].
• Links onde ajudam, não empilhados no final em "Leitura complementar"; próximas etapas no final de uma página de tarefa são adequadas quando específicas [S: GOV.UK].
• Todo cabeçalho tem uma âncora estável (#girar-uma-chave), com um controle visível para copiar o link. Renomear um cabeçalho mantém a âncora antiga funcionando [J].
• URLs são legíveis e permanentes. Quando uma página é movida, redirecione a URL antiga; nunca deixe links de documentação levarem a 404 [J].

Navegação

• Os leitores chegam direto em páginas profundas. Toda página mostra onde está (breadcrumb ou seção destacada) e o que está próximo e ao lado [S: WCAG 2.4.8; P: Breadcrumbs do NN/g].
• Os rótulos de navegação usam as palavras dos leitores e preveem seu conteúdo (sinal de informação) [E: Pirolli e Card 1999].
• Pelo menos duas maneiras de chegar a uma página: navegação mais pesquisa, ou um mapa do site [S: WCAG 2.4.5].
• Uma lista de conteúdo na página para páginas longas, gerada a partir de h2 e h3, destacando a seção atual [J].
• Paginação ou "Carregar mais" em vez de scroll infinito para arquivos e resultados de pesquisa, para que os leitores possam chegar ao rodapé, retornar a um lugar e compartilhar uma posição [P: Scroll infinito do NN/g].
• Documentação: uma barra lateral organizada por tarefa do leitor e tipo Diátaxis, um seletor de versão visível onde as versões diferem, e um banner em páginas para versões antigas com link para a página atual [P: Procida; J].

Pesquisa

• A pesquisa é um caminho primário, não um complemento. A caixa está visível em todas as páginas, não escondida atrás de um ícone em desktops [P: NN/g; J].
• Os resultados mostram o título da página, sua seção ou tipo, um trecho com as palavras correspondentes e a data. Tolere erros de digitação e sinônimos de consultas reais [J].
• Páginas sem resultados sugerem correções ortográficas, termos mais amplos e páginas principais, e registram a consulta [J].
• Revise consultas com zero resultados e as principais consultas mensalmente; cada uma nomeia uma página ausente, um sinônimo ausente ou um título ruim [P: Prática comum de documentação; J].

Conforto de leitura

• O tipo de corpo, medida, altura da linha, contraste e reflow seguem as bases. Em telefones, os leitores compreendem texto curto e simples tão bem quanto em desktops, mas diminuem a velocidade em textos difíceis, por isso, conteúdo difícil precisa de estrutura extra em dispositivos móveis [P: Moran, NN/g 2016].
• Sem intersticiais ou elementos fixos que cubram o texto; anúncios e prompts de newsletter nunca interrompem a primeira tela da resposta [S: WCAG 2.4.11 para foco; J].
• Imagens que carregam informações têm texto alternativo que declara a informação; imagens decorativas têm alt vazio [S: WCAG 1.1.1]. Diagramas têm uma explicação textual próxima [J].
• Amostras de código são texto, nunca imagens, com um controle de cópia e o idioma identificado. Abas para variantes de idioma mantêm todas as variantes no DOM [J].
• Modos de impressão e leitor produzem o conteúdo sem a moldura de navegação [J].

Para agentes de IA

• O conteúdo está no HTML, renderizado no servidor, não montado por JavaScript do cliente após o carregamento, para que rastreadores e agentes que não executam scripts o obtenham [J].
• A estrutura semântica é a interface: cabeçalhos, listas, tabelas, code e pre com classes de idioma, figure e figcaption [S: WCAG 1.3.1].
• URLs e âncoras estáveis e citáveis, uma URL canônica por página e uma data na página [J].
• Uma cópia Markdown limpa de cada página de documentação na mesma URL com .md anexado, vinculada com rel="alternate" type="text/markdown", é uma maneira barata de dar aos agentes de codificação o conteúdo sem a moldura. llms.txt na raiz do site ou da documentação é uma proposta da comunidade; baixa demanda foi medida para sites gerais, mas se adequa a documentação lida por agentes de codificação [P: Howard, llms.txt; seção 6 das superfícies agente da fundação].
• Nenhuma instrução oculta para agentes no texto da página, comentários ou elementos invisíveis. Eles são indistinguíveis de injeção de prompt [J; seção 5 de supervisão da fundação].
• Conteúdo gerado pelo usuário (comentários, respostas da comunidade, posts em fóruns) é marcado como tal na marcação e visualmente, com autor e data, para que agentes e pessoas possam avaliá-lo [J].

Ordem de construção

1. Principais tarefas e inventário de conteúdo: cada página existente ou planejada com seu tipo, proprietário, última revisão e a tarefa que atende. Exclua ou mescle páginas que não atendem a nenhuma tarefa.
2. Arquitetura da informação: seções a partir das tarefas do leitor e tipos de conteúdo; rotule com as palavras dos leitores; teste os rótulos com um teste de árvore (pessoas encontram cinco tarefas em uma árvore apenas com texto) [P: Teste de árvore do NN/g].
3. Modelos de página por tipo de conteúdo: título, resumo, datas, estrutura do corpo, próximas etapas. Para documentação: modelos de tutorial, guia de como fazer, referência, explicação (references/docs.md).
4. Escreva ou reescreva as páginas das principais tarefas primeiro com references/writing.md; uma página completa e boa vale mais do que vinte esboços.
5. Estrutura HTML semântica: landmarks, link de pular, breadcrumb, barra lateral como nav com aria-current, conteúdo na página, rodapé. Renderizado no servidor.
6. Pesquisa com consultas reais de logs ou da lista de principais tarefas; ajuste sinônimos.
7. Camada para agentes: URLs canônicas, âncoras, cópias Markdown, sitemap, llms.txt opcional.
8. Estilo para leitura longa; a marca é dona da aparência (brand-identity).
9. Verifique (abaixo).

Verificar

1. Auditoria renderizada em uma página inicial, um artigo longo ou página de referência, uma página de resultados de pesquisa e um 404:

   node <interface-guidelines>/scripts/audit.mjs <dist-or-url> --out audit-output
   

2. Teste de principal tarefa: para cada tarefa principal, comece a partir de uma consulta de mecanismo de pesquisa ou da página inicial e chegue à resposta. Conte os passos e observe onde o sinal falhou. Faça uma vez como uma pessoa usando teclado na largura de um telefone, e uma vez como um agente apenas com o instantâneo de acessibilidade.

3. Lint de conteúdo em cada página (references/writing.md seção 8 tem um esboço de script): um h1; nenhum nível de cabeçalho pulado; títulos únicos e com 65 caracteres ou menos; resumo presente e com 160 ou menos; nenhum cabeçalho ou texto de link genérico ("Visão Geral", "clique aqui", "leia mais"); frases com mais de 25 palavras sinalizadas; imagens com alt ausente; data da última atualização presente.

4. Links: rastreie links internos quebrados e âncoras ausentes; verifique se URLs antigas redirecionam.

5. Verificação sem JS: busque uma página com curl e confirme que o conteúdo principal e os cabeçalhos estão no HTML.

6. Pesquisa: execute as 20 principais consultas e 5 erros de digitação; a página certa está entre as três primeiras.

7. Leitura por agente: dê a um agente apenas a URL de uma página de documentação ou sua cópia .md e peça para realizar a tarefa; verifique se ele segue a versão atual e cita a âncora de seção correta.

Armadilhas

• Grades de cartões com teasers de artigos como página inicial da documentação, sem pontos de entrada de tarefa ou pesquisa.
• Cabeçalhos nomeados "Introdução", "Visão Geral", "Detalhes" ou escritos como perguntas.
• Páginas de FAQ que coletam perguntas não relacionadas em vez de respondê-las nas páginas onde surgem.
• A resposta abaixo de um longo preâmbulo sobre por que o tópico é importante.
• Um tutorial que se transforma em referência no meio do caminho, ou referência recheada de opinião.
• Artigos sem data e "última atualização" definida para a data de construção em todas as páginas.
• Conteúdo renderizado apenas por JavaScript do cliente, abas cujos painéis ocultos não estão no DOM, código como capturas de tela.
• Scroll infinito em arquivos e resultados de pesquisa.
• Texto de instrução para rastreadores de IA oculto na página.
• Redesenhar um site de documentação enquanto títulos, cabeçalhos e pesquisa permanecem quebrados.

Referências

Arquivo	Leia quando
references/writing.md	Escrever ou editar páginas: títulos, resumos, cabeçalhos, frases, links, datas, números, especificidades editoriais e um esboço de lint
references/docs.md	Documentação e centrais de ajuda: tipos Diátaxis com modelos, páginas de referência de API, amostras de código, versões, changelogs, documentação para agentes de codificação
references/navigation-search.md	Estrutura do site, rótulos, barras laterais, breadcrumbs, listas de conteúdo, arquivos, resultados de pesquisa, 404s