Hoff NDS: a especificação do design system neurodivergente da Hoff Research

Trabalho em andamento (WIP): esta especificação ainda está mudando.

Este é o Hoff NDS, o design system que eu uso nos produtos da Hoff Research e aplico, às vezes em silêncio, em todo projeto novo. A evidência por trás de cada regra está no post sobre design system para pessoas neurodivergentes. Aqui fica só a norma.

Propósito e escopo

O sistema existe pra reduzir carga cognitiva, ansiedade e erro em interface digital, priorizando pessoas neurodivergentes e beneficiando todo mundo. Cobre três tipos de limitação:

• Permanente, como baixa visão, dislexia e autismo
• Temporária, como lesão, fadiga e efeito de medicação
• Situacional, como ambiente barulhento, conexão ruim e estresse

A premissa: o aprendizado e a decisão acontecem no cérebro, não na tela. Cada esforço gasto pra decifrar a interface é esforço tirado da tarefa real. O papel do design é baixar o custo de ler, navegar e decidir.

Não é um tema visual. É um conjunto de regras com justificativa. Cada seção declara a regra, o motivo, os neurotipos que atende e os princípios de UX que a sustentam. Quando a regra tem número, o número é normativo.

Fundamentos

Carga cognitiva. Pessoas com TDAH têm desempenho menor e mais variabilidade de tempo de reação sob carga alta. Por isso só fica visível o que serve ao objetivo da tela. Se um elemento não informa a tarefa, ele distrai dela.

Estresse bom e estresse ruim. Existe um nível de tensão que ajuda o foco e um nível que paralisa. A interface absorve o estresse de operar, de procurar e de errar, pra que a tensão da pessoa vá pro conteúdo.

Previsibilidade. Mudança inesperada de layout, posição ou nome quebra o modelo mental e derruba o foco, com custo maior pra pessoas autistas e com TDAH. Posição importante é estável entre telas, o nome de uma ação persiste do início ao fim do fluxo, e nada se move sem ação da pessoa.

Personalização como requisito. Preferência sensorial varia entre neurotipos e dentro deles. O sistema exige no mínimo três temas de cor (escuro, claro e alto contraste), três tamanhos de texto e um controle que desliga animação. Esses controles ficam à vista, não enterrados em configurações.

Conservação de complexidade. Há uma complexidade mínima que não dá pra remover sem destruir a função. Simplificar além disso deixa tudo mais confuso. A meta é tirar o excesso e preservar a função.

Designer tem que entender de cor, sim

O contraste guia a escolha de cor, não a estética. Texto corrido busca 7:1 ou mais (nível AAA). O mínimo absoluto pra qualquer texto informativo é 4,5:1 (nível AA).

Regra. A paleta inteira tem baixa saturação: sem neon, sem cor vibrante, sem brilho extremo. Cor nunca é o único portador de informação. Todo estado comunicado por cor vem com texto, ícone ou forma.

Motivo. Cor vibrante e contraste cromático forte causam desconforto e sobrecarga sensorial em pessoas autistas, com TDAH e com estresse visual. Em TDAH há evidência de discriminação de cor reduzida, principalmente no eixo azul-amarelo, e o daltonismo vermelho-verde é a forma mais comum na população. Os dois reforçam a proibição de cor como sinal único. O tema escuro é o padrão porque boa parte do uso é à noite, quando menos luz na tela incomoda menos.

Paleta de referência:

Tema de alto contraste: fundo preto, texto branco, acentos clareados e bordas reforçadas. A razão de contraste de cada par é verificada por ferramenta a cada mudança de token. Texto esmaecido nunca carrega informação, só hierarquia.

Estado do sistema tem semântica fixa: positivo pra sucesso, atenção pra erro e alerta, acento pra ação e seleção. A mesma cor nunca significa coisa diferente em outra tela.

Neurotipos: baixa visão, daltonismo, síndrome de Irlen e estresse visual, autismo, TDAH. Princípios: conectividade uniforme e efeito estética-usabilidade, com a ressalva de que beleza não pode esconder problema.

Tipografia, antes de passar um dia inteiro procurando fonte

