Pular para o conteúdo

Personas de design inclusivo

Oito personas arquetípicas — quatro eixos de habilidade (visão, motora, cognição, audição) em três estados de permanência (permanente, temporário, situacional). Auditorias WCAG dizem O QUE falha; personas dizem QUEM quebra.

Por que personas

Linhas WCAG nomeiam o modo de falha; personas nomeiam a pessoa. O mesmo focus ring esquecido é "a auditoria não passou" pra um time e "o Jamal, pai, digitando com uma mão só no café da manhã, não consegue fechar o modal" pra outro. O segundo enquadramento expõe correções de design que o primeiro perde.

As oito personas

Avatar abstrato — eixo da visão
P1 Visão Permanente

Cláudia — usuária avançada de baixa visão

Cláudia é analista de dados e passa o dia no computador com leitor de tela e zoom em 200%. É rápida — navega por atalhos e conhece os apps melhor que muito colega que enxerga. O que a trava não é a tarefa, é o detalhe mal-feito: um botão sem nome acessível que o leitor anuncia como “botão, botão”, um status que só mudou de cor, um anel de foco que some no fundo escuro. Quando o app respeita isso, ela fecha o relatório antes do café esfriar.

Ferramentas que usam
Leitor de tela (TalkBack / VoiceOver / NVDA), zoom 200%, modo alto contraste do SO.
Restrições de design que expõem
Nome acessível em todo elemento interativo; nenhuma pista só por cor; contraste do focus ring ≥ 3:1.
Specs relacionadas
themes/light-dark.kmd · policies/focus-management.kmd · accessibility/aria-roles.kmd
Avatar abstrato — eixo da visão
P2 Visão Situacional

Renato — entregador sob sol forte

Renato faz entregas de moto e resolve tudo pelo celular na rua, sol a pino, brilho no máximo. Naquele momento ele enxerga como qualquer pessoa numa tela estourada de reflexo: texto cinza-claro vira fantasma e o botão de destaque some no degradê. Ele precisa confirmar o endereço em três segundos, parado no farol. Contraste alto e um acento que aguenta o sol decidem se ele acerta a rua ou dá meia-volta.

Ferramentas que usam
Celular ao ar livre em sol forte; brilho automático no máximo.
Restrições de design que expõem
Contraste de texto ≥ 7:1 (AAA); acento ≥ 4.5:1; gradiente escuro sob texto sobre fotos.
Specs relacionadas
themes/light-dark.kmd · themes/high-contrast.kmd
Avatar abstrato — eixo motor
P3 Motora Permanente

Henrique — usuário avançado só de teclado

Henrique trabalha com suporte e opera tudo por teclado e um switch — não usa mouse. Pra ele, “clicável” não significa nada; o que importa é se dá pra chegar lá com Tab, Enter e Esc, e se o foco fica visível a cada passo. Um menu que só abre no hover, ou um arrastar-e-soltar sem alternativa, é uma porta trancada. Quando todo fluxo é alcançável pelo teclado, ele fecha chamados no ritmo de qualquer um.

Ferramentas que usam
Teclado externo, switch device, head-tracker.
Restrições de design que expõem
Todo fluxo alcançável via Tab + Enter + Escape; indicador de foco visível; sem caminhos só-arrasto / só-hover.
Specs relacionadas
policies/focus-management.kmd · navigation/back-behavior.kmd
Avatar abstrato — eixo motor
P4 Motora Temporário

Bia — uma mão só (braço quebrado)

Bia quebrou o braço direito no fim de semana e passou um mês usando o celular só com a mão esquerda, o polegar fazendo todo o trabalho. De repente metade dos apps virou ginástica: botão importante no topo da tela, alvo pequeno demais, gesto na borda de baixo brigando com o do sistema. Ela não virou “usuária com deficiência” — está, por algumas semanas, como milhões de pais com o bebê no colo. Ação principal na zona do polegar resolve o dia dela.

