Diagnóstico Visual de Interface

Passo 1 — Observação sem análise dimensional

Antes de entrar em qualquer dimensão específica, observar a interface como um todo. Simular dois modos de olhar: o de um usuário novo que abre a interface pela primeira vez, e o de um observador experiente que avalia qualidade visual geral. Registrar observações brutas antes de formulá-las como problemas:

- Qual é a primeira impressão?

- O que o olho vai primeiro — e esse elemento merece essa posição? - A interface comunica o tom de marca documentado na ficha de contexto? - Há algo que imediatamente parece genérico, desequilibrado ou sem intenção? - O que está funcionando visualmente — e por quê?

Passo 2 — Aplicar o teste da névoa

Imaginar a interface com visão levemente desfocada — como se olhasse sem óculos. Com essa perspectiva:

- É possível identificar o elemento mais importante da tela?

- Os grupos de informação são visíveis como blocos distintos ou tudo se mistura? - Há áreas de peso visual que não correspondem à importância do conteúdo? - O ritmo geral é uniforme (monótono) ou tem variação intencional?

Este teste isola problemas de hierarquia e estrutura que passam despercebidos em leitura detalhada.

Passo 3 — Detectar padrões de baixa qualidade visual

Verificar a presença de padrões que tipicamente indicam design produzido sem intenção sistemática:

**Espaçamento sem sistema:**

- Margens e paddings inconsistentes entre elementos similares - Espaçamento igual entre elementos de relacionamento diferente (o que é próximo parece igual ao que é distante) - Densidade uniforme sem variação de ritmo

**Tipografia sem hierarquia:** - Dificuldade em distinguir título de subtítulo sem ler o conteúdo - Tamanhos de texto muito próximos entre níveis hierárquicos diferentes - Mistura de estilos ou pesos sem propósito aparente

**Cor sem propósito:** - Paleta que parece escolhida por exploração, não por estratégia - Cores que não diferenciam estados ou hierarquia - Gradientes, sombras ou efeitos puramente decorativos - Paleta genérica sem conexão com o tom de marca

**Identidade visual fraca:** - Interface que poderia pertencer a qualquer produto do mesmo segmento - Ausência de qualquer elemento visual distintivo

Passo 4 — Formular os problemas com precisão

Para cada problema identificado, formular com precisão suficiente para que um profissional possa entender sem explicação adicional:

- **O que é o problema** (específico, não vago)

- **Onde aparece** (localização na interface) - **Qual dimensão afeta** (hierarquia/layout, tipografia, cor/identidade) - **Qual o impacto** na experiência ou na percepção de qualidade

Exemplos de formulação com precisão adequada: - ✓ "Não há distinção visual entre o título da seção e o subtítulo — ambos estão no mesmo tamanho e peso, eliminando a hierarquia de leitura." [tipografia] - ✓ "O espaçamento entre cards é idêntico ao espaçamento entre seções, impedindo a formação de grupos visuais distintos." [hierarquia/layout] - ✓ "A cor de destaque aparece em elementos de importâncias radicalmente diferentes — botão primário, link de rodapé e decoração de fundo — tornando-a semanticamente inútil." [cor] - ✗ "A tipografia parece ruim." [vago, inutilizável como base de ação]

Passo 5 — Priorizar as dimensões para as avaliações seguintes

Com base nos problemas identificados, indicar:

- Qual dimensão tem os problemas mais graves, por impacto direto na percepção de qualidade? - Qual dimensão tem problemas que provavelmente causam os outros (raiz sistêmica)? - Qual dimensão está funcionando adequadamente e precisa de menos atenção?

Essa priorização orienta a Skill 6 (síntese) sobre onde concentrar o plano de refinamento.

---