Regra. Fonte sem serifa, humanista, com letras bem distintas. Corpo de 1rem a 1,25rem sobre base de 16px, ou seja, 16 a 20px. Entrelinha de 150% a 170%. Espaçamento entre letras levemente aumentado: 0,005em a 0,02em no corpo e cerca de 0,03em em texto pequeno, como rótulo e legenda. Título pelo menos 20% maior que o corpo, diferenciado por peso, nunca por troca de família. Linha de no máximo 66 caracteres.

Motivo. Fonte humanista tem aberturas maiores e formas de letra mais distintas, o que sustenta a leitura em tela comum e em tamanhos variados. Espaçamento maior reduz o crowding, que atrapalha muito quem tem dislexia, e é a mudança tipográfica com mais evidência a favor. Fonte vendida como "para dislexia" não mostrou benefício em estudo controlado.

Caracteres sem sósia. A fonte distingue sem ambiguidade o I maiúsculo, o l minúsculo e o 1; as letras espelhadas b, d, p e q; o zero e o O. Sequência alfanumérica, como senha, código e identificador, aparece numa fonte que garante essas distinções, com espaço extra.

Serifa fica restrita a contexto editorial opcional, nunca em texto funcional, porque parte das pessoas usa tela de baixa densidade, onde a serifa degrada.

Neurotipos: dislexia, discalculia, baixa visão, função executiva, síndrome de Irlen. Princípio: pregnância.

Números são universais

Regra. Sequência numérica longa é segmentada como no mundo real: telefone em blocos, documento em blocos, cartão em grupos de quatro. Campo numérico corrige erro previsível na hora, como a letra o no lugar do zero. Toda quantidade ou tempo em dígitos vem com apoio visual: barra de progresso com a porcentagem escrita, contador de etapas com a atual destacada, ou uma representação gráfica da proporção.

Motivo. Discalculia é uma dificuldade persistente com números, que independe de idade e escolaridade. Tempo restante dito só como número não significa nada pra alguns perfis. Uma barra pela metade com o texto "50%, 3 de 6" passa o mesmo dado por três canais. Mas há limite: trocar o número inteiro por animação abstrata passa do ponto e confunde. O número fica, o visual acompanha.

Neurotipos: discalculia, dislexia, função executiva, baixa visão. Princípios: pregnância, lei de Tesler, navalha de Occam.

Espaçamento, respiro (por favor) e layout

Regra. Escala de espaçamento em ritmo de 4: 4, 8, 12, 16, 24, 32, 48, 64 e 96 pixels. Espaço em branco generoso entre grupos. O que é relacionado fica perto, o que não é fica visivelmente separado. Uma coluna principal de leitura; conteúdo nunca disputa colunas paralelas de mesma hierarquia. Navegação, conteúdo e ação ficam na mesma região em toda tela e em todo tamanho de viewport.

Motivo. Espaço em branco é informação: comunica agrupamento e hierarquia antes da leitura. Layout denso aumenta o custo de varredura, com penalidade maior pra TDAH. A escala fixa elimina decisão arbitrária e mantém o ritmo previsível.

Neurotipos: TDAH, dislexia, autismo, função executiva. Princípios: pregnância, conectividade uniforme, lei de Jakob.

Alvos de toque e clique

Regra. Alvo mínimo de 48 por 48 pixels em qualquer elemento interativo. Ação primária com 60 por 60. Interface pra criança usa 60 como mínimo e 80 a 100 pixels em ação crítica, principalmente abaixo de 8 anos. Pelo menos 8 pixels entre alvos vizinhos, 16 quando der. A área ativa pode ser maior que o desenho do elemento, tolerando toque um pouco fora.

Motivo. Alvo maior e mais perto reduz tempo de seleção e erro. Pra quem tem dispraxia e pra criança com coordenação fina em desenvolvimento, área grande reduz o esforço físico. Arrastar com precisão é difícil pra criança pequena e sempre tem alternativa por toque.

Neurotipos: dispraxia, TDAH, baixa visão, criança em desenvolvimento motor. Princípio: lei de Fitts.

Movimento