Ferramentas que usam
Alcance só com polegar no celular; um braço na tipoia.
Restrições de design que expõem
Alvos de toque ≥ 44 dp; ações primárias na zona do polegar; sem swipes que conflitam com o gesto do SO.
Specs relacionadas
app-layout/safe-area.kmd · policies/single-hand-reach.kmd (em breve)
Avatar abstrato — eixo da cognição
P5 Cognição Permanente

Théo — dislexia + TDAH

Théo é estudante, tem dislexia e TDAH, e lê melhor com fonte limpa, texto direto e sem coisa se mexendo na tela. Animação que repete, frase de erro cheia de oração subordinada, conteúdo que some sozinho por timeout — tudo isso rouba o fio do que ele estava fazendo. Ele não quer menos funcionalidade, quer menos ruído. Linguagem simples e reduced-motion respeitado são a diferença entre terminar a inscrição e desistir no meio.

Ferramentas que usam
Preferência por movimento reduzido, escala de fonte do SO.
Restrições de design que expõem
prefers-reduced-motion: reduce honrado; linguagem simples nas mensagens de erro; sem dispensa por timeout em conteúdo crítico.
Specs relacionadas
errors/user-facing-messages.kmd · motion/reduced-motion.kmd
Avatar abstrato — eixo da cognição
P6 Cognição Situacional

Marina — mãe entre interrupções

Marina está preenchendo um cadastro quando a filha derruba o copo, a campainha toca e o WhatsApp apita — tudo no mesmo minuto. Ela larga o celular, resolve a vida e volta cinco minutos depois. A pergunta é só uma: o app guardou o que ela já tinha digitado, ou ela recomeça do zero? Auto-save a partir de três campos e “continuar de onde parou” decidem se ela termina ou abandona o formulário.

Ferramentas que usam
Celular interrompido com frequência por criança, conversa, campainha.
Restrições de design que expõem
Auto-save em formulários com ≥ 3 inputs; restaurar de onde parou ao retomar app; janela de undo pra ações destrutivas.
Specs relacionadas
koder-app/behaviors.kmd § Persistência de estado
Avatar abstrato — eixo da audição
P7 Audição Permanente

Murilo — surdo, LIBRAS L1

Murilo é surdo e tem a LIBRAS como primeira língua — o português escrito é a segunda. Ele resolve quase tudo sozinho no visual, mas trava onde o app conta só com o ouvido: um “pronto!” que só toca, um vídeo sem legenda, um aviso que só apita. Legenda em todo clipe com fala, confirmação visual no lugar do som e overlay de LIBRAS onde dá fazem o app falar a língua dele.

Ferramentas que usam
Intérprete de LIBRAS, legendas ligadas, notificações visuais.
Restrições de design que expõem
Sem feedback só por áudio; legendas em todo clipe de movimento com fala; overlay LIBRAS disponível onde aplicável.
Specs relacionadas
voice/wake-word.kmd § Feedback visual · sound/vocabulary.kmd § R4 · services/ai/libras
Avatar abstrato — eixo da audição
P8 Audição Situacional

Camila — reunião / café barulhento

Camila está numa reunião com o celular no silencioso, ou no meio do barulho de um café cheio. Naquele contexto ela é, na prática, surda pro app: não vai ouvir o “enviado” nem o alerta de erro. Ela precisa ver que a mensagem saiu, que o pagamento foi salvo, que algo falhou — um toast claro, e vibração como canal extra. Sem isso, ela toca de novo na dúvida e duplica a ação.

Ferramentas que usam
Celular no silencioso em reunião; barulho ambiente abafando o áudio.
Restrições de design que expõem
Toast visual confirma toda ação "enviado / salvo / erro"; vibração disponível como canal secundário.
Specs relacionadas
errors/user-facing-messages.kmd · sound/vocabulary.kmd

Como usar esta página

Quando revisar uma UI, pegue três personas — uma de cada eixo de habilidade que você ainda não testou hoje. Percorra o fluxo como se fosse elas. Os cards apontam pras specs cujos testes deveriam pegar as restrições; se faltar teste, abra um ticket.