99 lines
5.2 KiB
Markdown
99 lines
5.2 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?
|
||
|
||
```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`
|
||
|