Esta seção é de saúde, não de estética. Nada pisca mais de três vezes por segundo, sem exceção, por risco de convulsão fotossensível.

Regra. Transição de 200 a 500 milissegundos, lenta, previsível e do mesmo tipo no produto inteiro; prefira opacidade e cor, evite deslocamento grande. Animação ocupa menos de um terço da tela. Nenhuma animação roda sozinha em loop. A preferência de movimento reduzido do sistema é sempre respeitada, trocando animação por transição simples de opacidade, e a interface ainda tem um controle próprio pra desligar todo movimento. Proibidos: rotação contínua, paralaxe, carrossel automático, elemento que entra voando, confete e qualquer movimento não pedido.

Motivo. Movimento na tela causa náusea, tontura e desorientação em quem tem desordem vestibular. Animação irrelevante atrapalha mais as pessoas autistas do que a média. Pra TDAH, movimento constante é distração permanente, mesmo na visão periférica, porque o olho vai atrás.

Neurotipos: epilepsia fotossensível, desordem vestibular, autismo, TDAH, pessoa altamente sensível. Princípio: limiar de Doherty.

Botões, links e campos

Regra. O que é clicável parece clicável, visualmente diferente de qualquer elemento decorativo. Todo elemento interativo tem quatro estados visíveis: repouso, hover, foco e ativo. O foco é um anel de 3 pixels com afastamento de 2 a 3 pixels, em cor de alto contraste, visível em qualquer tema, e nunca é removido. Uma única ação primária por tela, com hierarquia clara entre primária, secundária e discreta. Ícone reforça a intenção, mas não substitui texto em ação importante.

Campo de formulário: rótulo sempre visível acima do campo, nunca só placeholder, porque o placeholder some justo quando a memória de trabalho mais precisa dele. Texto de apoio antes do campo quando o formato não é óbvio. Altura mínima igual à do alvo de toque. Validação no momento certo: nem a cada tecla, nem só no envio.

Motivo. Botão e link são os elementos mais críticos da página. Acessibilidade vai além de HTML semântico e rótulo pra leitor de tela: o desenho decide se a pessoa hesita ou age. Hesitação é carga, e ambiguidade é erro adiado.

Neurotipos: dispraxia, dislexia, TDAH, função executiva, quem usa teclado e leitor de tela. Princípios: lei de Fitts, efeito von Restorff, navalha de Occam.

Formulários e prevenção de erro

Regra. Processo pesado, como cadastro, pagamento e configuração inicial, é dividido em passos curtos, um assunto por passo, com a posição clara: etapa atual, total e o que vem depois. O sistema é liberal no que aceita e rigoroso no que devolve: aceita espaço, traço, ponto e maiúscula trocada, e normaliza sozinho. O progresso é salvo, porque interrupção é a regra, não a exceção, pro público prioritário.

Mensagem de erro não pede desculpa, não culpa e não é vaga. Diz o que aconteceu e como resolver, numa frase. Por exemplo: "Faltam dois dígitos. Um celular tem 11 números com o DDD."

Motivo. Diante de um fluxo longo e opaco, quem tem TDAH ou dificuldade de função executiva tende a abandonar ou a pegar o caminho mais barato, mesmo errado. Passo curto com posição visível troca um custo grande por vários pequenos, com sensação de avanço.

Neurotipos: TDAH, função executiva, discalculia, ansiedade. Princípios: lei de Miller, lei de Postel, lei de Parkinson, regra do pico e fim.

Comunicação do sistema

Regra. Aviso, validação, notificação e mensagem seguem um padrão visual único por tipo, no produto inteiro. Sucesso é acolhedor e direto. Erro é educado e orientado à solução. O nome de uma ação persiste no fluxo todo: o botão "publicar" gera a confirmação "publicado", nunca um sinônimo. Notificação existe pra servir a pessoa, não pra trazê-la de volta: nada de re-engajamento, urgência fabricada ou escassez artificial. A pessoa controla o que recebe, e o padrão é o mínimo.

Motivo. Convenção quebrada e estilo inconsistente geram desconfiança e derrubam o foco. Onboarding não substitui clareza: a tela precisa ser compreensível antes da primeira interação. Tutorial é remendo de interface que falhou.

Neurotipos: TDAH, dislexia, função executiva, autismo. Princípios: lei de Jakob, lei de Miller, regra do pico e fim.

Legendas, áudio e mídia

Regra. Toda mídia falada tem legenda sincronizada, em texto claro sobre fundo escuro sólido, em blocos de até duas linhas. Áudio nunca começa sozinho. Todo player tem pausa, voltar e controle de velocidade. Conteúdo essencial nunca existe só em áudio ou só em vídeo: sempre há alternativa em texto.

Motivo. Legenda serve a quem é surdo ou ouve pouco, a quem processa melhor lendo, a quem está num lugar barulhento e a quem precisa de reforço pelos dois canais. Som inesperado é agressão sensorial pra perfil autista e altamente sensível.

Neurotipos: surdez e baixa audição, autismo, TDAH, pessoa altamente sensível, processamento auditivo. Princípios: redundância de canal e pregnância.

Conteúdo e tom de escrita

Regra. Voz ativa, frase curta, uma ideia por frase, um assunto por parágrafo. O nome descreve o que a pessoa controla e reconhece, nunca como o sistema foi construído. Botão diz exatamente o que acontece: "salvar alterações", não "enviar". Linguagem simples sem infantilizar. Jargão só quando é o termo que a pessoa precisa aprender, e aí explicado na primeira vez. Cada palavra na tela tem função; o que não ajuda a entender sai.

Motivo. Pra quem tem dislexia, e pra qualquer pessoa sob carga, o custo de decodificar o texto compete com o conteúdo. Concisão é acessibilidade.

Neurotipos: dislexia, TDAH, função executiva, quem não é falante nativo. Princípios: navalha de Occam, lei de Tesler.

Padrões de interface

Regra. Conteúdo primeiro: cada tela parte do objetivo da pessoa, e o que não serve ao objetivo sai. Navegação consistente, com os mesmos itens nos mesmos lugares. Nada de pop-up interrompendo a tarefa, salvo risco real e imediato. Nada de mudança de layout sem ação da pessoa. Densidade controlada: mostrar mais sob demanda em vez de despejar tudo. Modo de foco disponível nos fluxos longos, escondendo o que não é a tarefa atual.

Motivo. Diante de muitas opções concorrentes, quem tem TDAH tende a travar ou a escolher a tarefa mais barata. Conservar complexidade significa gastá-la onde gera valor: no conteúdo, não na operação.

Neurotipos: TDAH, autismo, função executiva, ansiedade. Princípios: paradoxo da complexidade, lei de Hick, lei de Jakob, efeito estética-usabilidade.

Tokens

Neurotipos considerados

Princípios de UX

Checklist de conformidade

Antes de publicar qualquer tela:

• Contraste de todo texto informativo em 4,5:1 no mínimo e 7:1 no corpo
• Fonte sem serifa humanista, com I, l e 1, b, d, p e q, 0 e O distintos
• Entrelinha de 150% ou mais e linha de até 66 caracteres
• Todo alvo interativo com 48 pixels ou mais e 8 pixels de respiro
• Foco visível por teclado em todo elemento interativo
• Nenhum lampejo acima de três por segundo
• Movimento reduzido respeitado e controle local de movimento presente
• Três temas e três tamanhos de texto funcionando
• Rótulo visível em todo campo e erro orientado à solução
• Número longo segmentado e quantidade com apoio visual
• Mídia falada com legenda e sem reprodução automática
• Uma ação primária por tela
• Nome de cada ação igual do início ao fim do fluxo
• Nenhuma mecânica de engajamento compulsivo

Processo

O sistema é um documento vivo. Toda regra nova entra com justificativa e neurotipos atendidos, e toda regra existente pode ser contestada com evidência melhor. Teste com pessoa neurodivergente real faz parte do ciclo de design, com metodologia participativa, e não é etapa final de validação. Quando o teste contradiz a regra, a regra muda, e a mudança é registrada com data e motivo.

Hoff Research. Make it simple, but significant.