Peça de decisão · 01/09/2026

Três caminhos para o painel de controle do simulador

O problema

O painel tem dois filtros. Quais áreas entram na conta, e de quais áreas o trio pode sair. Hoje cada grupo carrega título, três linhas de texto, sete botões de 25px e uma caixa de efeito. O veredito do dono foi que ficou mais poluído sem mudar quase nada.

O que a pesquisa achou

79% das pessoas escaneiam a tela em vez de ler linha a linha (Nielsen, 1997). Segmented control serve para 2 a 5 opções, e aqui são sete. Rótulo concreto resolve o entendimento, e o conceito técnico vai para um ícone de informação (Moran, 2018).

Como comparar

As três maquetes abaixo funcionam. Clique numa área e os números se movem. Estado cheio: 49 pessoas, 7 áreas, 48 trios. Escolha pela leitura, e depois a gente constrói só a escolhida no simulador de verdade.

Os três caminhos, lado a lado

Mesmo dado, mesma interação, mesma paleta. O que muda é onde a tinta foi gasta.

Caminho 01

Matriz de duas colunas

recomendado
Pessoas 49 7 áreas na conta
Trios 48 estado cheio
Área Na conta No trio
Ganha
O cabeçalho de duas palavras substitui os seis parágrafos. A coluna direita apaga sozinha quando a esquerda esvazia, e isso desenha a relação de pai e filho sem uma frase. A lista de sete áreas aparece uma única vez na tela.
Perde
Duas colunas de alvo exigem cuidado no celular, onde a linha fica apertada. O rótulo curto é abstrato na primeira leitura, e depende de um passe de olho pela grade para fazer sentido.
Fonte
Tufte (1983) e Few, data-ink ratio: a tinta fica no dado. Apple, Product Configurator Matrix: pilha de opções com bloco de resumo que se atualiza. Nielsen (1997), 79% escaneiam.
Alvo medido
medindo

Caminho 02

Inversão de peso

o resultado vira o palco
Na conta
No trio
Pessoas na conta 49 7 de 7 áreas
Trios que fecham 48 estado cheio
Ganha
Zero parágrafo no caminho de quem já entendeu, com a explicação a um clique de distância. O resultado ganha o tamanho que merece, e a altura fica reservada para nada saltar quando o número muda.
Perde
Os dois grupos continuam empilhados, e a área ainda aparece duas vezes. A relação de dependência fica implícita, apoiada só no estado apagado da segunda lista.
Fonte
Moran, NN/g (2018): rótulo concreto resolve, conceito técnico vira ícone de informação. Nielsen, NN/g (2006), Progressive Disclosure, com o teto de dois níveis. Kaplan, NN/g (2025), o perfil The Learner.
Alvo medido
medindo

Caminho 03

Console de instrumento

o mais arriscado
Pessoas 49 7 áreas na conta
Trios 48 estado cheio
Área
Conta Trio
Estado
Ganha
Uma faixa por área, sem grupo repetido. A leitura fica direta: mexo na faixa aqui embaixo e o número lá em cima se move. É a densidade mais alta dos três.
Perde
A barra de sinal é uma codificação nova, que a pessoa precisa aprender no primeiro uso. Se ela for a única codificação, reprova em acessibilidade, porque estado transmitido só por preenchimento visual falha para quem não distingue o preenchimento. Aqui a alternativa textual à direita de cada faixa está ligada, e ela é obrigatória neste caminho.
Fonte
Few e Tufte, data-pixel ratio levado ao limite. WCAG 2.2 SC 2.5.8, alvo mínimo de 24 por 24 CSS px. Lei de Tesler: esconder complexidade deixa ela existindo em outro lugar, e aqui ela reaparece como custo de aprendizado.
Alvo medido
medindo

Sobre o número de trios. Com tudo marcado o valor é o real do simulador: 49 pessoas, 7 áreas, 48 trios que fecham. Fora do estado cheio, o número de trios exibido aqui é ilustrativo, calculado por uma proporção simples só para a maquete reagir. A matemática de composição de verdade mora no simulador, e nenhum valor desta página serve como resultado.

Fecho

O que eu recomendo, e por quê

Um caminho, com o risco dele escrito junto.

Caminho 01, a matriz

Ele é o único que resolve a causa do incômodo em vez de mudar a aparência dela. O painel atual repete a lista de sete áreas duas vezes e gasta seis linhas de texto explicando uma relação que a grade mostra sozinha.

Dois cabeçalhos de uma palavra fazem o trabalho dos seis parágrafos, e a coluna direita apagando quando a esquerda esvazia diz o que "subconjunto" queria dizer.

Por que os outros dois ficam

O caminho 02 acerta em promover o resultado, e essa parte dele vale ser levada para dentro do 01: os dois data tiles do topo já são essa ideia.

O caminho 03 é a leitura mais densa e a mais bonita de olhar, com o custo de inventar uma codificação que a Fernanda e o Renato precisam aprender. Eles são especialistas de domínio, novos no software, que é o perfil que mais sofre com convenção inventada.

O risco do 01, dito em voz alta

"Na conta" e "no trio" são rótulos curtos e abstratos. Se a grade não deixar isso óbvio, o ganho de tinta vira perda de compreensão, e a correção é acrescentar um ícone de informação por coluna, do jeito do caminho 02.

O segundo risco é o celular. Duas colunas de alvo numa tela de 390px ficam apertadas, e a solução é a linha virar bloco, com os dois alvos ocupando meia largura cada.

Fontes

O que sustenta cada afirmação acima.

  1. Edward Tufte, The Visual Display of Quantitative Information (1983), e Stephen Few. Data-ink e data-pixel ratio: a tinta pertence ao dado.
  2. Material Design 3 e Apple Human Interface Guidelines. Segmented control serve para 2 a 5 opções, e acima disso o componente muda.
  3. Jakob Nielsen, NN/g (1997), How Users Read on the Web. 79% escaneiam, 16% leem palavra por palavra.
  4. Kate Moran, NN/g (2018), Defining Helpful Filter Categories and Values. Rótulo concreto resolve, e conceito técnico vai para um ícone de informação.
  5. Jakob Nielsen, NN/g (2006), Progressive Disclosure. Nunca passar de dois níveis.
  6. Kate Kaplan, NN/g (2025), 3 Complex-App User Types. O perfil The Learner: especialista de domínio, novo no software.
  7. W3C, WCAG 2.2, SC 2.5.8 Target Size (Minimum). Alvo mínimo de 24 por 24 CSS px.
  8. Lei de Tesler, da conservação da complexidade. Esconder complexidade deixa ela existindo em outro lugar.
  9. Miller e a literatura de memória de trabalho. Cerca de 4 itens confiáveis, 7 no limite.
  10. Apple, Product Configurator Matrix. Pilha de opções mais bloco de resumo contextual que se atualiza.