108 lines
6.7 KiB
Markdown
108 lines
6.7 KiB
Markdown
---
|
||
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 `<v-divider>`, 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 "<v-divider" --include='*.vue' <modulo>-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"|<v-btn[^>]*error' --include='*.vue' <modulo>-front/src/ -n
|
||
```
|
||
|
||
### 3. Acessibilidade Básica
|
||
|
||
```sh
|
||
rg "<img" --include='*.vue' <modulo>-front/src/ -n | grep -v "alt="
|
||
rg "<v-btn\|<button" --include='*.vue' <modulo>-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`
|
||
|