--- name: auditar-ux-heuristicas description: > Auditoria de UX baseada em heurísticas de Nielsen e verificação de estados de UI. scope: local --- # Skill: Auditar UX por Heurísticas ## Objetivo Avaliar UX de tela ou fluxo antes de propor mudanças. ## Etapas ### 1. Heurísticas de Nielsen | # | Heurística | Pergunta | |---|-----------|----------| | 1 | Visibilidade do status | Sistema informa o que acontece? | | 2 | Compatibilidade | Mensagens usam linguagem do domínio? | | 3 | Controle e liberdade | Pode desfazer, voltar, cancelar? | | 4 | Consistência | Mesmos conceitos, mesma aparência? | | 5 | Prevenção de erros | Campos obrigatórios claros? Confirmação em ações destrutivas? | | 6 | Reconhecimento > Lembrança | Labels descritivos? | | 7 | Flexibilidade | Ações frequentes acessíveis? | | 8 | Estética minimalista | Info desnecessária? | | 9 | Recuperação de erros | Mensagens orientam correção? | | 10 | Ajuda | Ajuda contextual disponível? | ### 2. Estados de Interface Para cada componente: `□ Loading □ Vazio □ Sucesso □ Erro □ Desabilitado` ### 2.5. Auditoria de Fluxo Funcional e Jornada (`ux-fluxo-funcional`) Para a aplicação como um todo e entre telas conectadas: - [ ] **Navegação Visível e Ordenada:** A barra principal exibe os módulos na ordem lógica da tarefa (`Cadastros Base → Modelos → Planejamento/Entidade → Execução → Monitoramento`) sem esconder tudo apenas em menu hambúrguer? - [ ] **Pré-requisitos Guiados:** Telas dependentes de cadastros prévios exibem aviso claro e botão direto (`to="..."`) para o passo anterior quando vazias? - [ ] **Revelação Progressiva (Sem Aperto Visual):** Telas com tabelas largas, cronogramas ou 3+ abas utilizam `12 colunas` (com seletor de contexto no topo) em vez de *split-screen* `4+8` espremido? - [ ] **Zero Jargão Técnico:** Rótulos técnicos de banco/código (`(info)`, `JSONB`, `CRUD`, `Instanciar`, enums crus) foram traduzidos para linguagem humana do domínio? - [ ] **Contraste de Tema Vuetify:** O token `secondary` em tema claro (`dark: false`) usa tom escuro (`#3E4436` ou `#4A6500`) garantindo legibilidade em `variant="tonal"` e `variant="outlined"`? - [ ] **Ergonomia de Quadros:** Quadros Kanban dispostos horizontalmente lado a lado (`overflow-x-auto`) sem empilhar colunas vazias de 420px verticalmente? ### 2.6. Auditoria de Despoluição Visual e Hierarquia (*Refactoring UI*) Verificar conformidade com `rules/refactoring-ui-hierarquia-despoluicao`: - [ ] **Pirâmide de Ações (1 Primária por Vista):** Existe apenas 1 botão sólido (`color="primary" variant="flat"`) por contexto, com secundárias em `outlined`/`tonal` e destrutivas discretas (`variant="text"` ou em `v-menu`, reservando vermelho sólido apenas para o modal de confirmação)? - [ ] **Zero *Card-ception* e Menos Bordas:** Os componentes evitam `v-card` com borda dentro de `v-card` e excesso de ``, separando grupos por contraste de superfície (`#FFFFFF` sobre `#F2F3EE`) ou espaçamento (`24px–32px`)? - [ ] **Rótulos como Último Recurso:** Dados autoexplicativos (CNPJ, e-mail, datas, status) ou frases combinadas evitam pilhas repetitivas de `Rótulo: Valor` com mesmo peso visual? - [ ] **Tabelas Enxutas (Colunas Combinadas):** Tabelas evitam 8+ colunas estreitas agrupando dados relacionados na mesma célula em 2 linhas (Título escuro `600` + subtítulo neutro `12px`) e alinham números à direita com `tabular-nums`? - [ ] **Lei da Proximidade e Largura Ideal:** O espaço externo entre grupos/campos (`16px–32px`) é maior que o espaço interno (`4px–8px`), e formulários simples respeitam `max-width: 640px–800px`? - [ ] **Estados Vazios Despoluídos:** Quando não há registros criados na base, filtros secundários e paginação são ocultados em favor apenas do *Empty State* orientador com CTA? ### 2.7. Auditoria Quantitativa de Ergonomia e Carga Cognitiva (`agent-browser`) Toda auditoria de UX deve verificar se a tela não está visualmente sufocada por excesso de barras fixas, colisão de painéis laterais ou excesso de pílulas/badges por linha: - [ ] **Orçamento de Viewport (`>= 70%` Área Livre):** Em `1366x768` ou `1440x900`, o canvas principal de trabalho (lista, árvore, tabela, Gantt, Kanban) ocupa pelo menos 70% da janela sem ser esmagado por múltiplos painéis laterais abertos ao mesmo tempo? - [ ] **Teto de 2 Faixas no Cabeçalho Operacional:** A área de trabalho possui no máximo 2 faixas horizontais de cabeçalho/filtros acima do conteúdo, mantendo formulários de criação rápida (`+ Nova Tarefa`) recolhidos sob demanda? - [ ] **Exclusão Mútua de Painéis Laterais (*Auto-Collapse*):** Ao abrir uma gaveta inspetora de detalhes (`400px+`) ou entrar no Cronograma Gantt, o menu lateral de navegação recolhe automaticamente? - [ ] **Teto de 3 Indicadores por Linha em Repouso:** Linhas de árvore/lista e cards exibem no máximo 3 sinais visuais além do título (sem "Natal de Badges" de 5–7 pílulas coloridas por linha), revelando ações secundárias (`+ Sub`, `Editar`) em `:hover` / `:focus-within`? - [ ] **Inspetor em Acordeão e Sem Card de Resumo Redundante:** O painel de detalhes inicia apenas com *Identificação/Prazo* e *Entrega* abertos, agrupando *Pré-requisitos*, *Recursos* e *Responsáveis* em seções colapsáveis (Acordeão) com resumo no título? ```sh # Detectar excesso de divisores e possíveis cards aninhados rg "-front/src/ -c | sort -t: -k2 -rn | head -10 # Detectar botões destrutivos vermelhos sólidos fora de modais de confirmação rg 'color="error"|]*error' --include='*.vue' -front/src/ -n ``` ### 3. Acessibilidade Básica ```sh rg "-front/src/ -n | grep -v "alt=" rg "-front/src/ -n | grep -v "aria-label\|title" ``` ### 4. Relatório ```markdown # Auditoria UX — [tela/fluxo] ## Achados por Heurística | # | Heurística | Status | Problema | Recomendação | |---|-----------|--------|----------|--------------| ## Estados de Interface | Componente | Loading | Vazio | Erro | Sucesso | |------------|---------|-------|------|---------| ## Fluxo Funcional e Jornada (ux-fluxo-funcional) | Pilar | Status | Problema Identificado | Correção Proposta | |-------|--------|-----------------------|-------------------| ## Plano de Melhoria 1. ... ``` ## Referências - Rule: `global/rules/refactoring-ui-hierarquia-despoluicao` - Livro *Refactoring UI* (Paiol): `https://adm.paiol.idz.one/estaticos/Refactoring-UI-Steve-Schoger-Adam-Wathan.pdf` - Skill: `skills/ux-fluxo-funcional/SKILL.md` - Skill: `skills/ux/SKILL.md` - Rule: `global/rules/diagnostico-antes-correcao` - Rule: `global/rules/mensagens-usuario` - Rule: `global/rules/feedback-visivel`