feat(ux): incorporar diretrizes M3 de UX writing e organizacao de telas, modais e paineis
This commit is contained in:
parent
4818887cb3
commit
b540fd97c0
21 changed files with 709 additions and 193 deletions
|
|
@ -52,23 +52,39 @@ Verificar conformidade com `rules/refactoring-ui-hierarquia-despoluicao`:
|
|||
- [ ] **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`)
|
||||
### 2.7. Auditoria Quantitativa de Ergonomia, Telas, Modais e Painéis (`agent-browser` + Material Design 3)
|
||||
|
||||
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:
|
||||
Toda auditoria de UX deve verificar se a tela, modais e painéis seguem os limites espaciais e a Matriz de Superfícies do Material Design 3:
|
||||
- [ ] **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 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 (`360px–420px`) 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?
|
||||
- [ ] **Matriz de Superfícies e *Chunking* M3:** Formulários longos estão agrupados em seções de até 4–6 campos? Modais básicos (`v-dialog`, `400px–560px`) são usados apenas para confirmações ou 3–4 campos rápidos (usando *Side Sheet* para 5–8 campos/inspeção e `v-snackbar` para avisos passivos)?
|
||||
- [ ] **Regiões Fixas (*Pinned Header & Footer*):** Em modais e painéis laterais, o cabeçalho (com botão fechar `X` nos painéis) e o rodapé de ações permanecem sempre fixos caso o conteúdo central precise rolar?
|
||||
|
||||
### 2.8. Auditoria de UX Writing e Microcopy (Material Design 3)
|
||||
|
||||
Verificar conformidade com `rules/mensagens-usuario` e `https://m3.material.io/foundations/writing/best-practices`:
|
||||
- [ ] **Capitalização de Frase (*Sentence case*):** Títulos de telas/modais/painéis, cabeçalhos, labels, abas, menus e botões usam apenas a 1ª letra da 1ª palavra e siglas em maiúscula (ex.: `"Nova licença"` e não `"Nova Licença"`)?
|
||||
- [ ] **Começar pelo Objetivo (*Begin with the objective*):** Frases de instrução iniciam pelo objetivo antes da ação (`"Para emitir a licença, anexe o parecer técnico"`)?
|
||||
- [ ] **Anatomia M3 de Diálogos e Botões Específicos:** Modais de confirmação têm título com pergunta direta (`"Excluir condicionante?"`), explicam a consequência de forma neutra sem repetir o título e usam o verbo exato no botão (`[Cancelar]` / `[Excluir condicionante]`), sem botões ambíguos `[Sim]`, `[Não]` ou `[OK]`?
|
||||
- [ ] **Pontuação Enxuta de Escaneabilidade:** Rótulos, botões, títulos, tooltips de 1 frase, toasts de 1 frase e itens de lista curtos omitem ponto final (`.`), e nenhum `label` ou título termina com dois-pontos (`:`)?
|
||||
- [ ] **Tempo Presente, Voz Ativa, Algarismos e Zero Abreviações Truncadas:** Textos usam voz ativa no presente, números em algarismos (`3`, `10 MB`), zero pontos de exclamação (`!`) em erros/alertas e zero abreviações truncadas (`Qtd.`, `Obs.`, `Cad.`, `End.`, `Máx.`)?
|
||||
|
||||
```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
|
||||
# Detectar botões genéricos ambíguos (Sim, Não, OK), labels com dois-pontos e abreviações truncadas (M3 UX Writing)
|
||||
rg '>(Sim|Não|OK|Confirmar)</v-btn>|label="[^"]*(:|\bQtd\.|\bObs\.|\bCad\.|\bEnd\.|\bMáx\.)' --include='*.vue' <modulo>-front/src/ -n
|
||||
```
|
||||
|
||||
### 3. Acessibilidade Básica
|
||||
### 3. Acessibilidade Básica e Textual (M3)
|
||||
|
||||
- `alt` conciso (até 125 caracteres) sem iniciar por `"Imagem de..."` (`alt=""` para imagens decorativas).
|
||||
- Textos truncados (`text-truncate` / `ellipsis`) oferecem tooltip ou expansão acessível.
|
||||
|
||||
```sh
|
||||
rg "<img" --include='*.vue' <modulo>-front/src/ -n | grep -v "alt="
|
||||
|
|
@ -88,9 +104,9 @@ rg "<v-btn\|<button" --include='*.vue' <modulo>-front/src/ -n | grep -v "aria-la
|
|||
| Componente | Loading | Vazio | Erro | Sucesso |
|
||||
|------------|---------|-------|------|---------|
|
||||
|
||||
## Fluxo Funcional e Jornada (ux-fluxo-funcional)
|
||||
| Pilar | Status | Problema Identificado | Correção Proposta |
|
||||
|-------|--------|-----------------------|-------------------|
|
||||
## Fluxo Funcional, Superfícies e UX Writing (M3)
|
||||
| Pilar / Critério | Status | Problema Identificado | Correção Proposta |
|
||||
|------------------|--------|-----------------------|-------------------|
|
||||
|
||||
## Plano de Melhoria
|
||||
1. ...
|
||||
|
|
@ -98,6 +114,8 @@ rg "<v-btn\|<button" --include='*.vue' <modulo>-front/src/ -n | grep -v "aria-la
|
|||
|
||||
## Referências
|
||||
|
||||
- Material Design 3 — Writing Best Practices: `https://m3.material.io/foundations/writing/best-practices`
|
||||
- Material Design 3 — Layout, Dialogs & Side Sheets: `https://m3.material.io/foundations/layout/understanding-layout/panes`, `https://m3.material.io/components/dialogs/guidelines`, `https://m3.material.io/components/side-sheets/guidelines`
|
||||
- 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`
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue