Auditoria de UX

Quando Usar

Use esta habilidade quando precisar auditar telas para problemas de UX usando as heurísticas de Nielsen e as melhores práticas modernas de UX para dispositivos móveis.

Quando NÃO Usar

• Apenas para problemas de acessibilidade → use /ss-a11y
• Para conformidade com tokens/regras de ouro do sistema de design → use /ss-review
• Para qualidade de texto/microtexto → use /ss-copy
• Para telas totalmente novas que ainda não existem — projete primeiro com /ss-page ou /ss-flow

Alvo: $ARGUMENTS

Estrutura de Auditoria

10 Heurísticas de Usabilidade de Nielsen

1. Visibilidade do Status do Sistema

• Estados de carregamento presentes (telas esqueléticas, não spinners)
• Feedback de sucesso/erro após ações (notificações toast)
• Indicadores de progresso para fluxos de várias etapas
• Estado ativo claramente mostrado nos itens de navegação
• Dados em tempo real têm timestamp mostrando a atualização

2. Correspondência entre o Sistema e o Mundo Real

• Rótulos usam a linguagem do usuário, não jargões técnicos
• Ícones são universalmente reconhecíveis (conjunto padrão Lucide)
• Formatos de número correspondem às expectativas do usuário (separadores de vírgula, símbolos de moeda)
• Formatos de data são apropriados para a localidade

3. Controle e Liberdade do Usuário

• Navegação de volta disponível em todas as telas não raiz
• Ações destrutivas têm diálogos de confirmação
• Desfazer disponível para ações reversíveis (toast com desfazer)
• A folha inferior/modal pode ser dispensada (toque no fundo, deslizar para baixo, botão X)
• Sem padrões sombrios (sem ações forçadas, sempre uma maneira de dispensar)

4. Consistência e Padrões

• Mesma ação = mesma aparência em todos os lugares
• Significados de cores são consistentes (verde=sucesso, vermelho=erro, marca=ativo)
• Hierarquia de texto segue o sistema de escala de cinza de 5 níveis
• Todos os cartões usam a mesma sombra, raio, preenchimento
• Espaçamento segue o sistema de grade de 6px

5. Prevenção de Erros

• Botões destrutivos são visualmente distintos (variante destrutiva)
• Validação de formulário ocorre ao sair do campo (não enquanto digita)
• Ações perigosas exigem confirmação explícita
• Restrições de entrada são visíveis antes que os erros ocorram (limites de caracteres, dicas de formato)

6. Reconhecimento em Vez de Memorização

• Rótulos em todos os ícones (especialmente BottomNav)
• Estado atual visível sem memorização (aba ativa destacada)
• Itens recentes/frequentes mostrados para acesso rápido
• Texto de espaço reservado mostra o formato esperado

7. Flexibilidade e Eficiência

• Ações importantes acessíveis em até 3 toques a partir da tela inicial
• Pull-to-refresh em telas de dados
• Alvos de toque >= 44x44px (sem áreas de toque minúsculas)
• Ações usadas com frequência em zonas de fácil acesso (parte inferior da tela)

8. Design Estético e Minimalista

• Cada tela foca em UMA tarefa principal
• Sem elementos decorativos que não servem a um propósito
• Pirâmide de informações respeitada (mais importante = maior)
• Densidade de cartões segue a regra de máximo de 4 itens
• Sem elementos visuais competindo (uma métrica principal por página)

9. Ajude os Usuários a Recuperar-se de Erros

• Mensagens de erro explicam o que deu errado em linguagem clara
• Mensagens de erro sugerem como corrigir o problema
• Falhas parciais não quebram a página inteira (um cartão falha, outros carregam)
• Erros de rede mostram botão de tentar novamente
• Erros de formulário destacam o campo específico

10. Ajuda e Documentação

• Estados vazios guiam os usuários a tomar uma ação
• Onboarding para recursos de primeira vez (se aplicável)
• Tooltips para métricas complexas (se aplicável)

Verificações Específicas de UX para Dispositivos Móveis

Toque e Gestos

• Alvos de toque mínimo 44x44px
• Mínimo de 8px entre alvos de toque adjacentes
• Sem interações dependentes de hover (mobile não tem hover)
• Gestos de deslizar têm indicações visíveis (indicadores de carrossel)

Percepção de Desempenho

• Telas esqueléticas aparecem em até 300ms
• Atualizações otimistas para ações do usuário
• Conteúdo acima da dobra carrega primeiro
• Sem mudança de layout após o carregamento do conteúdo

Áreas Seguras

• Conteúdo não oculto atrás do notch/Dynamic Island
• Conteúdo inferior não oculto atrás do indicador de início
• BottomNav tem preenchimento pb-safe

Prevenção de Padrões Sombrios

• Sem folhas inferiores forçadas na entrada
• Sem diálogos de prevenção de saída
• Cada tela tem uma maneira de voltar/dispensar
• Rótulos de CTA descrevem claramente a ação
• Sem gráficos manipuladores (implorando, urgência)

Formato de Saída

1. Pontuação: Classificação de A+ a F com detalhamento
2. Problemas Críticos: Devem ser corrigidos (bloqueiam a usabilidade)
3. Problemas Principais: Devem ser corrigidos (degradam a experiência)
4. Problemas Menores: Bom corrigir (polimento)

…