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
File diff suppressed because one or more lines are too long
|
|
@ -96,9 +96,9 @@ Toda construção ou refatoração em pacotes `*-front` (`@front`, `@ux`, `@land
|
|||
3. **Estados Vazios Despoluídos (p. 234):**
|
||||
- Quando uma coleção estiver inicialmente vazia (zero registros criados), **ocultar barras de filtros secundárias, abas vazias e paginação**, exibindo somente o *Empty State* orientador com o botão de ação primária (CTA).
|
||||
|
||||
### 7. Ergonomia Cognitiva, Orçamento de Viewport e Densidade Visual (Leis de Sweller, Hick e Miller)
|
||||
### 7. Ergonomia Cognitiva, Orçamento de Viewport e Organização de Telas, Modais e Painéis (Leis de Sweller, Hick, Miller e Material Design 3)
|
||||
|
||||
Mesmo respeitando pesos tipográficos e ausência de bordas, uma tela continuará **carregada e cansativa** se desperdiçar espaço de tela com múltiplas barras fixas, colidir painéis laterais ou pendurar dezenas de pílulas coloridas em cada linha. Todo frontend deve obedecer a 4 limites quantitativos de ergonomia espacial:
|
||||
Mesmo respeitando pesos tipográficos e ausência de bordas, uma tela continuará **carregada e cansativa** se desperdiçar espaço de tela com múltiplas barras fixas, colidir painéis laterais ou pendurar dezenas de pílulas coloridas em cada linha. Todo frontend deve obedecer a 5 limites quantitativos de ergonomia espacial:
|
||||
|
||||
1. **Orçamento de Viewport (Regra 75/25) e Teto de 2 Faixas no Topo:**
|
||||
- Em uma tela desktop padrão (`1366x768` ou `1440x900`), no mínimo **70%–75% da área da janela** deve pertencer ao **canvas principal de trabalho** (lista, árvore, tabela, Gantt, Kanban).
|
||||
|
|
@ -114,7 +114,11 @@ Mesmo respeitando pesos tipográficos e ausência de bordas, uma tela continuar
|
|||
- Ações secundárias de linha (ex.: `+ Sub`, `Editar`, `Excluir`) devem ficar ocultas ou discretas em repouso, revelando-se em `:hover` ou `:focus-within` (`opacity-0 group-hover:opacity-100`).
|
||||
4. **Revelação Progressiva Intra-Painel (*Inspetor em Acordeão & Zero Card de Resumo Redundante*):**
|
||||
- Painéis inspetores (`Drawer` / `Aside`) **nunca** devem iniciar com um "Card de Resumo" que duplica os mesmos dados já visíveis na linha selecionada e nos blocos editáveis imediatamente abaixo.
|
||||
- No máximo **2 seções primárias** (*Identificação/Prazo* e *Entrega*) devem iniciar abertas. Seções relacionais secundárias (*Pré-requisitos/Dependências*, *Recursos e Custos*, *Responsáveis*) devem utilizar **seções colapsáveis (Acordeão)** exibindo o resumo no próprio cabeçalho (ex.: `Recursos e Custos (2 • R$ 2.424,00)`) e abrindo a lista/formulário apenas quando expandidas pelo usuário.
|
||||
- No máximo **2 seções primárias** (*Identificação/Prazo* e *Entrega*) devem iniciar abertas. Seções relacionais secundárias (*Pré-requisitos/Dependências*, *Recursos e Custos*, *Responsáveis*) devem utilizar **seções colapsáveis (Acordeão)** exibindo o resumo no próprio cabeçalho (ex.: `Recursos e custos (2 • R$ 2.424,00)`) e abrindo a lista/formulário apenas quando expandidas pelo usuário.
|
||||
5. **Matriz de Superfícies, *Chunking* de Telas e Regiões Fixas em Modais/Painéis (Material Design 3):**
|
||||
- **Agrupamento temático em telas (*Chunking*):** Dividir formulários longos em blocos lógicos de no máximo **4 a 6 campos** encabeçados por título curto em *Sentence case* (`16px–20px`, peso `600`, sem `:` e sem `.`).
|
||||
- **Modais Básicos (*Basic Dialogs*, `400px–560px`):** Usar com parcimônia, apenas para confirmações críticas/destrutivas ou decisões rápidas (até 3–4 campos). **Proibido** usar modal para feedback passivo de sucesso (usar `v-snackbar`) ou formulários extensos de 6+ campos (usar *Side Sheet* ou Página).
|
||||
- **Regiões Fixas (*Pinned Header & Footer*):** Em modais (`v-dialog`) e painéis laterais (`Side Sheets`), o **Cabeçalho no topo** (com título em *Sentence case* e botão fechar `X` nos painéis) e a **Barra de Ações no rodapé** (`[Cancelar]` + `[Verbo específico]`, nunca `Sim/Não/OK`) devem permanecer **sempre fixos**, rolando apenas o corpo central caso necessário.
|
||||
|
||||
---
|
||||
|
||||
|
|
@ -142,18 +146,18 @@ Mesmo respeitando pesos tipográficos e ausência de bordas, uma tela continuar
|
|||
</v-card>
|
||||
```
|
||||
|
||||
### ✅ Correto — Hierarquia clara, menos bordas e pirâmide de ações (*Refactoring UI*)
|
||||
### ✅ Correto — Hierarquia clara, menos bordas, *Sentence case* e pirâmide de ações (*Refactoring UI* + M3)
|
||||
|
||||
```vue
|
||||
<section class="pa-6">
|
||||
<header class="d-flex align-baseline justify-space-between mb-6">
|
||||
<div>
|
||||
<h1 class="text-h6 font-weight-semibold">Licenças Ambientais</h1>
|
||||
<h1 class="text-h6 font-weight-semibold">Licenças ambientais</h1>
|
||||
<p class="text-body-2 text-medium-emphasis">12 licenças vigentes no período</p>
|
||||
</div>
|
||||
<div class="d-flex align-center ga-3">
|
||||
<v-btn color="secondary" variant="outlined">Exportar</v-btn>
|
||||
<v-btn color="primary" variant="flat">Nova Licença</v-btn>
|
||||
<v-btn color="primary" variant="flat">Nova licença</v-btn>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
|
|
@ -180,6 +184,8 @@ Elimina o aspecto amador, sobrecarregado e confuso das interfaces geradas pela I
|
|||
## Referências
|
||||
|
||||
- Livro completo no Paiol: `https://adm.paiol.idz.one/estaticos/Refactoring-UI-Steve-Schoger-Adam-Wathan.pdf`
|
||||
- Material Design 3 — Writing, Layout, Dialogs & Side Sheets: `https://m3.material.io/foundations/writing/best-practices`, `https://m3.material.io/components/dialogs/guidelines`, `https://m3.material.io/components/side-sheets/guidelines`
|
||||
- Rule: `global/rules/mensagens-usuario`
|
||||
- Rule: `global/rules/estilos-design-system`
|
||||
- Skill: `skills/ux/SKILL.md`
|
||||
- Skill: `skills/ux-fluxo-funcional/SKILL.md`
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -38,14 +38,14 @@ Toda sua comunicação — incluindo raciocínio interno, reflexões e respostas
|
|||
## Responsabilidades
|
||||
|
||||
1. **Auditar antes de propor** — executar as skills `auditar-ux-heuristicas` e `ux-fluxo-funcional` antes de sugerir mudanças de UX (ver `global/rules/diagnostico-antes-correcao`)
|
||||
2. **Garantir Arquitetura de Fluxo Funcional (`ux-fluxo-funcional`)** — estruturar navegação principal concentrada exclusivamente no `MenuLateral.vue` ordenada pela jornada da tarefa, pré-requisitos guiados entre telas com CTAs diretos, revelação progressiva (proibindo *split-screen* `4+8` espremido em telas com tabelas/abas complexas) e quadros Kanban horizontais
|
||||
2. **Garantir Arquitetura de Fluxo Funcional e Organização de Telas, Modais e Painéis (`ux-fluxo-funcional` & Material Design 3)** — estruturar navegação principal concentrada exclusivamente no `MenuLateral.vue` ordenada pela jornada da tarefa, pré-requisitos guiados entre telas com CTAs diretos, revelação progressiva (proibindo *split-screen* `4+8` espremido em telas com tabelas/abas complexas), quadros Kanban horizontais e **Matriz de Superfícies M3** (*Single-Pane* `12 colunas` para fluxos amplos; *Standard Side Sheet* coplanar `360px–420px` com auto-recolhimento do menu esquerdo para inspeção; *Modal Side Sheet* para formulários secundários de 5–8 campos; *Basic Dialog* `400px–560px` restrito a confirmações críticas ou 3–4 campos rápidos; *Snackbar* para avisos passivos; agrupamento temático de formulários em blocos de 4–6 campos; e **Cabeçalho/Rodapé sempre fixos (*Pinned Header/Footer*)** em modais e painéis laterais)
|
||||
3. **Aplicar Despoluição Visual e Hierarquia (*Refactoring UI*)** — exigir conformidade com `rules/refactoring-ui-hierarquia-despoluicao.md` (consulta completa em `https://adm.paiol.idz.one/estaticos/Refactoring-UI-Steve-Schoger-Adam-Wathan.pdf`): pirâmide de ações (apenas 1 ação primária sólida por vista; ações destrutivas discretas na listagem e botão vermelho sólido exclusivo para o modal de confirmação), eliminação de bordas excessivas e *Card-ception*, rótulos como último recurso, consolidação de colunas correlatas em tabelas (2 linhas por célula) e Lei da Proximidade nos espaçamentos
|
||||
4. Revisar telas implementadas e propor melhorias de usabilidade e contraste (garantindo que tokens de tema Vuetify como `secondary` em tema claro tenham contraste escuro `#3E4436` / `#4A6500` para variantes `tonal` e `outlined`)
|
||||
5. Definir fluxos de navegação claros e intuitivos com links diretos de *drill-down* entre painéis
|
||||
6. Garantir que mensagens e rótulos de interface estejam em linguagem humana do domínio (zero jargão de banco/TI como `(info)`, `JSONB`, `CRUD`, `Instanciar`)
|
||||
6. **Garantir UX Writing e Microcopy Orientados ao Domínio (`rules/mensagens-usuario.md` & Material Design 3 `writing/best-practices`)** — exigir linguagem humana do domínio (zero jargão de banco/TI como `(info)`, `JSONB`, `CRUD`, `Instanciar`), **Capitalização estilo de frase (*Sentence case*)** em toda a UI (`"Nova licença"`, `"Salvar alterações"`), frases orientativas que **começam pelo objetivo** (`"Para emitir a licença, anexe o parecer"`), **Anatomia M3 em diálogos de confirmação** (título com pergunta direta `"Excluir condicionante?"` + consequência neutra + botão com verbo explícito `[Excluir condicionante]`, proibindo `[Sim]`, `[Não]`, `[OK]`), **pontuação enxuta** (sem ponto final `.` em rótulos, botões, títulos e frases únicas curtas, e sem dois-pontos `:` em labels/títulos), tempo presente em voz ativa sem pontos de exclamação (`!`), números em **algarismos** e **zero abreviações truncadas** (`Qtd.`, `Obs.`, `Cad.`, `End.`)
|
||||
7. Propor estados visuais para todos os cenários (loading, erro, vazio orientador com botão de ação e ocultação de filtros inúteis, sucesso)
|
||||
8. Organizar a hierarquia de informação das telas (3 níveis de cor de texto, 2 faixas de peso `400/500` e `600/700`, títulos contidos `16px–20px`)
|
||||
9. Revisar labels, placeholders e textos de ajuda
|
||||
8. Organizar a hierarquia de informação das telas (3 níveis de cor de texto, 2 faixas de peso `400/500` e `600/700`, títulos contidos `16px–20px` em *Sentence case*)
|
||||
9. Revisar labels, placeholders, textos de ajuda e acessibilidade textual (`alt` conciso até 125 caracteres sem `"Imagem de..."`, `alt=""` para decorativos e proibição de `text-truncate` sem tooltip/expansão)
|
||||
10. Identificar inconsistências de UX entre módulos
|
||||
11. Auditar a usabilidade e inspeção de telas em tempo de execução com `agent-browser`, **sempre em modo visível (`--headed`) e com isolamento por sessão e contexto (`--session <modulo-id>_<contexto?>`)** para que o operador acompanhe a validação visual e evitar mistura de tokens e estados de interface (ver `rules/testes-interface-agent-browser.md`)
|
||||
|
||||
|
|
@ -67,9 +67,9 @@ Toda sua comunicação — incluindo raciocínio interno, reflexões e respostas
|
|||
|
||||
1. **Clareza antes de elegância** — o usuário entende o que fazer sem ler manual
|
||||
2. **Feedback imediato** — toda ação tem resposta visual
|
||||
3. **Linguagem do domínio** — termos do usuário, não da TI
|
||||
4. **Progressão natural** — o fluxo segue a lógica operacional do usuário
|
||||
5. **Erros orientam** — mensagens de erro guiam a correção
|
||||
3. **Linguagem do domínio e UX Writing (Material Design 3)** — termos do usuário em *Sentence case*, começando pelo objetivo, com botões de verbo específico (zero `Sim/OK`), pontuação enxuta (sem `.` em frases curtas isoladas e sem `:` em labels), algarismos e zero abreviações truncadas
|
||||
4. **Progressão natural e Matriz de Superfícies (M3)** — o fluxo segue a lógica operacional do usuário, escolhendo a superfície certa (*Single-Pane* `12 colunas`, *Standard/Modal Side Sheet*, *Basic/Full-Screen Dialog* ou *Snackbar*), agrupando formulários em blocos de 4–6 campos e mantendo Cabeçalho/Rodapé fixos (*pinned*) em modais e painéis
|
||||
5. **Erros orientam sem culpar** — mensagens de erro em voz ativa e tom neutro (sem `!`) que guiam a correção
|
||||
6. **Revelação progressiva** — exibir uma tarefa complexa por vez em largura total (`12 colunas`), sem espremer múltiplas abas e tabelas em colunas estreitas
|
||||
7. **Despoluição visual e Ergonomia Cognitiva (*Refactoring UI*)** — separar grupos por contraste de superfície ou espaçamento (sem *Card-ception* nem excesso de `<v-divider>`), enfatizar des-enfatizando elementos secundários, consolidar colunas em tabelas, respeitar a pirâmide de ações, limitar o cabeçalho operacional a 2 faixas horizontais (com criadores rápidos sob demanda), recolher o menu lateral automaticamente ao abrir o Inspetor de Detalhes, limitar linhas de árvore/lista a 3 indicadores em repouso (sem "Natal de Badges") e organizar seções secundárias do Inspetor em acordeões colapsáveis
|
||||
|
||||
|
|
@ -81,8 +81,9 @@ Toda sua comunicação — incluindo raciocínio interno, reflexões e respostas
|
|||
- [ ] Telas com tabelas densas, cronogramas ou múltiplas abas usam `12 colunas` em vez de *split-screen* `4+8` espremido?
|
||||
- [ ] O orçamento de viewport é respeitado (teto de 2 faixas no cabeçalho, criadores rápidos sob demanda e auto-recolhimento do menu lateral ao abrir o Inspetor de Detalhes)?
|
||||
- [ ] Linhas de árvore/lista respeitam o teto de 3 indicadores em repouso (sem "Natal de Badges") e ações em linha aparecem sob `:hover`, enquanto seções secundárias do Inspetor usam acordeões colapsáveis sem card de resumo redundante?
|
||||
- [ ] A Matriz de Superfícies M3 é respeitada (formulários divididos em blocos de 4–6 campos; *Basic Dialog* restrito a confirmações ou 3–4 campos; *Side Sheet* para 5–8 campos/inspeção com botão fechar `X`; Cabeçalho e Rodapé fixos em modais e painéis)?
|
||||
- [ ] Todos os estados (loading, erro, vazio sem filtros inúteis, sucesso) estão definidos?
|
||||
- [ ] Mensagens e rótulos usam linguagem humana do domínio (zero jargão de banco/TI)?
|
||||
- [ ] Textos e microcopy seguem o **UX Writing M3** (`rules/mensagens-usuario.md`): linguagem do domínio, *Sentence case*, começar pelo objetivo, diálogos de confirmação com verbo específico no botão (zero `Sim/Não/OK`), sem `.` em frases curtas/labels, sem `:` ao final de labels/títulos, números em algarismos e zero abreviações truncadas (`Qtd.`, `Obs.`, `Cad.`)?
|
||||
- [ ] O token `secondary` do tema Vuetify possui contraste escuro (≥ 4.5:1) em variantes `tonal` e `outlined`?
|
||||
- [ ] A pirâmide de ações é respeitada (apenas 1 botão primário sólido por vista; botões destrutivos discretos fora do modal de confirmação)?
|
||||
- [ ] A tela está livre de *Card-ception* (zero `v-card` com borda dentro de `v-card`), excesso de `<v-divider>` e pilhas redundantes de `Rótulo: Valor`?
|
||||
|
|
|
|||
|
|
@ -38,14 +38,14 @@ Toda sua comunicação — incluindo raciocínio interno, reflexões e respostas
|
|||
## Responsabilidades
|
||||
|
||||
1. **Auditar antes de propor** — executar as skills `auditar-ux-heuristicas` e `ux-fluxo-funcional` antes de sugerir mudanças de UX (ver `global/rules/diagnostico-antes-correcao`)
|
||||
2. **Garantir Arquitetura de Fluxo Funcional (`ux-fluxo-funcional`)** — estruturar navegação principal concentrada exclusivamente no `MenuLateral.vue` ordenada pela jornada da tarefa, pré-requisitos guiados entre telas com CTAs diretos, revelação progressiva (proibindo *split-screen* `4+8` espremido em telas com tabelas/abas complexas) e quadros Kanban horizontais
|
||||
2. **Garantir Arquitetura de Fluxo Funcional e Organização de Telas, Modais e Painéis (`ux-fluxo-funcional` & Material Design 3)** — estruturar navegação principal concentrada exclusivamente no `MenuLateral.vue` ordenada pela jornada da tarefa, pré-requisitos guiados entre telas com CTAs diretos, revelação progressiva (proibindo *split-screen* `4+8` espremido em telas com tabelas/abas complexas), quadros Kanban horizontais e **Matriz de Superfícies M3** (*Single-Pane* `12 colunas` para fluxos amplos; *Standard Side Sheet* coplanar `360px–420px` com auto-recolhimento do menu esquerdo para inspeção; *Modal Side Sheet* para formulários secundários de 5–8 campos; *Basic Dialog* `400px–560px` restrito a confirmações críticas ou 3–4 campos rápidos; *Snackbar* para avisos passivos; agrupamento temático de formulários em blocos de 4–6 campos; e **Cabeçalho/Rodapé sempre fixos (*Pinned Header/Footer*)** em modais e painéis laterais)
|
||||
3. **Aplicar Despoluição Visual e Hierarquia (*Refactoring UI*)** — exigir conformidade com `rules/refactoring-ui-hierarquia-despoluicao.md` (consulta completa em `https://adm.paiol.idz.one/estaticos/Refactoring-UI-Steve-Schoger-Adam-Wathan.pdf`): pirâmide de ações (apenas 1 ação primária sólida por vista; ações destrutivas discretas na listagem e botão vermelho sólido exclusivo para o modal de confirmação), eliminação de bordas excessivas e *Card-ception*, rótulos como último recurso, consolidação de colunas correlatas em tabelas (2 linhas por célula) e Lei da Proximidade nos espaçamentos
|
||||
4. Revisar telas implementadas e propor melhorias de usabilidade e contraste (garantindo que tokens de tema Vuetify como `secondary` em tema claro tenham contraste escuro `#3E4436` / `#4A6500` para variantes `tonal` e `outlined`)
|
||||
5. Definir fluxos de navegação claros e intuitivos com links diretos de *drill-down* entre painéis
|
||||
6. Garantir que mensagens e rótulos de interface estejam em linguagem humana do domínio (zero jargão de banco/TI como `(info)`, `JSONB`, `CRUD`, `Instanciar`)
|
||||
6. **Garantir UX Writing e Microcopy Orientados ao Domínio (`rules/mensagens-usuario.md` & Material Design 3 `writing/best-practices`)** — exigir linguagem humana do domínio (zero jargão de banco/TI como `(info)`, `JSONB`, `CRUD`, `Instanciar`), **Capitalização estilo de frase (*Sentence case*)** em toda a UI (`"Nova licença"`, `"Salvar alterações"`), frases orientativas que **começam pelo objetivo** (`"Para emitir a licença, anexe o parecer"`), **Anatomia M3 em diálogos de confirmação** (título com pergunta direta `"Excluir condicionante?"` + consequência neutra + botão com verbo explícito `[Excluir condicionante]`, proibindo `[Sim]`, `[Não]`, `[OK]`), **pontuação enxuta** (sem ponto final `.` em rótulos, botões, títulos e frases únicas curtas, e sem dois-pontos `:` em labels/títulos), tempo presente em voz ativa sem pontos de exclamação (`!`), números em **algarismos** e **zero abreviações truncadas** (`Qtd.`, `Obs.`, `Cad.`, `End.`)
|
||||
7. Propor estados visuais para todos os cenários (loading, erro, vazio orientador com botão de ação e ocultação de filtros inúteis, sucesso)
|
||||
8. Organizar a hierarquia de informação das telas (3 níveis de cor de texto, 2 faixas de peso `400/500` e `600/700`, títulos contidos `16px–20px`)
|
||||
9. Revisar labels, placeholders e textos de ajuda
|
||||
8. Organizar a hierarquia de informação das telas (3 níveis de cor de texto, 2 faixas de peso `400/500` e `600/700`, títulos contidos `16px–20px` em *Sentence case*)
|
||||
9. Revisar labels, placeholders, textos de ajuda e acessibilidade textual (`alt` conciso até 125 caracteres sem `"Imagem de..."`, `alt=""` para decorativos e proibição de `text-truncate` sem tooltip/expansão)
|
||||
10. Identificar inconsistências de UX entre módulos
|
||||
11. Auditar a usabilidade e inspeção de telas em tempo de execução com `agent-browser`, **sempre em modo visível (`--headed`) e com isolamento por sessão e contexto (`--session <modulo-id>_<contexto?>`)** para que o operador acompanhe a validação visual e evitar mistura de tokens e estados de interface (ver `rules/testes-interface-agent-browser.md`)
|
||||
|
||||
|
|
@ -67,9 +67,9 @@ Toda sua comunicação — incluindo raciocínio interno, reflexões e respostas
|
|||
|
||||
1. **Clareza antes de elegância** — o usuário entende o que fazer sem ler manual
|
||||
2. **Feedback imediato** — toda ação tem resposta visual
|
||||
3. **Linguagem do domínio** — termos do usuário, não da TI
|
||||
4. **Progressão natural** — o fluxo segue a lógica operacional do usuário
|
||||
5. **Erros orientam** — mensagens de erro guiam a correção
|
||||
3. **Linguagem do domínio e UX Writing (Material Design 3)** — termos do usuário em *Sentence case*, começando pelo objetivo, com botões de verbo específico (zero `Sim/OK`), pontuação enxuta (sem `.` em frases curtas isoladas e sem `:` em labels), algarismos e zero abreviações truncadas
|
||||
4. **Progressão natural e Matriz de Superfícies (M3)** — o fluxo segue a lógica operacional do usuário, escolhendo a superfície certa (*Single-Pane* `12 colunas`, *Standard/Modal Side Sheet*, *Basic/Full-Screen Dialog* ou *Snackbar*), agrupando formulários em blocos de 4–6 campos e mantendo Cabeçalho/Rodapé fixos (*pinned*) em modais e painéis
|
||||
5. **Erros orientam sem culpar** — mensagens de erro em voz ativa e tom neutro (sem `!`) que guiam a correção
|
||||
6. **Revelação progressiva** — exibir uma tarefa complexa por vez em largura total (`12 colunas`), sem espremer múltiplas abas e tabelas em colunas estreitas
|
||||
7. **Despoluição visual e Ergonomia Cognitiva (*Refactoring UI*)** — separar grupos por contraste de superfície ou espaçamento (sem *Card-ception* nem excesso de `<v-divider>`), enfatizar des-enfatizando elementos secundários, consolidar colunas em tabelas, respeitar a pirâmide de ações, limitar o cabeçalho operacional a 2 faixas horizontais (com criadores rápidos sob demanda), recolher o menu lateral automaticamente ao abrir o Inspetor de Detalhes, limitar linhas de árvore/lista a 3 indicadores em repouso (sem "Natal de Badges") e organizar seções secundárias do Inspetor em acordeões colapsáveis
|
||||
|
||||
|
|
@ -81,8 +81,9 @@ Toda sua comunicação — incluindo raciocínio interno, reflexões e respostas
|
|||
- [ ] Telas com tabelas densas, cronogramas ou múltiplas abas usam `12 colunas` em vez de *split-screen* `4+8` espremido?
|
||||
- [ ] O orçamento de viewport é respeitado (teto de 2 faixas no cabeçalho, criadores rápidos sob demanda e auto-recolhimento do menu lateral ao abrir o Inspetor de Detalhes)?
|
||||
- [ ] Linhas de árvore/lista respeitam o teto de 3 indicadores em repouso (sem "Natal de Badges") e ações em linha aparecem sob `:hover`, enquanto seções secundárias do Inspetor usam acordeões colapsáveis sem card de resumo redundante?
|
||||
- [ ] A Matriz de Superfícies M3 é respeitada (formulários divididos em blocos de 4–6 campos; *Basic Dialog* restrito a confirmações ou 3–4 campos; *Side Sheet* para 5–8 campos/inspeção com botão fechar `X`; Cabeçalho e Rodapé fixos em modais e painéis)?
|
||||
- [ ] Todos os estados (loading, erro, vazio sem filtros inúteis, sucesso) estão definidos?
|
||||
- [ ] Mensagens e rótulos usam linguagem humana do domínio (zero jargão de banco/TI)?
|
||||
- [ ] Textos e microcopy seguem o **UX Writing M3** (`rules/mensagens-usuario.md`): linguagem do domínio, *Sentence case*, começar pelo objetivo, diálogos de confirmação com verbo específico no botão (zero `Sim/Não/OK`), sem `.` em frases curtas/labels, sem `:` ao final de labels/títulos, números em algarismos e zero abreviações truncadas (`Qtd.`, `Obs.`, `Cad.`)?
|
||||
- [ ] O token `secondary` do tema Vuetify possui contraste escuro (≥ 4.5:1) em variantes `tonal` e `outlined`?
|
||||
- [ ] A pirâmide de ações é respeitada (apenas 1 botão primário sólido por vista; botões destrutivos discretos fora do modal de confirmação)?
|
||||
- [ ] A tela está livre de *Card-ception* (zero `v-card` com borda dentro de `v-card`), excesso de `<v-divider>` e pilhas redundantes de `Rótulo: Valor`?
|
||||
|
|
|
|||
183
agents/ux/rules/mensagens-usuario.md
Normal file
183
agents/ux/rules/mensagens-usuario.md
Normal file
|
|
@ -0,0 +1,183 @@
|
|||
---
|
||||
type: rule
|
||||
name: mensagens-usuario
|
||||
description: Toda mensagem visível ao usuário final deve ser escrita em linguagem do domínio, sem termos técnicos de TI, seguindo as boas práticas de UX Writing do Material Design 3
|
||||
scope: global
|
||||
trigger: glob
|
||||
globs: "**/*.vue, **/*.ts, **/*.tsx"
|
||||
updatedAt: "2026-10-26"
|
||||
---
|
||||
|
||||
# Regra: Mensagens Orientadas ao Domínio e UX Writing (Material Design 3)
|
||||
|
||||
## Contexto
|
||||
|
||||
O usuário final dos módulos SaaS é profissional de **engenharia, ciência, administração pública ou gestão ambiental**. Ele entende de legislação, processos técnicos e operação — mas **não tem obrigação de entender tecnologia**.
|
||||
|
||||
Toda mensagem e microcopy visível na interface — títulos de telas, cabeçalhos de seções, modais, painéis laterais, erros, validações, confirmações, tooltips, estados vazios e botões — deve unir a **linguagem do domínio do módulo** às **boas práticas de UX Writing do Material Design 3** (`https://m3.material.io/foundations/writing/best-practices`).
|
||||
|
||||
---
|
||||
|
||||
## Regra
|
||||
|
||||
### 1. Erros de validação devem indicar O QUE preencher, não O QUE falhou
|
||||
|
||||
Usar voz ativa, tom neutro (sem culpar o usuário e sem pontos de exclamação `!`) e capitalização estilo de frase (*Sentence case*):
|
||||
|
||||
```typescript
|
||||
// ❌ ERRADO — linguagem técnica ou Title Case artificial
|
||||
"Campo obrigatório!"
|
||||
"Erro de validação"
|
||||
"Formato inválido"
|
||||
"Payload inválido"
|
||||
"Informe a Área do Empreendimento"
|
||||
|
||||
// ✅ CORRETO — linguagem do domínio + Sentence case (M3)
|
||||
"Informe a área do empreendimento (em hectares)"
|
||||
"Selecione o tipo de licença: LP, LI ou LO"
|
||||
"A data da vistoria deve ser anterior à data de hoje"
|
||||
"Informe o CNPJ no formato 00.000.000/0000-00"
|
||||
```
|
||||
|
||||
### 2. Erros de sistema devem ser traduzidos e orientar o próximo passo
|
||||
|
||||
Explicar o que ocorreu de forma direta e como o usuário pode prosseguir, sem expor códigos HTTP, *stack traces* ou termos de infraestrutura:
|
||||
|
||||
```typescript
|
||||
// ❌ ERRADO — erro técnico exposto
|
||||
"Erro 500: Internal Server Error"
|
||||
"Timeout na requisição"
|
||||
"Network Error / ECONNREFUSED"
|
||||
|
||||
// ✅ CORRETO — mensagem humanizada com orientação prática
|
||||
"Não foi possível salvar as alterações. Tente novamente em instantes."
|
||||
"A operação demorou mais que o esperado. Tente novamente."
|
||||
"Sem conexão com o servidor. Verifique sua internet e tente novamente."
|
||||
```
|
||||
|
||||
### 3. Estados vazios (*empty states*) devem explicar o contexto e orientar a ação
|
||||
|
||||
Quando uma lista, tabela ou painel está vazio, o texto principal não usa ponto final e o texto de apoio orienta o próximo passo:
|
||||
|
||||
```typescript
|
||||
// ❌ ERRADO — genérico e sem saída
|
||||
"Nenhum registro encontrado."
|
||||
"Lista vazia"
|
||||
|
||||
// ✅ CORRETO — explica o domínio e orienta
|
||||
// Título (sem ponto final): "Nenhuma condicionante cadastrada"
|
||||
// Apoio: "Para iniciar o controle de prazos, adicione a primeira condicionante desta licença."
|
||||
// Botão CTA: "Adicionar condicionante"
|
||||
```
|
||||
|
||||
### 4. Diálogos de confirmação devem explicar a consequência e usar botões específicos (M3)
|
||||
|
||||
Todo modal de confirmação/decisão crítica (`v-dialog`) deve obedecer à **Anatomia Tripla de Diálogo do Material Design 3**:
|
||||
|
||||
1. **Título com pergunta direta (`Verbo + objeto?`, sem repetir no corpo):** Iniciar com o verbo da ação em *Sentence case* terminado em interrogação.
|
||||
2. **Corpo com a consequência neutra e reversibilidade:** Explicar exatamente o que acontecerá se o usuário prosseguir, sem tom alarmista (`"Atenção!"`) e sem repetir a pergunta do título.
|
||||
3. **Botões de ação explícitos (`1 a 3 palavras`):** O botão confirmatório deve repetir o **verbo específico da ação**. É **proibido** usar pares ambíguos como `[Sim] / [Não]`, `[OK] / [Cancelar]` ou apenas `[Confirmar]`.
|
||||
|
||||
```typescript
|
||||
// ❌ ERRADO — genérico, alarmista e com botões ambíguos
|
||||
{
|
||||
titulo: "Atenção! Confirmar Operação?",
|
||||
corpo: "Tem certeza que deseja excluir este registro?",
|
||||
botoes: ["Não", "Sim"] // ou ["Cancelar", "OK"]
|
||||
}
|
||||
|
||||
// ✅ CORRETO — Anatomia M3 (Pergunta específica + Consequência + Verbo no botão)
|
||||
{
|
||||
titulo: "Excluir condicionante?",
|
||||
corpo: "O prazo de cumprimento e os documentos vinculados serão removidos permanentemente.",
|
||||
botoes: ["Cancelar", "Excluir condicionante"]
|
||||
}
|
||||
|
||||
{
|
||||
titulo: "Arquivar licença?",
|
||||
corpo: "Esta licença sairá das listagens ativas, mas poderá ser consultada no histórico.",
|
||||
botoes: ["Cancelar", "Arquivar licença"]
|
||||
}
|
||||
```
|
||||
|
||||
### 5. Labels e placeholders devem usar vocabulário do domínio e *Sentence case*
|
||||
|
||||
Nunca finalizar `label` com dois-pontos (`:`) nem usar ponto final (`.`) em `label` ou `placeholder`:
|
||||
|
||||
```typescript
|
||||
// ❌ ERRADO — genérico, com dois-pontos ou Title Case em todas as palavras
|
||||
label: "Nome:"
|
||||
placeholder: "Digite aqui."
|
||||
label: "Razão Social Do Empreendedor:"
|
||||
|
||||
// ✅ CORRETO — específico do domínio, Sentence case e sem pontuação final
|
||||
label: "Razão social do empreendedor"
|
||||
placeholder: "Ex.: Mineração Vale Verde Ltda."
|
||||
|
||||
label: "Área total do empreendimento (ha)"
|
||||
placeholder: "Ex.: 150,5"
|
||||
```
|
||||
|
||||
### 6. Schemas Zod devem ter mensagens de domínio em *Sentence case*
|
||||
|
||||
```typescript
|
||||
// ❌ ERRADO — mensagens padrão do Zod em inglês ou técnicas
|
||||
const zEmpreendimento = z.object({
|
||||
nome: z.string().min(1),
|
||||
area: z.number().positive(),
|
||||
})
|
||||
|
||||
// ✅ CORRETO — mensagens customizadas em linguagem do domínio
|
||||
const zEmpreendimento = z.object({
|
||||
nome: z.string().min(1, "Informe a razão social do empreendimento"),
|
||||
area: z.number({ invalid_type_error: "Informe um valor numérico para a área" })
|
||||
.positive("A área deve ser maior que zero"),
|
||||
cnpj: z.string().regex(/^\d{2}\.\d{3}\.\d{3}\/\d{4}-\d{2}$/,
|
||||
"CNPJ inválido. Use o formato 00.000.000/0000-00"),
|
||||
})
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 7. Princípios de UX Writing e Escaneabilidade — Material Design 3
|
||||
|
||||
Toda escrita em componentes Vue (`*-front`) deve aplicar os 7 princípios do guia `m3.material.io/foundations/writing/best-practices`:
|
||||
|
||||
1. **Capitalização estilo de frase (*Sentence case*):**
|
||||
- Usar maiúscula **apenas na primeira letra da primeira palavra** e em **nomes próprios ou siglas oficiais** (`CNPJ`, `CPF`, `IBAMA`, `LP`, `LI`, `LO`, `ART`, `MTR`, `UF`).
|
||||
- Aplica-se a: títulos de páginas, cabeçalhos de cards/seções, títulos de modais e painéis laterais, labels de inputs, abas (`v-tab`), itens de menu e botões (`"Nova licença"`, `"Salvar alterações"`, `"Dados do empreendimento"`).
|
||||
- **Proibido** usar *Title Case* anglófono (`"Salvar Alterações"`, `"Dados Do Empreendimento"`) ou `ALL CAPS` em botões e títulos.
|
||||
2. **Começar pelo objetivo (*Begin with the objective*):**
|
||||
- Quando uma frase orientativa descreve uma meta e a ação necessária para atingi-la, **iniciar a frase pelo objetivo** para facilitar o escaneamento rápido:
|
||||
- ✅ `"Para emitir a licença, anexe o parecer técnico conclusivo"`
|
||||
- ❌ `"Anexe o parecer técnico conclusivo para emitir a licença"`
|
||||
3. **Pontuação enxuta para escaneabilidade (*Skip unnecessary punctuation*):**
|
||||
- **Omitir ponto final (`.`)** em: rótulos (`label`), botões, títulos e subtítulos, cabeçalhos de seção, tooltips curtos de 1 frase, toasts/snackbars de 1 frase e itens de lista (*bullet points*) de frase única.
|
||||
- **Proibir dois-pontos (`:`)** ao final de títulos, cabeçalhos de seção/lista e labels de campos (`<h3>Documentos exigidos</h3>` e nunca `<h3>Documentos exigidos:</h3>`).
|
||||
- **Usar ponto final** apenas quando o texto tiver **2 ou mais frases** ou quando a frase for acompanhada de um link.
|
||||
4. **Tempo presente, voz ativa e tom neutro:**
|
||||
- Escrever no **tempo presente** e na **voz ativa** (`"Salvando alterações..."` em vez de `"As alterações estão sendo salvas"`; `"O arquivo excede 10 MB"` em vez de `"O limite de 10 MB foi excedido pelo arquivo"`).
|
||||
- **Proibido** usar pontos de exclamação (`!`) ou palavras alarmistas (`"Atenção!"`, `"Erro fatal!"`, `"Cuidado!"`) em mensagens de erro ou aviso.
|
||||
5. **Consistência de pessoa verbal (2ª pessoa):**
|
||||
- Dirigir-se diretamente ao usuário em 2ª pessoa (`"você"`, `"seu/sua"`).
|
||||
- **Nunca misturar** 1ª pessoa (`"Meus processos"`) e 2ª pessoa (`"Gerencie seus processos"`) na mesma tela ou fluxo.
|
||||
6. **Algarismos para números e zero abreviações truncadas (*Use numerals & Avoid abbreviations*):**
|
||||
- Escrever números, limites e contadores **sempre como algarismos** (`"3 condicionantes pendentes"`, `"Até 10 MB"`, `"Há 2 dias"`), nunca por extenso (`"três condicionantes"`).
|
||||
- **Proibido** usar abreviações truncadas na interface (`"Qtd."`, `"Obs."`, `"Cad."`, `"End."`, `"Dt."`, `"Máx."`, `"Mín."`, `"Tel."`). Escrever a palavra por extenso (`"Quantidade"`, `"Observações"`, `"Cadastro"`, `"Endereço"`, `"Data"`, `"Máximo"`).
|
||||
7. **Acessibilidade textual (*Alt text & Anti-truncamento cego*):**
|
||||
- Textos alternativos (`alt`) devem ser concisos (até **125 caracteres**) e descrever a função/conteúdo sem iniciar por `"Imagem de..."` ou `"Ícone de..."`. Imagens decorativas devem usar `alt=""`.
|
||||
- **Nunca truncar texto essencial** (`text-truncate` / `ellipsis`) sem oferecer forma acessível de leitura integral (tooltip no foco/hover ou expansão em clique).
|
||||
|
||||
---
|
||||
|
||||
## Impacto
|
||||
|
||||
Sem esta regra, o agente gera interfaces com textos prolixos, capitalização inconsistente (*Title Case* misturado com *Sentence case*), botões de confirmação ambíguos (`Sim/OK`), abreviações amadoras (`Qtd.`, `Obs.`) e mensagens técnicas que confundem o usuário final.
|
||||
|
||||
## Referências
|
||||
|
||||
- Material Design 3 — Writing Best Practices: `https://m3.material.io/foundations/writing/best-practices`
|
||||
- Rule: `global/rules/zod-validacao-padrao` (schemas com mensagens customizadas)
|
||||
- Rule: `global/rules/refactoring-ui-hierarquia-despoluicao` (hierarquia visual e despoluição)
|
||||
- Skill: `skills/ux-fluxo-funcional/SKILL.md` (jornada e organização de telas, modais e painéis)
|
||||
- Workflow: `global/workflows/ux` (revisão de UX)
|
||||
|
|
@ -96,9 +96,9 @@ Toda construção ou refatoração em pacotes `*-front` (`@front`, `@ux`, `@land
|
|||
3. **Estados Vazios Despoluídos (p. 234):**
|
||||
- Quando uma coleção estiver inicialmente vazia (zero registros criados), **ocultar barras de filtros secundárias, abas vazias e paginação**, exibindo somente o *Empty State* orientador com o botão de ação primária (CTA).
|
||||
|
||||
### 7. Ergonomia Cognitiva, Orçamento de Viewport e Densidade Visual (Leis de Sweller, Hick e Miller)
|
||||
### 7. Ergonomia Cognitiva, Orçamento de Viewport e Organização de Telas, Modais e Painéis (Leis de Sweller, Hick, Miller e Material Design 3)
|
||||
|
||||
Mesmo respeitando pesos tipográficos e ausência de bordas, uma tela continuará **carregada e cansativa** se desperdiçar espaço de tela com múltiplas barras fixas, colidir painéis laterais ou pendurar dezenas de pílulas coloridas em cada linha. Todo frontend deve obedecer a 4 limites quantitativos de ergonomia espacial:
|
||||
Mesmo respeitando pesos tipográficos e ausência de bordas, uma tela continuará **carregada e cansativa** se desperdiçar espaço de tela com múltiplas barras fixas, colidir painéis laterais ou pendurar dezenas de pílulas coloridas em cada linha. Todo frontend deve obedecer a 5 limites quantitativos de ergonomia espacial:
|
||||
|
||||
1. **Orçamento de Viewport (Regra 75/25) e Teto de 2 Faixas no Topo:**
|
||||
- Em uma tela desktop padrão (`1366x768` ou `1440x900`), no mínimo **70%–75% da área da janela** deve pertencer ao **canvas principal de trabalho** (lista, árvore, tabela, Gantt, Kanban).
|
||||
|
|
@ -114,7 +114,11 @@ Mesmo respeitando pesos tipográficos e ausência de bordas, uma tela continuar
|
|||
- Ações secundárias de linha (ex.: `+ Sub`, `Editar`, `Excluir`) devem ficar ocultas ou discretas em repouso, revelando-se em `:hover` ou `:focus-within` (`opacity-0 group-hover:opacity-100`).
|
||||
4. **Revelação Progressiva Intra-Painel (*Inspetor em Acordeão & Zero Card de Resumo Redundante*):**
|
||||
- Painéis inspetores (`Drawer` / `Aside`) **nunca** devem iniciar com um "Card de Resumo" que duplica os mesmos dados já visíveis na linha selecionada e nos blocos editáveis imediatamente abaixo.
|
||||
- No máximo **2 seções primárias** (*Identificação/Prazo* e *Entrega*) devem iniciar abertas. Seções relacionais secundárias (*Pré-requisitos/Dependências*, *Recursos e Custos*, *Responsáveis*) devem utilizar **seções colapsáveis (Acordeão)** exibindo o resumo no próprio cabeçalho (ex.: `Recursos e Custos (2 • R$ 2.424,00)`) e abrindo a lista/formulário apenas quando expandidas pelo usuário.
|
||||
- No máximo **2 seções primárias** (*Identificação/Prazo* e *Entrega*) devem iniciar abertas. Seções relacionais secundárias (*Pré-requisitos/Dependências*, *Recursos e Custos*, *Responsáveis*) devem utilizar **seções colapsáveis (Acordeão)** exibindo o resumo no próprio cabeçalho (ex.: `Recursos e custos (2 • R$ 2.424,00)`) e abrindo a lista/formulário apenas quando expandidas pelo usuário.
|
||||
5. **Matriz de Superfícies, *Chunking* de Telas e Regiões Fixas em Modais/Painéis (Material Design 3):**
|
||||
- **Agrupamento temático em telas (*Chunking*):** Dividir formulários longos em blocos lógicos de no máximo **4 a 6 campos** encabeçados por título curto em *Sentence case* (`16px–20px`, peso `600`, sem `:` e sem `.`).
|
||||
- **Modais Básicos (*Basic Dialogs*, `400px–560px`):** Usar com parcimônia, apenas para confirmações críticas/destrutivas ou decisões rápidas (até 3–4 campos). **Proibido** usar modal para feedback passivo de sucesso (usar `v-snackbar`) ou formulários extensos de 6+ campos (usar *Side Sheet* ou Página).
|
||||
- **Regiões Fixas (*Pinned Header & Footer*):** Em modais (`v-dialog`) e painéis laterais (`Side Sheets`), o **Cabeçalho no topo** (com título em *Sentence case* e botão fechar `X` nos painéis) e a **Barra de Ações no rodapé** (`[Cancelar]` + `[Verbo específico]`, nunca `Sim/Não/OK`) devem permanecer **sempre fixos**, rolando apenas o corpo central caso necessário.
|
||||
|
||||
---
|
||||
|
||||
|
|
@ -142,18 +146,18 @@ Mesmo respeitando pesos tipográficos e ausência de bordas, uma tela continuar
|
|||
</v-card>
|
||||
```
|
||||
|
||||
### ✅ Correto — Hierarquia clara, menos bordas e pirâmide de ações (*Refactoring UI*)
|
||||
### ✅ Correto — Hierarquia clara, menos bordas, *Sentence case* e pirâmide de ações (*Refactoring UI* + M3)
|
||||
|
||||
```vue
|
||||
<section class="pa-6">
|
||||
<header class="d-flex align-baseline justify-space-between mb-6">
|
||||
<div>
|
||||
<h1 class="text-h6 font-weight-semibold">Licenças Ambientais</h1>
|
||||
<h1 class="text-h6 font-weight-semibold">Licenças ambientais</h1>
|
||||
<p class="text-body-2 text-medium-emphasis">12 licenças vigentes no período</p>
|
||||
</div>
|
||||
<div class="d-flex align-center ga-3">
|
||||
<v-btn color="secondary" variant="outlined">Exportar</v-btn>
|
||||
<v-btn color="primary" variant="flat">Nova Licença</v-btn>
|
||||
<v-btn color="primary" variant="flat">Nova licença</v-btn>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
|
|
@ -180,6 +184,8 @@ Elimina o aspecto amador, sobrecarregado e confuso das interfaces geradas pela I
|
|||
## Referências
|
||||
|
||||
- Livro completo no Paiol: `https://adm.paiol.idz.one/estaticos/Refactoring-UI-Steve-Schoger-Adam-Wathan.pdf`
|
||||
- Material Design 3 — Writing, Layout, Dialogs & Side Sheets: `https://m3.material.io/foundations/writing/best-practices`, `https://m3.material.io/components/dialogs/guidelines`, `https://m3.material.io/components/side-sheets/guidelines`
|
||||
- Rule: `global/rules/mensagens-usuario`
|
||||
- Rule: `global/rules/estilos-design-system`
|
||||
- Skill: `skills/ux/SKILL.md`
|
||||
- Skill: `skills/ux-fluxo-funcional/SKILL.md`
|
||||
|
|
|
|||
|
|
@ -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`
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ Garantir que qualquer aplicação `<modulo>-front` do ecossistema (identificada
|
|||
|
||||
---
|
||||
|
||||
## Os 6 Pilares da Usabilidade Funcional
|
||||
## Os 7 Pilares da Usabilidade Funcional
|
||||
|
||||
### Pilar 1 — Navegação no Menu Lateral Ordenada pela Jornada Operacional
|
||||
|
||||
|
|
@ -96,22 +96,49 @@ No Vuetify 3 em tema claro (`dark: false`), componentes com `variant="tonal"` e
|
|||
### Pilar 6 — Ergonomia de Quadros Operacionais e Navegação Cruzada
|
||||
|
||||
1. **Quadros Kanban Sempre Horizontais Lado a Lado:**
|
||||
- Colunas de estágios (ex.: *A Fazer*, *Em Andamento*, *Em Revisão*, *Concluído*) devem ser exibidas **lado a lado horizontalmente** em desktop utilizando container flexível (`d-flex flex-nowrap overflow-x-auto ga-4 pb-2`) com largura mínima por coluna (`min-width: 280px` a `320px`).
|
||||
- Colunas de estágios (ex.: *A fazer*, *Em andamento*, *Em revisão*, *Concluído*) devem ser exibidas **lado a lado horizontalmente** em desktop utilizando container flexível (`d-flex flex-nowrap overflow-x-auto ga-4 pb-2`) com largura mínima por coluna (`min-width: 280px` a `320px`).
|
||||
- **Proibido** usar `v-row`/`v-col` que empilhe colunas de `min-height: 420px` verticalmente em resoluções intermediárias, gerando enormes caixas vazias que escondem os cartões abaixo da dobra.
|
||||
2. **Navegação Cruzada (*Drill-down* Contextual):**
|
||||
- Cards de resumo em Dashboards e tabelas de acompanhamento devem oferecer ação direta (clique ou botão) para abrir o registro correspondente no painel de detalhamento ou no quadro operacional já filtrado pelo item selecionado (`query` ou `params` de rota).
|
||||
|
||||
---
|
||||
|
||||
### Pilar 7 — Organização de Telas, Modais (`Dialogs`) e Painéis Laterais (`Side Sheets`) — Material Design 3
|
||||
|
||||
Conforme as diretrizes de **Layout (`Panes` e `Canonical Layouts`), `Dialogs` e `Side Sheets` do Material Design 3** (`https://m3.material.io/foundations/layout/understanding-layout/panes`, `https://m3.material.io/components/dialogs/guidelines` e `https://m3.material.io/components/side-sheets/guidelines`):
|
||||
|
||||
1. **Matriz de Escolha de Superfície (Quando usar cada container):**
|
||||
- **Tela Principal / *Single-Pane* (`12 colunas`):** Fluxos primários densos (tabelas amplas, múltiplas abas, cronogramas, formulários estruturantes).
|
||||
- **Painel Lateral Coplanar (*Standard Side Sheet*, `360px–420px`, sem *scrim*):** Inspeção contextual de item selecionado na lista/árvore (*Supporting Pane* / *Master-Detail* leve) ou filtros avançados ao vivo, onde o usuário precisa comparar ou alternar itens na área principal simultaneamente. Recolhe automaticamente o menu lateral esquerdo.
|
||||
- **Painel Lateral Modal (*Modal Side Sheet*, `v-navigation-drawer temporary location="right"`, `400px–560px`, com *scrim*):** Formulários secundários de média complexidade (5 a 8 campos), histórico detalhado ou fluxos auxiliares que exigem foco exclusivo sem perder o contexto espacial da página ao fundo.
|
||||
- **Modal Básico (*Basic Dialog*, `v-dialog`, `max-width: 400px–560px`):** Modais são **interruptivos** por natureza e devem ser usados **com parcimônia**, exclusivamente para:
|
||||
1. **Confirmações críticas ou destrutivas** que exigem decisão imediata;
|
||||
2. **Decisões rápidas ou criação enxuta** (até **3 a 4 campos simples** que não dependem de leitura da tela de fundo).
|
||||
- **Modal de Tela Cheia (*Full-Screen Dialog*, `v-dialog fullscreen`):** Tarefas modais complexas ou multi-etapas com barra superior fixa contendo `Fechar (X)` à esquerda, título em *Sentence case* e ação primária (`Salvar`) à direita.
|
||||
- **Snackbar / Toast (`v-snackbar`):** Feedback passivo de sucesso ou aviso curto de 1 frase. **Proibido** abrir um `v-dialog` apenas para exibir `"Salvo com sucesso"`.
|
||||
2. **Organização de Telas e *Chunking* Escaneável (*Make Content Scannable*):**
|
||||
- Dividir telas e formulários longos em **seções temáticas curtas** (máximo de **4 a 6 campos** relacionados por bloco) encabeçadas por título em *Sentence case* (`16px–20px`, peso `600`, sem dois-pontos `:` e sem ponto final `.`).
|
||||
- Posicionar a informação mais importante no início do título/parágrafo (*front-loading*) e ocultar configurações raras ou detalhes técnicos sob demanda (*Reveal details as needed*).
|
||||
3. **Anatomia e Regiões Fixas em Modais (*M3 Dialog Anatomy & Pinned Regions*):**
|
||||
- **Cabeçalho e Rodapé Fixos (*Pinned Header & Footer*):** Evitar rolagem em *Basic Dialogs*; quando o conteúdo precisar rolar (ex.: lista de seleção), o **Cabeçalho (`v-card-title`) no topo** e a **Barra de Ações (`v-card-actions`) no rodapé** devem permanecer **fixos e visíveis**, rolando apenas o corpo central (`v-card-text`) com divisor sutil.
|
||||
- **Título Específico + Consequência + Botão com Verbo:** Título com pergunta direta (`"Excluir condicionante?"`), corpo explicando a consequência sem repetir o título, e botões alinhados à direita (`[Cancelar]` + `[Excluir condicionante]`), proibindo `[Sim]`, `[Não]` ou `[OK]`.
|
||||
4. **Anatomia de Painéis Laterais (*M3 Side Sheet Anatomy*):**
|
||||
- **Header Fixo no Topo:** Título conciso em *Sentence case*, botão explícito de fechar (`X` com `aria-label="Fechar painel"`) à direita e, quando houver navegação multi-nível dentro do painel, botão de voltar (`←`) à esquerda do título.
|
||||
- **Corpo em Seções e Acordeões:** Até 2 seções primárias abertas; seções relacionais (`1:N`) em acordeões colapsáveis com resumo numérico no título.
|
||||
- **Footer Fixo de Ações:** Quando o painel exigir submissão manual, manter `[Cancelar]` e `[Salvar alterações]` fixos no rodapé do painel com divisor superior.
|
||||
|
||||
---
|
||||
|
||||
## Protocolo Passo a Passo de Aplicação
|
||||
|
||||
1. **Ler Identidade do Módulo:** Consultar `memorias-ia/modulo.yml` para identificar `modulo-id`, `modulo-caminho`, `modulo-descricao` e `modulo-tipo`.
|
||||
2. **Auditar a Jornada Completa:** Inspecionar `App.vue`, `router/index.ts`, `plugins/vuetify.ts` e as views de `<modulo>-front/src/` verificando os 6 Pilares acima.
|
||||
2. **Auditar a Jornada Completa:** Inspecionar `App.vue`, `router/index.ts`, `plugins/vuetify.ts` e as views de `<modulo>-front/src/` verificando os 7 Pilares acima.
|
||||
3. **Corrigir Tokens e Navegação Global:**
|
||||
- Ajustar `secondary` em `vuetify.ts` caso esteja usando cor clara sem contraste.
|
||||
- Concentrar a navegação principal exclusivamente em `MenuLateral.vue` (sem duplicar links na `CabecalhoPrincipal.vue`) e ordenada pela jornada operacional.
|
||||
4. **Desafogar Layouts e Conectar Fluxos:**
|
||||
4. **Desafogar Layouts, Organizar Modais/Painéis e Conectar Fluxos:**
|
||||
- Substituir *split-screens* apertados (`4+8`) por seleção de contexto + área principal de `12 colunas`.
|
||||
- Adequar modais e painéis à Matriz de Superfícies M3 (convertendo modais longos de 6+ campos em *Side Sheets* ou páginas, garantindo *Pinned Header/Footer* e botões com verbo específico).
|
||||
- Inserir links de navegação cruzada e *empty states* guiados entre telas dependentes.
|
||||
- Garantir que quadros Kanban sejam horizontais e responsivos.
|
||||
5. **Validar Visualmente com `agent-browser`:**
|
||||
|
|
@ -126,7 +153,9 @@ No Vuetify 3 em tema claro (`dark: false`), componentes com `variant="tonal"` e
|
|||
- [ ] Telas com abas densas ou tabelas largas usam `12 colunas` em vez de *split-screen* `4+8` espremido?
|
||||
- [ ] O cabeçalho operacional respeita o teto de 2 faixas horizontais (com criadores rápidos sob demanda) e recolhe o menu lateral automaticamente ao abrir o Inspetor de Detalhes?
|
||||
- [ ] Linhas de árvore/lista exibem no máximo 3 indicadores em repouso (sem "Natal de Badges") e o Inspetor usa seções colapsáveis (Acordeão) sem card de resumo duplicado?
|
||||
- [ ] Todos os rótulos técnicos de banco/código (`(info)`, `JSONB`, `Instanciar`, enums crus) foram substituídos por linguagem natural do domínio?
|
||||
- [ ] A Matriz de Superfícies M3 é respeitada (*Basic Dialog* restrito a confirmações ou 3–4 campos com Header/Footer fixos; *Side Sheet* com botão fechar `X` e Footer fixo para formulários médios/inspeção; `v-snackbar` para avisos passivos)?
|
||||
- [ ] Formulários longos estão divididos em blocos temáticos de até 4–6 campos com títulos em *Sentence case* (sem `:` e sem `.`)?
|
||||
- [ ] Todos os rótulos técnicos de banco/código (`(info)`, `JSONB`, `Instanciar`, enums crus) foram substituídos por linguagem natural do domínio em *Sentence case*?
|
||||
- [ ] O token `secondary` do tema Vuetify possui contraste escuro (≥ 4.5:1) em botões e chips `variant="tonal"` e `variant="outlined"`?
|
||||
- [ ] Quadros Kanban renderizam colunas lado a lado (`overflow-x-auto`) sem empilhar caixas vazias gigantes?
|
||||
- [ ] Existe navegação direta (*drill-down*) entre o Dashboard, a Visão de Detalhes e o Quadro Operacional?
|
||||
|
|
@ -135,6 +164,9 @@ No Vuetify 3 em tema claro (`dark: false`), componentes com `variant="tonal"` e
|
|||
|
||||
## 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: `rules/mensagens-usuario.md` (UX Writing M3 e linguagem do domínio)
|
||||
- Rule: `rules/refactoring-ui-hierarquia-despoluicao.md` (Hierarquia visual, pirâmide de ações, menos bordas e consolidação de tabelas — *Refactoring UI*)
|
||||
- Livro *Refactoring UI* (consulta online no Paiol): `https://adm.paiol.idz.one/estaticos/Refactoring-UI-Steve-Schoger-Adam-Wathan.pdf`
|
||||
- Skill: `skills/ux/SKILL.md` (Paleta de cores, Lucide icons e padrões Vuetify)
|
||||
|
|
|
|||
|
|
@ -1,120 +1,183 @@
|
|||
---
|
||||
type: rule
|
||||
name: mensagens-usuario
|
||||
description: Toda mensagem visível ao usuário final deve ser escrita em linguagem do domínio, sem termos técnicos de TI
|
||||
description: Toda mensagem visível ao usuário final deve ser escrita em linguagem do domínio, sem termos técnicos de TI, seguindo as boas práticas de UX Writing do Material Design 3
|
||||
scope: global
|
||||
trigger: glob
|
||||
globs: "**/*.vue, **/*.ts, **/*.tsx"
|
||||
updatedAt: "2026-09-28"
|
||||
updatedAt: "2026-10-26"
|
||||
---
|
||||
|
||||
# Regra: Mensagens Orientadas ao Domínio
|
||||
# Regra: Mensagens Orientadas ao Domínio e UX Writing (Material Design 3)
|
||||
|
||||
## Contexto
|
||||
|
||||
O usuário final dos módulos SaaS é profissional de **engenharia, ciência ou gestão ambiental**. Ele entende de legislação, processos técnicos e ciência aplicada — mas **não tem obrigação de entender tecnologia**.
|
||||
O usuário final dos módulos SaaS é profissional de **engenharia, ciência, administração pública ou gestão ambiental**. Ele entende de legislação, processos técnicos e operação — mas **não tem obrigação de entender tecnologia**.
|
||||
|
||||
Toda mensagem visível na interface — erro, validação, confirmação, tooltip, empty state, ajuda — deve ser escrita na linguagem do domínio do módulo.
|
||||
Toda mensagem e microcopy visível na interface — títulos de telas, cabeçalhos de seções, modais, painéis laterais, erros, validações, confirmações, tooltips, estados vazios e botões — deve unir a **linguagem do domínio do módulo** às **boas práticas de UX Writing do Material Design 3** (`https://m3.material.io/foundations/writing/best-practices`).
|
||||
|
||||
---
|
||||
|
||||
## Regra
|
||||
|
||||
### 1. Erros de validação devem indicar O QUE preencher, não O QUE falhou
|
||||
|
||||
Usar voz ativa, tom neutro (sem culpar o usuário e sem pontos de exclamação `!`) e capitalização estilo de frase (*Sentence case*):
|
||||
|
||||
```typescript
|
||||
// ❌ ERRADO — linguagem técnica
|
||||
"Campo obrigatório"
|
||||
// ❌ ERRADO — linguagem técnica ou Title Case artificial
|
||||
"Campo obrigatório!"
|
||||
"Erro de validação"
|
||||
"Formato inválido"
|
||||
"Payload inválido"
|
||||
"Informe a Área do Empreendimento"
|
||||
|
||||
// ✅ CORRETO — linguagem do domínio
|
||||
"Informe a Área do Empreendimento (em hectares)"
|
||||
"Selecione o Tipo de Licença: LP, LI ou LO"
|
||||
"A Data da Vistoria deve ser anterior à data atual"
|
||||
// ✅ CORRETO — linguagem do domínio + Sentence case (M3)
|
||||
"Informe a área do empreendimento (em hectares)"
|
||||
"Selecione o tipo de licença: LP, LI ou LO"
|
||||
"A data da vistoria deve ser anterior à data de hoje"
|
||||
"Informe o CNPJ no formato 00.000.000/0000-00"
|
||||
```
|
||||
|
||||
### 2. Erros de sistema devem ser traduzidos para o usuário
|
||||
### 2. Erros de sistema devem ser traduzidos e orientar o próximo passo
|
||||
|
||||
Explicar o que ocorreu de forma direta e como o usuário pode prosseguir, sem expor códigos HTTP, *stack traces* ou termos de infraestrutura:
|
||||
|
||||
```typescript
|
||||
// ❌ ERRADO — erro técnico exposto
|
||||
"Erro 500: Internal Server Error"
|
||||
"Timeout na requisição"
|
||||
"Network Error"
|
||||
"ECONNREFUSED"
|
||||
"Network Error / ECONNREFUSED"
|
||||
|
||||
// ✅ CORRETO — mensagem humanizada
|
||||
"Não foi possível salvar. Tente novamente em instantes."
|
||||
// ✅ CORRETO — mensagem humanizada com orientação prática
|
||||
"Não foi possível salvar as alterações. Tente novamente em instantes."
|
||||
"A operação demorou mais que o esperado. Tente novamente."
|
||||
"Sem conexão com o servidor. Verifique sua internet."
|
||||
"Sem conexão com o servidor. Verifique sua internet e tente novamente."
|
||||
```
|
||||
|
||||
### 3. Estados vazios devem explicar o contexto
|
||||
### 3. Estados vazios (*empty states*) devem explicar o contexto e orientar a ação
|
||||
|
||||
Quando uma lista ou tabela está vazia, a mensagem deve orientar o usuário:
|
||||
Quando uma lista, tabela ou painel está vazio, o texto principal não usa ponto final e o texto de apoio orienta o próximo passo:
|
||||
|
||||
```typescript
|
||||
// ❌ ERRADO — genérico
|
||||
"Nenhum registro encontrado"
|
||||
// ❌ ERRADO — genérico e sem saída
|
||||
"Nenhum registro encontrado."
|
||||
"Lista vazia"
|
||||
|
||||
// ✅ CORRETO — explica o domínio e orienta
|
||||
"Nenhuma condicionante cadastrada para esta licença."
|
||||
"Nenhum relatório de monitoramento registrado neste período."
|
||||
"Nenhum empreendimento encontrado com os filtros aplicados. Tente ampliar a busca."
|
||||
// Título (sem ponto final): "Nenhuma condicionante cadastrada"
|
||||
// Apoio: "Para iniciar o controle de prazos, adicione a primeira condicionante desta licença."
|
||||
// Botão CTA: "Adicionar condicionante"
|
||||
```
|
||||
|
||||
### 4. Confirmações devem descrever a consequência
|
||||
### 4. Diálogos de confirmação devem explicar a consequência e usar botões específicos (M3)
|
||||
|
||||
Todo modal de confirmação/decisão crítica (`v-dialog`) deve obedecer à **Anatomia Tripla de Diálogo do Material Design 3**:
|
||||
|
||||
1. **Título com pergunta direta (`Verbo + objeto?`, sem repetir no corpo):** Iniciar com o verbo da ação em *Sentence case* terminado em interrogação.
|
||||
2. **Corpo com a consequência neutra e reversibilidade:** Explicar exatamente o que acontecerá se o usuário prosseguir, sem tom alarmista (`"Atenção!"`) e sem repetir a pergunta do título.
|
||||
3. **Botões de ação explícitos (`1 a 3 palavras`):** O botão confirmatório deve repetir o **verbo específico da ação**. É **proibido** usar pares ambíguos como `[Sim] / [Não]`, `[OK] / [Cancelar]` ou apenas `[Confirmar]`.
|
||||
|
||||
```typescript
|
||||
// ❌ ERRADO — genérico
|
||||
"Tem certeza que deseja excluir?"
|
||||
"Confirmar operação?"
|
||||
// ❌ ERRADO — genérico, alarmista e com botões ambíguos
|
||||
{
|
||||
titulo: "Atenção! Confirmar Operação?",
|
||||
corpo: "Tem certeza que deseja excluir este registro?",
|
||||
botoes: ["Não", "Sim"] // ou ["Cancelar", "OK"]
|
||||
}
|
||||
|
||||
// ✅ CORRETO — descreve o impacto
|
||||
"Excluir esta condicionante? O prazo de cumprimento e os documentos vinculados serão removidos."
|
||||
"Arquivar esta licença? Ela não aparecerá mais nas listagens ativas."
|
||||
// ✅ CORRETO — Anatomia M3 (Pergunta específica + Consequência + Verbo no botão)
|
||||
{
|
||||
titulo: "Excluir condicionante?",
|
||||
corpo: "O prazo de cumprimento e os documentos vinculados serão removidos permanentemente.",
|
||||
botoes: ["Cancelar", "Excluir condicionante"]
|
||||
}
|
||||
|
||||
{
|
||||
titulo: "Arquivar licença?",
|
||||
corpo: "Esta licença sairá das listagens ativas, mas poderá ser consultada no histórico.",
|
||||
botoes: ["Cancelar", "Arquivar licença"]
|
||||
}
|
||||
```
|
||||
|
||||
### 5. Labels e placeholders devem usar vocabulário do domínio
|
||||
### 5. Labels e placeholders devem usar vocabulário do domínio e *Sentence case*
|
||||
|
||||
Nunca finalizar `label` com dois-pontos (`:`) nem usar ponto final (`.`) em `label` ou `placeholder`:
|
||||
|
||||
```typescript
|
||||
// ❌ ERRADO — genérico
|
||||
label: "Nome"
|
||||
placeholder: "Digite aqui"
|
||||
// ❌ ERRADO — genérico, com dois-pontos ou Title Case em todas as palavras
|
||||
label: "Nome:"
|
||||
placeholder: "Digite aqui."
|
||||
label: "Razão Social Do Empreendedor:"
|
||||
|
||||
// ✅ CORRETO — específico do domínio
|
||||
label: "Razão Social do Empreendedor"
|
||||
placeholder: "Ex: Mineração Vale Verde Ltda."
|
||||
// ✅ CORRETO — específico do domínio, Sentence case e sem pontuação final
|
||||
label: "Razão social do empreendedor"
|
||||
placeholder: "Ex.: Mineração Vale Verde Ltda."
|
||||
|
||||
label: "Área Total do Empreendimento"
|
||||
placeholder: "Em hectares (ex: 150,5)"
|
||||
label: "Área total do empreendimento (ha)"
|
||||
placeholder: "Ex.: 150,5"
|
||||
```
|
||||
|
||||
### 6. Schemas Zod devem ter mensagens de domínio
|
||||
### 6. Schemas Zod devem ter mensagens de domínio em *Sentence case*
|
||||
|
||||
```typescript
|
||||
// ❌ ERRADO — mensagens padrão do Zod
|
||||
// ❌ ERRADO — mensagens padrão do Zod em inglês ou técnicas
|
||||
const zEmpreendimento = z.object({
|
||||
nome: z.string().min(1), // "String must contain at least 1 character(s)"
|
||||
area: z.number().positive(), // "Number must be greater than 0"
|
||||
nome: z.string().min(1),
|
||||
area: z.number().positive(),
|
||||
})
|
||||
|
||||
// ✅ CORRETO — mensagens customizadas
|
||||
// ✅ CORRETO — mensagens customizadas em linguagem do domínio
|
||||
const zEmpreendimento = z.object({
|
||||
nome: z.string().min(1, "Informe o nome do empreendimento"),
|
||||
area: z.number({ invalid_type_error: "A área deve ser um número" })
|
||||
nome: z.string().min(1, "Informe a razão social do empreendimento"),
|
||||
area: z.number({ invalid_type_error: "Informe um valor numérico para a área" })
|
||||
.positive("A área deve ser maior que zero"),
|
||||
cnpj: z.string().regex(/^\d{2}\.\d{3}\.\d{3}\/\d{4}-\d{2}$/,
|
||||
"CNPJ inválido. Use o formato 00.000.000/0000-00"),
|
||||
})
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 7. Princípios de UX Writing e Escaneabilidade — Material Design 3
|
||||
|
||||
Toda escrita em componentes Vue (`*-front`) deve aplicar os 7 princípios do guia `m3.material.io/foundations/writing/best-practices`:
|
||||
|
||||
1. **Capitalização estilo de frase (*Sentence case*):**
|
||||
- Usar maiúscula **apenas na primeira letra da primeira palavra** e em **nomes próprios ou siglas oficiais** (`CNPJ`, `CPF`, `IBAMA`, `LP`, `LI`, `LO`, `ART`, `MTR`, `UF`).
|
||||
- Aplica-se a: títulos de páginas, cabeçalhos de cards/seções, títulos de modais e painéis laterais, labels de inputs, abas (`v-tab`), itens de menu e botões (`"Nova licença"`, `"Salvar alterações"`, `"Dados do empreendimento"`).
|
||||
- **Proibido** usar *Title Case* anglófono (`"Salvar Alterações"`, `"Dados Do Empreendimento"`) ou `ALL CAPS` em botões e títulos.
|
||||
2. **Começar pelo objetivo (*Begin with the objective*):**
|
||||
- Quando uma frase orientativa descreve uma meta e a ação necessária para atingi-la, **iniciar a frase pelo objetivo** para facilitar o escaneamento rápido:
|
||||
- ✅ `"Para emitir a licença, anexe o parecer técnico conclusivo"`
|
||||
- ❌ `"Anexe o parecer técnico conclusivo para emitir a licença"`
|
||||
3. **Pontuação enxuta para escaneabilidade (*Skip unnecessary punctuation*):**
|
||||
- **Omitir ponto final (`.`)** em: rótulos (`label`), botões, títulos e subtítulos, cabeçalhos de seção, tooltips curtos de 1 frase, toasts/snackbars de 1 frase e itens de lista (*bullet points*) de frase única.
|
||||
- **Proibir dois-pontos (`:`)** ao final de títulos, cabeçalhos de seção/lista e labels de campos (`<h3>Documentos exigidos</h3>` e nunca `<h3>Documentos exigidos:</h3>`).
|
||||
- **Usar ponto final** apenas quando o texto tiver **2 ou mais frases** ou quando a frase for acompanhada de um link.
|
||||
4. **Tempo presente, voz ativa e tom neutro:**
|
||||
- Escrever no **tempo presente** e na **voz ativa** (`"Salvando alterações..."` em vez de `"As alterações estão sendo salvas"`; `"O arquivo excede 10 MB"` em vez de `"O limite de 10 MB foi excedido pelo arquivo"`).
|
||||
- **Proibido** usar pontos de exclamação (`!`) ou palavras alarmistas (`"Atenção!"`, `"Erro fatal!"`, `"Cuidado!"`) em mensagens de erro ou aviso.
|
||||
5. **Consistência de pessoa verbal (2ª pessoa):**
|
||||
- Dirigir-se diretamente ao usuário em 2ª pessoa (`"você"`, `"seu/sua"`).
|
||||
- **Nunca misturar** 1ª pessoa (`"Meus processos"`) e 2ª pessoa (`"Gerencie seus processos"`) na mesma tela ou fluxo.
|
||||
6. **Algarismos para números e zero abreviações truncadas (*Use numerals & Avoid abbreviations*):**
|
||||
- Escrever números, limites e contadores **sempre como algarismos** (`"3 condicionantes pendentes"`, `"Até 10 MB"`, `"Há 2 dias"`), nunca por extenso (`"três condicionantes"`).
|
||||
- **Proibido** usar abreviações truncadas na interface (`"Qtd."`, `"Obs."`, `"Cad."`, `"End."`, `"Dt."`, `"Máx."`, `"Mín."`, `"Tel."`). Escrever a palavra por extenso (`"Quantidade"`, `"Observações"`, `"Cadastro"`, `"Endereço"`, `"Data"`, `"Máximo"`).
|
||||
7. **Acessibilidade textual (*Alt text & Anti-truncamento cego*):**
|
||||
- Textos alternativos (`alt`) devem ser concisos (até **125 caracteres**) e descrever a função/conteúdo sem iniciar por `"Imagem de..."` ou `"Ícone de..."`. Imagens decorativas devem usar `alt=""`.
|
||||
- **Nunca truncar texto essencial** (`text-truncate` / `ellipsis`) sem oferecer forma acessível de leitura integral (tooltip no foco/hover ou expansão em clique).
|
||||
|
||||
---
|
||||
|
||||
## Impacto
|
||||
|
||||
Sem esta regra, o agente gera mensagens técnicas que confundem gestores ambientais, consultores e técnicos de campo — forçando a equipe de suporte a traduzir erros de sistema para o vocabulário do cliente.
|
||||
Sem esta regra, o agente gera interfaces com textos prolixos, capitalização inconsistente (*Title Case* misturado com *Sentence case*), botões de confirmação ambíguos (`Sim/OK`), abreviações amadoras (`Qtd.`, `Obs.`) e mensagens técnicas que confundem o usuário final.
|
||||
|
||||
## Referências
|
||||
|
||||
- Material Design 3 — Writing Best Practices: `https://m3.material.io/foundations/writing/best-practices`
|
||||
- Rule: `global/rules/zod-validacao-padrao` (schemas com mensagens customizadas)
|
||||
- Workflow: `global/workflows/ux` (design de interface)
|
||||
- Rule: `global/rules/refactoring-ui-hierarquia-despoluicao` (hierarquia visual e despoluição)
|
||||
- Skill: `skills/ux-fluxo-funcional/SKILL.md` (jornada e organização de telas, modais e painéis)
|
||||
- Workflow: `global/workflows/ux` (revisão de UX)
|
||||
|
|
|
|||
|
|
@ -96,9 +96,9 @@ Toda construção ou refatoração em pacotes `*-front` (`@front`, `@ux`, `@land
|
|||
3. **Estados Vazios Despoluídos (p. 234):**
|
||||
- Quando uma coleção estiver inicialmente vazia (zero registros criados), **ocultar barras de filtros secundárias, abas vazias e paginação**, exibindo somente o *Empty State* orientador com o botão de ação primária (CTA).
|
||||
|
||||
### 7. Ergonomia Cognitiva, Orçamento de Viewport e Densidade Visual (Leis de Sweller, Hick e Miller)
|
||||
### 7. Ergonomia Cognitiva, Orçamento de Viewport e Organização de Telas, Modais e Painéis (Leis de Sweller, Hick, Miller e Material Design 3)
|
||||
|
||||
Mesmo respeitando pesos tipográficos e ausência de bordas, uma tela continuará **carregada e cansativa** se desperdiçar espaço de tela com múltiplas barras fixas, colidir painéis laterais ou pendurar dezenas de pílulas coloridas em cada linha. Todo frontend deve obedecer a 4 limites quantitativos de ergonomia espacial:
|
||||
Mesmo respeitando pesos tipográficos e ausência de bordas, uma tela continuará **carregada e cansativa** se desperdiçar espaço de tela com múltiplas barras fixas, colidir painéis laterais ou pendurar dezenas de pílulas coloridas em cada linha. Todo frontend deve obedecer a 5 limites quantitativos de ergonomia espacial:
|
||||
|
||||
1. **Orçamento de Viewport (Regra 75/25) e Teto de 2 Faixas no Topo:**
|
||||
- Em uma tela desktop padrão (`1366x768` ou `1440x900`), no mínimo **70%–75% da área da janela** deve pertencer ao **canvas principal de trabalho** (lista, árvore, tabela, Gantt, Kanban).
|
||||
|
|
@ -114,7 +114,11 @@ Mesmo respeitando pesos tipográficos e ausência de bordas, uma tela continuar
|
|||
- Ações secundárias de linha (ex.: `+ Sub`, `Editar`, `Excluir`) devem ficar ocultas ou discretas em repouso, revelando-se em `:hover` ou `:focus-within` (`opacity-0 group-hover:opacity-100`).
|
||||
4. **Revelação Progressiva Intra-Painel (*Inspetor em Acordeão & Zero Card de Resumo Redundante*):**
|
||||
- Painéis inspetores (`Drawer` / `Aside`) **nunca** devem iniciar com um "Card de Resumo" que duplica os mesmos dados já visíveis na linha selecionada e nos blocos editáveis imediatamente abaixo.
|
||||
- No máximo **2 seções primárias** (*Identificação/Prazo* e *Entrega*) devem iniciar abertas. Seções relacionais secundárias (*Pré-requisitos/Dependências*, *Recursos e Custos*, *Responsáveis*) devem utilizar **seções colapsáveis (Acordeão)** exibindo o resumo no próprio cabeçalho (ex.: `Recursos e Custos (2 • R$ 2.424,00)`) e abrindo a lista/formulário apenas quando expandidas pelo usuário.
|
||||
- No máximo **2 seções primárias** (*Identificação/Prazo* e *Entrega*) devem iniciar abertas. Seções relacionais secundárias (*Pré-requisitos/Dependências*, *Recursos e Custos*, *Responsáveis*) devem utilizar **seções colapsáveis (Acordeão)** exibindo o resumo no próprio cabeçalho (ex.: `Recursos e custos (2 • R$ 2.424,00)`) e abrindo a lista/formulário apenas quando expandidas pelo usuário.
|
||||
5. **Matriz de Superfícies, *Chunking* de Telas e Regiões Fixas em Modais/Painéis (Material Design 3):**
|
||||
- **Agrupamento temático em telas (*Chunking*):** Dividir formulários longos em blocos lógicos de no máximo **4 a 6 campos** encabeçados por título curto em *Sentence case* (`16px–20px`, peso `600`, sem `:` e sem `.`).
|
||||
- **Modais Básicos (*Basic Dialogs*, `400px–560px`):** Usar com parcimônia, apenas para confirmações críticas/destrutivas ou decisões rápidas (até 3–4 campos). **Proibido** usar modal para feedback passivo de sucesso (usar `v-snackbar`) ou formulários extensos de 6+ campos (usar *Side Sheet* ou Página).
|
||||
- **Regiões Fixas (*Pinned Header & Footer*):** Em modais (`v-dialog`) e painéis laterais (`Side Sheets`), o **Cabeçalho no topo** (com título em *Sentence case* e botão fechar `X` nos painéis) e a **Barra de Ações no rodapé** (`[Cancelar]` + `[Verbo específico]`, nunca `Sim/Não/OK`) devem permanecer **sempre fixos**, rolando apenas o corpo central caso necessário.
|
||||
|
||||
---
|
||||
|
||||
|
|
@ -142,18 +146,18 @@ Mesmo respeitando pesos tipográficos e ausência de bordas, uma tela continuar
|
|||
</v-card>
|
||||
```
|
||||
|
||||
### ✅ Correto — Hierarquia clara, menos bordas e pirâmide de ações (*Refactoring UI*)
|
||||
### ✅ Correto — Hierarquia clara, menos bordas, *Sentence case* e pirâmide de ações (*Refactoring UI* + M3)
|
||||
|
||||
```vue
|
||||
<section class="pa-6">
|
||||
<header class="d-flex align-baseline justify-space-between mb-6">
|
||||
<div>
|
||||
<h1 class="text-h6 font-weight-semibold">Licenças Ambientais</h1>
|
||||
<h1 class="text-h6 font-weight-semibold">Licenças ambientais</h1>
|
||||
<p class="text-body-2 text-medium-emphasis">12 licenças vigentes no período</p>
|
||||
</div>
|
||||
<div class="d-flex align-center ga-3">
|
||||
<v-btn color="secondary" variant="outlined">Exportar</v-btn>
|
||||
<v-btn color="primary" variant="flat">Nova Licença</v-btn>
|
||||
<v-btn color="primary" variant="flat">Nova licença</v-btn>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
|
|
@ -180,6 +184,8 @@ Elimina o aspecto amador, sobrecarregado e confuso das interfaces geradas pela I
|
|||
## Referências
|
||||
|
||||
- Livro completo no Paiol: `https://adm.paiol.idz.one/estaticos/Refactoring-UI-Steve-Schoger-Adam-Wathan.pdf`
|
||||
- Material Design 3 — Writing, Layout, Dialogs & Side Sheets: `https://m3.material.io/foundations/writing/best-practices`, `https://m3.material.io/components/dialogs/guidelines`, `https://m3.material.io/components/side-sheets/guidelines`
|
||||
- Rule: `global/rules/mensagens-usuario`
|
||||
- Rule: `global/rules/estilos-design-system`
|
||||
- Skill: `skills/ux/SKILL.md`
|
||||
- Skill: `skills/ux-fluxo-funcional/SKILL.md`
|
||||
|
|
|
|||
|
|
@ -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`
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ Garantir que qualquer aplicação `<modulo>-front` do ecossistema (identificada
|
|||
|
||||
---
|
||||
|
||||
## Os 6 Pilares da Usabilidade Funcional
|
||||
## Os 7 Pilares da Usabilidade Funcional
|
||||
|
||||
### Pilar 1 — Navegação no Menu Lateral Ordenada pela Jornada Operacional
|
||||
|
||||
|
|
@ -96,22 +96,49 @@ No Vuetify 3 em tema claro (`dark: false`), componentes com `variant="tonal"` e
|
|||
### Pilar 6 — Ergonomia de Quadros Operacionais e Navegação Cruzada
|
||||
|
||||
1. **Quadros Kanban Sempre Horizontais Lado a Lado:**
|
||||
- Colunas de estágios (ex.: *A Fazer*, *Em Andamento*, *Em Revisão*, *Concluído*) devem ser exibidas **lado a lado horizontalmente** em desktop utilizando container flexível (`d-flex flex-nowrap overflow-x-auto ga-4 pb-2`) com largura mínima por coluna (`min-width: 280px` a `320px`).
|
||||
- Colunas de estágios (ex.: *A fazer*, *Em andamento*, *Em revisão*, *Concluído*) devem ser exibidas **lado a lado horizontalmente** em desktop utilizando container flexível (`d-flex flex-nowrap overflow-x-auto ga-4 pb-2`) com largura mínima por coluna (`min-width: 280px` a `320px`).
|
||||
- **Proibido** usar `v-row`/`v-col` que empilhe colunas de `min-height: 420px` verticalmente em resoluções intermediárias, gerando enormes caixas vazias que escondem os cartões abaixo da dobra.
|
||||
2. **Navegação Cruzada (*Drill-down* Contextual):**
|
||||
- Cards de resumo em Dashboards e tabelas de acompanhamento devem oferecer ação direta (clique ou botão) para abrir o registro correspondente no painel de detalhamento ou no quadro operacional já filtrado pelo item selecionado (`query` ou `params` de rota).
|
||||
|
||||
---
|
||||
|
||||
### Pilar 7 — Organização de Telas, Modais (`Dialogs`) e Painéis Laterais (`Side Sheets`) — Material Design 3
|
||||
|
||||
Conforme as diretrizes de **Layout (`Panes` e `Canonical Layouts`), `Dialogs` e `Side Sheets` do Material Design 3** (`https://m3.material.io/foundations/layout/understanding-layout/panes`, `https://m3.material.io/components/dialogs/guidelines` e `https://m3.material.io/components/side-sheets/guidelines`):
|
||||
|
||||
1. **Matriz de Escolha de Superfície (Quando usar cada container):**
|
||||
- **Tela Principal / *Single-Pane* (`12 colunas`):** Fluxos primários densos (tabelas amplas, múltiplas abas, cronogramas, formulários estruturantes).
|
||||
- **Painel Lateral Coplanar (*Standard Side Sheet*, `360px–420px`, sem *scrim*):** Inspeção contextual de item selecionado na lista/árvore (*Supporting Pane* / *Master-Detail* leve) ou filtros avançados ao vivo, onde o usuário precisa comparar ou alternar itens na área principal simultaneamente. Recolhe automaticamente o menu lateral esquerdo.
|
||||
- **Painel Lateral Modal (*Modal Side Sheet*, `v-navigation-drawer temporary location="right"`, `400px–560px`, com *scrim*):** Formulários secundários de média complexidade (5 a 8 campos), histórico detalhado ou fluxos auxiliares que exigem foco exclusivo sem perder o contexto espacial da página ao fundo.
|
||||
- **Modal Básico (*Basic Dialog*, `v-dialog`, `max-width: 400px–560px`):** Modais são **interruptivos** por natureza e devem ser usados **com parcimônia**, exclusivamente para:
|
||||
1. **Confirmações críticas ou destrutivas** que exigem decisão imediata;
|
||||
2. **Decisões rápidas ou criação enxuta** (até **3 a 4 campos simples** que não dependem de leitura da tela de fundo).
|
||||
- **Modal de Tela Cheia (*Full-Screen Dialog*, `v-dialog fullscreen`):** Tarefas modais complexas ou multi-etapas com barra superior fixa contendo `Fechar (X)` à esquerda, título em *Sentence case* e ação primária (`Salvar`) à direita.
|
||||
- **Snackbar / Toast (`v-snackbar`):** Feedback passivo de sucesso ou aviso curto de 1 frase. **Proibido** abrir um `v-dialog` apenas para exibir `"Salvo com sucesso"`.
|
||||
2. **Organização de Telas e *Chunking* Escaneável (*Make Content Scannable*):**
|
||||
- Dividir telas e formulários longos em **seções temáticas curtas** (máximo de **4 a 6 campos** relacionados por bloco) encabeçadas por título em *Sentence case* (`16px–20px`, peso `600`, sem dois-pontos `:` e sem ponto final `.`).
|
||||
- Posicionar a informação mais importante no início do título/parágrafo (*front-loading*) e ocultar configurações raras ou detalhes técnicos sob demanda (*Reveal details as needed*).
|
||||
3. **Anatomia e Regiões Fixas em Modais (*M3 Dialog Anatomy & Pinned Regions*):**
|
||||
- **Cabeçalho e Rodapé Fixos (*Pinned Header & Footer*):** Evitar rolagem em *Basic Dialogs*; quando o conteúdo precisar rolar (ex.: lista de seleção), o **Cabeçalho (`v-card-title`) no topo** e a **Barra de Ações (`v-card-actions`) no rodapé** devem permanecer **fixos e visíveis**, rolando apenas o corpo central (`v-card-text`) com divisor sutil.
|
||||
- **Título Específico + Consequência + Botão com Verbo:** Título com pergunta direta (`"Excluir condicionante?"`), corpo explicando a consequência sem repetir o título, e botões alinhados à direita (`[Cancelar]` + `[Excluir condicionante]`), proibindo `[Sim]`, `[Não]` ou `[OK]`.
|
||||
4. **Anatomia de Painéis Laterais (*M3 Side Sheet Anatomy*):**
|
||||
- **Header Fixo no Topo:** Título conciso em *Sentence case*, botão explícito de fechar (`X` com `aria-label="Fechar painel"`) à direita e, quando houver navegação multi-nível dentro do painel, botão de voltar (`←`) à esquerda do título.
|
||||
- **Corpo em Seções e Acordeões:** Até 2 seções primárias abertas; seções relacionais (`1:N`) em acordeões colapsáveis com resumo numérico no título.
|
||||
- **Footer Fixo de Ações:** Quando o painel exigir submissão manual, manter `[Cancelar]` e `[Salvar alterações]` fixos no rodapé do painel com divisor superior.
|
||||
|
||||
---
|
||||
|
||||
## Protocolo Passo a Passo de Aplicação
|
||||
|
||||
1. **Ler Identidade do Módulo:** Consultar `memorias-ia/modulo.yml` para identificar `modulo-id`, `modulo-caminho`, `modulo-descricao` e `modulo-tipo`.
|
||||
2. **Auditar a Jornada Completa:** Inspecionar `App.vue`, `router/index.ts`, `plugins/vuetify.ts` e as views de `<modulo>-front/src/` verificando os 6 Pilares acima.
|
||||
2. **Auditar a Jornada Completa:** Inspecionar `App.vue`, `router/index.ts`, `plugins/vuetify.ts` e as views de `<modulo>-front/src/` verificando os 7 Pilares acima.
|
||||
3. **Corrigir Tokens e Navegação Global:**
|
||||
- Ajustar `secondary` em `vuetify.ts` caso esteja usando cor clara sem contraste.
|
||||
- Concentrar a navegação principal exclusivamente em `MenuLateral.vue` (sem duplicar links na `CabecalhoPrincipal.vue`) e ordenada pela jornada operacional.
|
||||
4. **Desafogar Layouts e Conectar Fluxos:**
|
||||
4. **Desafogar Layouts, Organizar Modais/Painéis e Conectar Fluxos:**
|
||||
- Substituir *split-screens* apertados (`4+8`) por seleção de contexto + área principal de `12 colunas`.
|
||||
- Adequar modais e painéis à Matriz de Superfícies M3 (convertendo modais longos de 6+ campos em *Side Sheets* ou páginas, garantindo *Pinned Header/Footer* e botões com verbo específico).
|
||||
- Inserir links de navegação cruzada e *empty states* guiados entre telas dependentes.
|
||||
- Garantir que quadros Kanban sejam horizontais e responsivos.
|
||||
5. **Validar Visualmente com `agent-browser`:**
|
||||
|
|
@ -126,7 +153,9 @@ No Vuetify 3 em tema claro (`dark: false`), componentes com `variant="tonal"` e
|
|||
- [ ] Telas com abas densas ou tabelas largas usam `12 colunas` em vez de *split-screen* `4+8` espremido?
|
||||
- [ ] O cabeçalho operacional respeita o teto de 2 faixas horizontais (com criadores rápidos sob demanda) e recolhe o menu lateral automaticamente ao abrir o Inspetor de Detalhes?
|
||||
- [ ] Linhas de árvore/lista exibem no máximo 3 indicadores em repouso (sem "Natal de Badges") e o Inspetor usa seções colapsáveis (Acordeão) sem card de resumo duplicado?
|
||||
- [ ] Todos os rótulos técnicos de banco/código (`(info)`, `JSONB`, `Instanciar`, enums crus) foram substituídos por linguagem natural do domínio?
|
||||
- [ ] A Matriz de Superfícies M3 é respeitada (*Basic Dialog* restrito a confirmações ou 3–4 campos com Header/Footer fixos; *Side Sheet* com botão fechar `X` e Footer fixo para formulários médios/inspeção; `v-snackbar` para avisos passivos)?
|
||||
- [ ] Formulários longos estão divididos em blocos temáticos de até 4–6 campos com títulos em *Sentence case* (sem `:` e sem `.`)?
|
||||
- [ ] Todos os rótulos técnicos de banco/código (`(info)`, `JSONB`, `Instanciar`, enums crus) foram substituídos por linguagem natural do domínio em *Sentence case*?
|
||||
- [ ] O token `secondary` do tema Vuetify possui contraste escuro (≥ 4.5:1) em botões e chips `variant="tonal"` e `variant="outlined"`?
|
||||
- [ ] Quadros Kanban renderizam colunas lado a lado (`overflow-x-auto`) sem empilhar caixas vazias gigantes?
|
||||
- [ ] Existe navegação direta (*drill-down*) entre o Dashboard, a Visão de Detalhes e o Quadro Operacional?
|
||||
|
|
@ -135,6 +164,9 @@ No Vuetify 3 em tema claro (`dark: false`), componentes com `variant="tonal"` e
|
|||
|
||||
## 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: `rules/mensagens-usuario.md` (UX Writing M3 e linguagem do domínio)
|
||||
- Rule: `rules/refactoring-ui-hierarquia-despoluicao.md` (Hierarquia visual, pirâmide de ações, menos bordas e consolidação de tabelas — *Refactoring UI*)
|
||||
- Livro *Refactoring UI* (consulta online no Paiol): `https://adm.paiol.idz.one/estaticos/Refactoring-UI-Steve-Schoger-Adam-Wathan.pdf`
|
||||
- Skill: `skills/ux/SKILL.md` (Paleta de cores, Lucide icons e padrões Vuetify)
|
||||
|
|
|
|||
|
|
@ -112,12 +112,17 @@ Antes de alterar, entender o que já existe:
|
|||
|
||||
Para cada elemento da interface, avaliar:
|
||||
|
||||
#### Clareza
|
||||
#### Clareza e UX Writing (Material Design 3)
|
||||
|
||||
- [ ] O propósito de cada elemento é óbvio sem instrução?
|
||||
- [ ] Labels e placeholders são descritivos? (ex: "Buscar por nome ou CPF" vs "Buscar")
|
||||
- [ ] Títulos, cabeçalhos, labels, abas, menus e botões usam **Capitalização de frase (*Sentence case*)** (apenas a 1ª letra da 1ª palavra e siglas em maiúscula, ex.: `"Nova licença"`, `"Salvar alterações"`, sem *Title Case* artificial)?
|
||||
- [ ] Textos orientativos começam pelo **objetivo antes da ação** (`"Para emitir a licença, anexe o parecer técnico"`)?
|
||||
- [ ] Rótulos (`label`), botões, títulos, tooltips de 1 frase e toasts de 1 frase **omitem ponto final (`.`)** e nenhum `label` ou título termina com dois-pontos (`:`)?
|
||||
- [ ] Modais de confirmação seguem a **Anatomia M3**: Título com pergunta direta (`"Excluir condicionante?"`), corpo com a consequência neutra sem repetir o título, e botões `[Cancelar]` + `[Verbo + objeto]` (sem botões genéricos `[Sim]`, `[Não]` ou `[OK]`)?
|
||||
- [ ] Quantidades e limites usam **algarismos** (`"3 condicionantes"`, `"Até 10 MB"`) e a tela está livre de abreviações truncadas (`"Qtd."`, `"Obs."`, `"Cad."`, `"End."`) e pontos de exclamação (`!`) em erros/alertas?
|
||||
- [ ] Labels e placeholders são descritivos (ex.: `"Buscar por razão social ou CNPJ"` vs `"Buscar"`)?
|
||||
- [ ] Ícones acompanham texto quando a ação não é universalmente reconhecível?
|
||||
- [ ] O estado vazio (empty state) orienta o usuário sobre o próximo passo?
|
||||
- [ ] O estado vazio (*empty state*) orienta o usuário sobre o próximo passo com botão de ação?
|
||||
|
||||
#### Hierarquia visual e Pirâmide de Ações (*Refactoring UI*)
|
||||
|
||||
|
|
@ -140,6 +145,8 @@ Para cada elemento da interface, avaliar:
|
|||
- [ ] Ao abrir uma gaveta inspetora de detalhes (`400px+`), o menu lateral de navegação recolhe automaticamente (*Sidebar Mutual Exclusion*) para preservar >= 70% de largura útil?
|
||||
- [ ] Linhas de árvore/lista exibem no máximo 3 indicadores em repouso (sem "Natal de Badges"), revelando ações secundárias (`+ Sub`, `Editar`) em `:hover` / `:focus-within`?
|
||||
- [ ] Painéis de detalhe usam seções colapsáveis (Acordeão) com resumo no título para itens secundários (*Pré-requisitos*, *Recursos*, *Responsáveis*), sem card de resumo duplicado no topo?
|
||||
- [ ] A **Matriz de Superfícies M3** é respeitada (*Basic Dialog* restrito a confirmações críticas ou 3–4 campos rápidos; *Side Sheet* para formulários de 5–8 campos ou inspeção; `v-snackbar` para avisos passivos; formulários longos agrupados em blocos de até 4–6 campos)?
|
||||
- [ ] Em modais (`v-dialog`) e painéis laterais (`Side Sheets`), o **Cabeçalho no topo** (com botão fechar `X` nos painéis) e o **Rodapé de ações** permanecem **fixos (*pinned*)** caso o conteúdo central role?
|
||||
|
||||
#### Feedback e estados
|
||||
|
||||
|
|
@ -262,7 +269,10 @@ Após implementar:
|
|||
| Múltiplos botões sólidos (`primary`, `success`, `warning`) lado a lado | Pirâmide de ações: 1 primário `flat`, secundários `outlined`/`tonal` e terciários `text` |
|
||||
| *Card-ception* (`v-card` com borda dentro de `v-card` + `v-divider`) | Separar seções por contraste de superfície (`#FFFFFF` sobre `#F2F3EE`) ou espaçamento (`24px–32px`) |
|
||||
| Pilha de `Rótulo: Valor` com mesmo peso visual | Omitir rótulos óbvios pelo formato ou combinar em frase; destacar o dado e suavizar o rótulo |
|
||||
| Modal com scroll extenso | Dividir em etapas ou usar drawer lateral |
|
||||
| Modal com scroll extenso ou 6+ campos espremidos | Converter em *Side Sheet* (5–8 campos), página dedicada ou *Full-Screen Dialog*, mantendo Cabeçalho e Rodapé fixos (*pinned*) |
|
||||
| Modal de confirmação com botões `[Sim] / [Não]` ou `[OK]` | Título com pergunta (`"Excluir condicionante?"`), consequência no corpo e botões `[Cancelar]` + `[Excluir condicionante]` |
|
||||
| *Title Case* anglófono (`"Nova Licença"`, `"Salvar Alterações"`) ou labels com `:` | Capitalização de frase (*Sentence case*: `"Nova licença"`, `"Salvar alterações"`) e zero dois-pontos (`:`) em labels/títulos |
|
||||
| Abreviações truncadas (`"Qtd."`, `"Obs."`, `"Cad."`, `"Máx."`) | Escrever por extenso (`"Quantidade"`, `"Observações"`, `"Cadastro"`, `"Máximo"`) e usar algarismos (`3`, `10 MB`) |
|
||||
| Tabela com 10–15+ colunas estreitas | Consolidar colunas correlatas em célula de 2 linhas (Título + metadado secundário) |
|
||||
| Ícone inflado a seco (`48px–64px`) | Ícone `20px–24px` dentro de badge arredondado (`40px–48px`) com fundo pastel |
|
||||
| Estilos inline em template | Usar `<style scoped>` com tokens CSS e fallback |
|
||||
|
|
|
|||
|
|
@ -112,12 +112,17 @@ Antes de alterar, entender o que já existe:
|
|||
|
||||
Para cada elemento da interface, avaliar:
|
||||
|
||||
#### Clareza
|
||||
#### Clareza e UX Writing (Material Design 3)
|
||||
|
||||
- [ ] O propósito de cada elemento é óbvio sem instrução?
|
||||
- [ ] Labels e placeholders são descritivos? (ex: "Buscar por nome ou CPF" vs "Buscar")
|
||||
- [ ] Títulos, cabeçalhos, labels, abas, menus e botões usam **Capitalização de frase (*Sentence case*)** (apenas a 1ª letra da 1ª palavra e siglas em maiúscula, ex.: `"Nova licença"`, `"Salvar alterações"`, sem *Title Case* artificial)?
|
||||
- [ ] Textos orientativos começam pelo **objetivo antes da ação** (`"Para emitir a licença, anexe o parecer técnico"`)?
|
||||
- [ ] Rótulos (`label`), botões, títulos, tooltips de 1 frase e toasts de 1 frase **omitem ponto final (`.`)** e nenhum `label` ou título termina com dois-pontos (`:`)?
|
||||
- [ ] Modais de confirmação seguem a **Anatomia M3**: Título com pergunta direta (`"Excluir condicionante?"`), corpo com a consequência neutra sem repetir o título, e botões `[Cancelar]` + `[Verbo + objeto]` (sem botões genéricos `[Sim]`, `[Não]` ou `[OK]`)?
|
||||
- [ ] Quantidades e limites usam **algarismos** (`"3 condicionantes"`, `"Até 10 MB"`) e a tela está livre de abreviações truncadas (`"Qtd."`, `"Obs."`, `"Cad."`, `"End."`) e pontos de exclamação (`!`) em erros/alertas?
|
||||
- [ ] Labels e placeholders são descritivos (ex.: `"Buscar por razão social ou CNPJ"` vs `"Buscar"`)?
|
||||
- [ ] Ícones acompanham texto quando a ação não é universalmente reconhecível?
|
||||
- [ ] O estado vazio (empty state) orienta o usuário sobre o próximo passo?
|
||||
- [ ] O estado vazio (*empty state*) orienta o usuário sobre o próximo passo com botão de ação?
|
||||
|
||||
#### Hierarquia visual e Pirâmide de Ações (*Refactoring UI*)
|
||||
|
||||
|
|
@ -140,6 +145,8 @@ Para cada elemento da interface, avaliar:
|
|||
- [ ] Ao abrir uma gaveta inspetora de detalhes (`400px+`), o menu lateral de navegação recolhe automaticamente (*Sidebar Mutual Exclusion*) para preservar >= 70% de largura útil?
|
||||
- [ ] Linhas de árvore/lista exibem no máximo 3 indicadores em repouso (sem "Natal de Badges"), revelando ações secundárias (`+ Sub`, `Editar`) em `:hover` / `:focus-within`?
|
||||
- [ ] Painéis de detalhe usam seções colapsáveis (Acordeão) com resumo no título para itens secundários (*Pré-requisitos*, *Recursos*, *Responsáveis*), sem card de resumo duplicado no topo?
|
||||
- [ ] A **Matriz de Superfícies M3** é respeitada (*Basic Dialog* restrito a confirmações críticas ou 3–4 campos rápidos; *Side Sheet* para formulários de 5–8 campos ou inspeção; `v-snackbar` para avisos passivos; formulários longos agrupados em blocos de até 4–6 campos)?
|
||||
- [ ] Em modais (`v-dialog`) e painéis laterais (`Side Sheets`), o **Cabeçalho no topo** (com botão fechar `X` nos painéis) e o **Rodapé de ações** permanecem **fixos (*pinned*)** caso o conteúdo central role?
|
||||
|
||||
#### Feedback e estados
|
||||
|
||||
|
|
@ -262,7 +269,10 @@ Após implementar:
|
|||
| Múltiplos botões sólidos (`primary`, `success`, `warning`) lado a lado | Pirâmide de ações: 1 primário `flat`, secundários `outlined`/`tonal` e terciários `text` |
|
||||
| *Card-ception* (`v-card` com borda dentro de `v-card` + `v-divider`) | Separar seções por contraste de superfície (`#FFFFFF` sobre `#F2F3EE`) ou espaçamento (`24px–32px`) |
|
||||
| Pilha de `Rótulo: Valor` com mesmo peso visual | Omitir rótulos óbvios pelo formato ou combinar em frase; destacar o dado e suavizar o rótulo |
|
||||
| Modal com scroll extenso | Dividir em etapas ou usar drawer lateral |
|
||||
| Modal com scroll extenso ou 6+ campos espremidos | Converter em *Side Sheet* (5–8 campos), página dedicada ou *Full-Screen Dialog*, mantendo Cabeçalho e Rodapé fixos (*pinned*) |
|
||||
| Modal de confirmação com botões `[Sim] / [Não]` ou `[OK]` | Título com pergunta (`"Excluir condicionante?"`), consequência no corpo e botões `[Cancelar]` + `[Excluir condicionante]` |
|
||||
| *Title Case* anglófono (`"Nova Licença"`, `"Salvar Alterações"`) ou labels com `:` | Capitalização de frase (*Sentence case*: `"Nova licença"`, `"Salvar alterações"`) e zero dois-pontos (`:`) em labels/títulos |
|
||||
| Abreviações truncadas (`"Qtd."`, `"Obs."`, `"Cad."`, `"Máx."`) | Escrever por extenso (`"Quantidade"`, `"Observações"`, `"Cadastro"`, `"Máximo"`) e usar algarismos (`3`, `10 MB`) |
|
||||
| Tabela com 10–15+ colunas estreitas | Consolidar colunas correlatas em célula de 2 linhas (Título + metadado secundário) |
|
||||
| Ícone inflado a seco (`48px–64px`) | Ícone `20px–24px` dentro de badge arredondado (`40px–48px`) com fundo pastel |
|
||||
| Estilos inline em template | Usar `<style scoped>` com tokens CSS e fallback |
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"versao": "3.4.0",
|
||||
"atualizadoEm": "2026-10-24",
|
||||
"atualizadoEm": "2026-10-26",
|
||||
"projeto": "agnostico-submodulo",
|
||||
"identidade": "memorias-ia/modulo.yml",
|
||||
"artefatos": {
|
||||
|
|
@ -233,6 +233,7 @@
|
|||
"persona": "agents/ux/persona",
|
||||
"config": "agents/ux/agent.json",
|
||||
"rules": [
|
||||
"agents/ux/rules/mensagens-usuario.md",
|
||||
"agents/ux/rules/refactoring-ui-hierarquia-despoluicao.md"
|
||||
],
|
||||
"skills": [
|
||||
|
|
|
|||
|
|
@ -1,120 +1,183 @@
|
|||
---
|
||||
type: rule
|
||||
name: mensagens-usuario
|
||||
description: Toda mensagem visível ao usuário final deve ser escrita em linguagem do domínio, sem termos técnicos de TI
|
||||
description: Toda mensagem visível ao usuário final deve ser escrita em linguagem do domínio, sem termos técnicos de TI, seguindo as boas práticas de UX Writing do Material Design 3
|
||||
scope: global
|
||||
trigger: glob
|
||||
globs: "**/*.vue, **/*.ts, **/*.tsx"
|
||||
updatedAt: "2026-09-28"
|
||||
updatedAt: "2026-10-26"
|
||||
---
|
||||
|
||||
# Regra: Mensagens Orientadas ao Domínio
|
||||
# Regra: Mensagens Orientadas ao Domínio e UX Writing (Material Design 3)
|
||||
|
||||
## Contexto
|
||||
|
||||
O usuário final dos módulos SaaS é profissional de **engenharia, ciência ou gestão ambiental**. Ele entende de legislação, processos técnicos e ciência aplicada — mas **não tem obrigação de entender tecnologia**.
|
||||
O usuário final dos módulos SaaS é profissional de **engenharia, ciência, administração pública ou gestão ambiental**. Ele entende de legislação, processos técnicos e operação — mas **não tem obrigação de entender tecnologia**.
|
||||
|
||||
Toda mensagem visível na interface — erro, validação, confirmação, tooltip, empty state, ajuda — deve ser escrita na linguagem do domínio do módulo.
|
||||
Toda mensagem e microcopy visível na interface — títulos de telas, cabeçalhos de seções, modais, painéis laterais, erros, validações, confirmações, tooltips, estados vazios e botões — deve unir a **linguagem do domínio do módulo** às **boas práticas de UX Writing do Material Design 3** (`https://m3.material.io/foundations/writing/best-practices`).
|
||||
|
||||
---
|
||||
|
||||
## Regra
|
||||
|
||||
### 1. Erros de validação devem indicar O QUE preencher, não O QUE falhou
|
||||
|
||||
Usar voz ativa, tom neutro (sem culpar o usuário e sem pontos de exclamação `!`) e capitalização estilo de frase (*Sentence case*):
|
||||
|
||||
```typescript
|
||||
// ❌ ERRADO — linguagem técnica
|
||||
"Campo obrigatório"
|
||||
// ❌ ERRADO — linguagem técnica ou Title Case artificial
|
||||
"Campo obrigatório!"
|
||||
"Erro de validação"
|
||||
"Formato inválido"
|
||||
"Payload inválido"
|
||||
"Informe a Área do Empreendimento"
|
||||
|
||||
// ✅ CORRETO — linguagem do domínio
|
||||
"Informe a Área do Empreendimento (em hectares)"
|
||||
"Selecione o Tipo de Licença: LP, LI ou LO"
|
||||
"A Data da Vistoria deve ser anterior à data atual"
|
||||
// ✅ CORRETO — linguagem do domínio + Sentence case (M3)
|
||||
"Informe a área do empreendimento (em hectares)"
|
||||
"Selecione o tipo de licença: LP, LI ou LO"
|
||||
"A data da vistoria deve ser anterior à data de hoje"
|
||||
"Informe o CNPJ no formato 00.000.000/0000-00"
|
||||
```
|
||||
|
||||
### 2. Erros de sistema devem ser traduzidos para o usuário
|
||||
### 2. Erros de sistema devem ser traduzidos e orientar o próximo passo
|
||||
|
||||
Explicar o que ocorreu de forma direta e como o usuário pode prosseguir, sem expor códigos HTTP, *stack traces* ou termos de infraestrutura:
|
||||
|
||||
```typescript
|
||||
// ❌ ERRADO — erro técnico exposto
|
||||
"Erro 500: Internal Server Error"
|
||||
"Timeout na requisição"
|
||||
"Network Error"
|
||||
"ECONNREFUSED"
|
||||
"Network Error / ECONNREFUSED"
|
||||
|
||||
// ✅ CORRETO — mensagem humanizada
|
||||
"Não foi possível salvar. Tente novamente em instantes."
|
||||
// ✅ CORRETO — mensagem humanizada com orientação prática
|
||||
"Não foi possível salvar as alterações. Tente novamente em instantes."
|
||||
"A operação demorou mais que o esperado. Tente novamente."
|
||||
"Sem conexão com o servidor. Verifique sua internet."
|
||||
"Sem conexão com o servidor. Verifique sua internet e tente novamente."
|
||||
```
|
||||
|
||||
### 3. Estados vazios devem explicar o contexto
|
||||
### 3. Estados vazios (*empty states*) devem explicar o contexto e orientar a ação
|
||||
|
||||
Quando uma lista ou tabela está vazia, a mensagem deve orientar o usuário:
|
||||
Quando uma lista, tabela ou painel está vazio, o texto principal não usa ponto final e o texto de apoio orienta o próximo passo:
|
||||
|
||||
```typescript
|
||||
// ❌ ERRADO — genérico
|
||||
"Nenhum registro encontrado"
|
||||
// ❌ ERRADO — genérico e sem saída
|
||||
"Nenhum registro encontrado."
|
||||
"Lista vazia"
|
||||
|
||||
// ✅ CORRETO — explica o domínio e orienta
|
||||
"Nenhuma condicionante cadastrada para esta licença."
|
||||
"Nenhum relatório de monitoramento registrado neste período."
|
||||
"Nenhum empreendimento encontrado com os filtros aplicados. Tente ampliar a busca."
|
||||
// Título (sem ponto final): "Nenhuma condicionante cadastrada"
|
||||
// Apoio: "Para iniciar o controle de prazos, adicione a primeira condicionante desta licença."
|
||||
// Botão CTA: "Adicionar condicionante"
|
||||
```
|
||||
|
||||
### 4. Confirmações devem descrever a consequência
|
||||
### 4. Diálogos de confirmação devem explicar a consequência e usar botões específicos (M3)
|
||||
|
||||
Todo modal de confirmação/decisão crítica (`v-dialog`) deve obedecer à **Anatomia Tripla de Diálogo do Material Design 3**:
|
||||
|
||||
1. **Título com pergunta direta (`Verbo + objeto?`, sem repetir no corpo):** Iniciar com o verbo da ação em *Sentence case* terminado em interrogação.
|
||||
2. **Corpo com a consequência neutra e reversibilidade:** Explicar exatamente o que acontecerá se o usuário prosseguir, sem tom alarmista (`"Atenção!"`) e sem repetir a pergunta do título.
|
||||
3. **Botões de ação explícitos (`1 a 3 palavras`):** O botão confirmatório deve repetir o **verbo específico da ação**. É **proibido** usar pares ambíguos como `[Sim] / [Não]`, `[OK] / [Cancelar]` ou apenas `[Confirmar]`.
|
||||
|
||||
```typescript
|
||||
// ❌ ERRADO — genérico
|
||||
"Tem certeza que deseja excluir?"
|
||||
"Confirmar operação?"
|
||||
// ❌ ERRADO — genérico, alarmista e com botões ambíguos
|
||||
{
|
||||
titulo: "Atenção! Confirmar Operação?",
|
||||
corpo: "Tem certeza que deseja excluir este registro?",
|
||||
botoes: ["Não", "Sim"] // ou ["Cancelar", "OK"]
|
||||
}
|
||||
|
||||
// ✅ CORRETO — descreve o impacto
|
||||
"Excluir esta condicionante? O prazo de cumprimento e os documentos vinculados serão removidos."
|
||||
"Arquivar esta licença? Ela não aparecerá mais nas listagens ativas."
|
||||
// ✅ CORRETO — Anatomia M3 (Pergunta específica + Consequência + Verbo no botão)
|
||||
{
|
||||
titulo: "Excluir condicionante?",
|
||||
corpo: "O prazo de cumprimento e os documentos vinculados serão removidos permanentemente.",
|
||||
botoes: ["Cancelar", "Excluir condicionante"]
|
||||
}
|
||||
|
||||
{
|
||||
titulo: "Arquivar licença?",
|
||||
corpo: "Esta licença sairá das listagens ativas, mas poderá ser consultada no histórico.",
|
||||
botoes: ["Cancelar", "Arquivar licença"]
|
||||
}
|
||||
```
|
||||
|
||||
### 5. Labels e placeholders devem usar vocabulário do domínio
|
||||
### 5. Labels e placeholders devem usar vocabulário do domínio e *Sentence case*
|
||||
|
||||
Nunca finalizar `label` com dois-pontos (`:`) nem usar ponto final (`.`) em `label` ou `placeholder`:
|
||||
|
||||
```typescript
|
||||
// ❌ ERRADO — genérico
|
||||
label: "Nome"
|
||||
placeholder: "Digite aqui"
|
||||
// ❌ ERRADO — genérico, com dois-pontos ou Title Case em todas as palavras
|
||||
label: "Nome:"
|
||||
placeholder: "Digite aqui."
|
||||
label: "Razão Social Do Empreendedor:"
|
||||
|
||||
// ✅ CORRETO — específico do domínio
|
||||
label: "Razão Social do Empreendedor"
|
||||
placeholder: "Ex: Mineração Vale Verde Ltda."
|
||||
// ✅ CORRETO — específico do domínio, Sentence case e sem pontuação final
|
||||
label: "Razão social do empreendedor"
|
||||
placeholder: "Ex.: Mineração Vale Verde Ltda."
|
||||
|
||||
label: "Área Total do Empreendimento"
|
||||
placeholder: "Em hectares (ex: 150,5)"
|
||||
label: "Área total do empreendimento (ha)"
|
||||
placeholder: "Ex.: 150,5"
|
||||
```
|
||||
|
||||
### 6. Schemas Zod devem ter mensagens de domínio
|
||||
### 6. Schemas Zod devem ter mensagens de domínio em *Sentence case*
|
||||
|
||||
```typescript
|
||||
// ❌ ERRADO — mensagens padrão do Zod
|
||||
// ❌ ERRADO — mensagens padrão do Zod em inglês ou técnicas
|
||||
const zEmpreendimento = z.object({
|
||||
nome: z.string().min(1), // "String must contain at least 1 character(s)"
|
||||
area: z.number().positive(), // "Number must be greater than 0"
|
||||
nome: z.string().min(1),
|
||||
area: z.number().positive(),
|
||||
})
|
||||
|
||||
// ✅ CORRETO — mensagens customizadas
|
||||
// ✅ CORRETO — mensagens customizadas em linguagem do domínio
|
||||
const zEmpreendimento = z.object({
|
||||
nome: z.string().min(1, "Informe o nome do empreendimento"),
|
||||
area: z.number({ invalid_type_error: "A área deve ser um número" })
|
||||
nome: z.string().min(1, "Informe a razão social do empreendimento"),
|
||||
area: z.number({ invalid_type_error: "Informe um valor numérico para a área" })
|
||||
.positive("A área deve ser maior que zero"),
|
||||
cnpj: z.string().regex(/^\d{2}\.\d{3}\.\d{3}\/\d{4}-\d{2}$/,
|
||||
"CNPJ inválido. Use o formato 00.000.000/0000-00"),
|
||||
})
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 7. Princípios de UX Writing e Escaneabilidade — Material Design 3
|
||||
|
||||
Toda escrita em componentes Vue (`*-front`) deve aplicar os 7 princípios do guia `m3.material.io/foundations/writing/best-practices`:
|
||||
|
||||
1. **Capitalização estilo de frase (*Sentence case*):**
|
||||
- Usar maiúscula **apenas na primeira letra da primeira palavra** e em **nomes próprios ou siglas oficiais** (`CNPJ`, `CPF`, `IBAMA`, `LP`, `LI`, `LO`, `ART`, `MTR`, `UF`).
|
||||
- Aplica-se a: títulos de páginas, cabeçalhos de cards/seções, títulos de modais e painéis laterais, labels de inputs, abas (`v-tab`), itens de menu e botões (`"Nova licença"`, `"Salvar alterações"`, `"Dados do empreendimento"`).
|
||||
- **Proibido** usar *Title Case* anglófono (`"Salvar Alterações"`, `"Dados Do Empreendimento"`) ou `ALL CAPS` em botões e títulos.
|
||||
2. **Começar pelo objetivo (*Begin with the objective*):**
|
||||
- Quando uma frase orientativa descreve uma meta e a ação necessária para atingi-la, **iniciar a frase pelo objetivo** para facilitar o escaneamento rápido:
|
||||
- ✅ `"Para emitir a licença, anexe o parecer técnico conclusivo"`
|
||||
- ❌ `"Anexe o parecer técnico conclusivo para emitir a licença"`
|
||||
3. **Pontuação enxuta para escaneabilidade (*Skip unnecessary punctuation*):**
|
||||
- **Omitir ponto final (`.`)** em: rótulos (`label`), botões, títulos e subtítulos, cabeçalhos de seção, tooltips curtos de 1 frase, toasts/snackbars de 1 frase e itens de lista (*bullet points*) de frase única.
|
||||
- **Proibir dois-pontos (`:`)** ao final de títulos, cabeçalhos de seção/lista e labels de campos (`<h3>Documentos exigidos</h3>` e nunca `<h3>Documentos exigidos:</h3>`).
|
||||
- **Usar ponto final** apenas quando o texto tiver **2 ou mais frases** ou quando a frase for acompanhada de um link.
|
||||
4. **Tempo presente, voz ativa e tom neutro:**
|
||||
- Escrever no **tempo presente** e na **voz ativa** (`"Salvando alterações..."` em vez de `"As alterações estão sendo salvas"`; `"O arquivo excede 10 MB"` em vez de `"O limite de 10 MB foi excedido pelo arquivo"`).
|
||||
- **Proibido** usar pontos de exclamação (`!`) ou palavras alarmistas (`"Atenção!"`, `"Erro fatal!"`, `"Cuidado!"`) em mensagens de erro ou aviso.
|
||||
5. **Consistência de pessoa verbal (2ª pessoa):**
|
||||
- Dirigir-se diretamente ao usuário em 2ª pessoa (`"você"`, `"seu/sua"`).
|
||||
- **Nunca misturar** 1ª pessoa (`"Meus processos"`) e 2ª pessoa (`"Gerencie seus processos"`) na mesma tela ou fluxo.
|
||||
6. **Algarismos para números e zero abreviações truncadas (*Use numerals & Avoid abbreviations*):**
|
||||
- Escrever números, limites e contadores **sempre como algarismos** (`"3 condicionantes pendentes"`, `"Até 10 MB"`, `"Há 2 dias"`), nunca por extenso (`"três condicionantes"`).
|
||||
- **Proibido** usar abreviações truncadas na interface (`"Qtd."`, `"Obs."`, `"Cad."`, `"End."`, `"Dt."`, `"Máx."`, `"Mín."`, `"Tel."`). Escrever a palavra por extenso (`"Quantidade"`, `"Observações"`, `"Cadastro"`, `"Endereço"`, `"Data"`, `"Máximo"`).
|
||||
7. **Acessibilidade textual (*Alt text & Anti-truncamento cego*):**
|
||||
- Textos alternativos (`alt`) devem ser concisos (até **125 caracteres**) e descrever a função/conteúdo sem iniciar por `"Imagem de..."` ou `"Ícone de..."`. Imagens decorativas devem usar `alt=""`.
|
||||
- **Nunca truncar texto essencial** (`text-truncate` / `ellipsis`) sem oferecer forma acessível de leitura integral (tooltip no foco/hover ou expansão em clique).
|
||||
|
||||
---
|
||||
|
||||
## Impacto
|
||||
|
||||
Sem esta regra, o agente gera mensagens técnicas que confundem gestores ambientais, consultores e técnicos de campo — forçando a equipe de suporte a traduzir erros de sistema para o vocabulário do cliente.
|
||||
Sem esta regra, o agente gera interfaces com textos prolixos, capitalização inconsistente (*Title Case* misturado com *Sentence case*), botões de confirmação ambíguos (`Sim/OK`), abreviações amadoras (`Qtd.`, `Obs.`) e mensagens técnicas que confundem o usuário final.
|
||||
|
||||
## Referências
|
||||
|
||||
- Material Design 3 — Writing Best Practices: `https://m3.material.io/foundations/writing/best-practices`
|
||||
- Rule: `global/rules/zod-validacao-padrao` (schemas com mensagens customizadas)
|
||||
- Workflow: `global/workflows/ux` (design de interface)
|
||||
- Rule: `global/rules/refactoring-ui-hierarquia-despoluicao` (hierarquia visual e despoluição)
|
||||
- Skill: `skills/ux-fluxo-funcional/SKILL.md` (jornada e organização de telas, modais e painéis)
|
||||
- Workflow: `global/workflows/ux` (revisão de UX)
|
||||
|
|
|
|||
|
|
@ -96,9 +96,9 @@ Toda construção ou refatoração em pacotes `*-front` (`@front`, `@ux`, `@land
|
|||
3. **Estados Vazios Despoluídos (p. 234):**
|
||||
- Quando uma coleção estiver inicialmente vazia (zero registros criados), **ocultar barras de filtros secundárias, abas vazias e paginação**, exibindo somente o *Empty State* orientador com o botão de ação primária (CTA).
|
||||
|
||||
### 7. Ergonomia Cognitiva, Orçamento de Viewport e Densidade Visual (Leis de Sweller, Hick e Miller)
|
||||
### 7. Ergonomia Cognitiva, Orçamento de Viewport e Organização de Telas, Modais e Painéis (Leis de Sweller, Hick, Miller e Material Design 3)
|
||||
|
||||
Mesmo respeitando pesos tipográficos e ausência de bordas, uma tela continuará **carregada e cansativa** se desperdiçar espaço de tela com múltiplas barras fixas, colidir painéis laterais ou pendurar dezenas de pílulas coloridas em cada linha. Todo frontend deve obedecer a 4 limites quantitativos de ergonomia espacial:
|
||||
Mesmo respeitando pesos tipográficos e ausência de bordas, uma tela continuará **carregada e cansativa** se desperdiçar espaço de tela com múltiplas barras fixas, colidir painéis laterais ou pendurar dezenas de pílulas coloridas em cada linha. Todo frontend deve obedecer a 5 limites quantitativos de ergonomia espacial:
|
||||
|
||||
1. **Orçamento de Viewport (Regra 75/25) e Teto de 2 Faixas no Topo:**
|
||||
- Em uma tela desktop padrão (`1366x768` ou `1440x900`), no mínimo **70%–75% da área da janela** deve pertencer ao **canvas principal de trabalho** (lista, árvore, tabela, Gantt, Kanban).
|
||||
|
|
@ -114,7 +114,11 @@ Mesmo respeitando pesos tipográficos e ausência de bordas, uma tela continuar
|
|||
- Ações secundárias de linha (ex.: `+ Sub`, `Editar`, `Excluir`) devem ficar ocultas ou discretas em repouso, revelando-se em `:hover` ou `:focus-within` (`opacity-0 group-hover:opacity-100`).
|
||||
4. **Revelação Progressiva Intra-Painel (*Inspetor em Acordeão & Zero Card de Resumo Redundante*):**
|
||||
- Painéis inspetores (`Drawer` / `Aside`) **nunca** devem iniciar com um "Card de Resumo" que duplica os mesmos dados já visíveis na linha selecionada e nos blocos editáveis imediatamente abaixo.
|
||||
- No máximo **2 seções primárias** (*Identificação/Prazo* e *Entrega*) devem iniciar abertas. Seções relacionais secundárias (*Pré-requisitos/Dependências*, *Recursos e Custos*, *Responsáveis*) devem utilizar **seções colapsáveis (Acordeão)** exibindo o resumo no próprio cabeçalho (ex.: `Recursos e Custos (2 • R$ 2.424,00)`) e abrindo a lista/formulário apenas quando expandidas pelo usuário.
|
||||
- No máximo **2 seções primárias** (*Identificação/Prazo* e *Entrega*) devem iniciar abertas. Seções relacionais secundárias (*Pré-requisitos/Dependências*, *Recursos e Custos*, *Responsáveis*) devem utilizar **seções colapsáveis (Acordeão)** exibindo o resumo no próprio cabeçalho (ex.: `Recursos e custos (2 • R$ 2.424,00)`) e abrindo a lista/formulário apenas quando expandidas pelo usuário.
|
||||
5. **Matriz de Superfícies, *Chunking* de Telas e Regiões Fixas em Modais/Painéis (Material Design 3):**
|
||||
- **Agrupamento temático em telas (*Chunking*):** Dividir formulários longos em blocos lógicos de no máximo **4 a 6 campos** encabeçados por título curto em *Sentence case* (`16px–20px`, peso `600`, sem `:` e sem `.`).
|
||||
- **Modais Básicos (*Basic Dialogs*, `400px–560px`):** Usar com parcimônia, apenas para confirmações críticas/destrutivas ou decisões rápidas (até 3–4 campos). **Proibido** usar modal para feedback passivo de sucesso (usar `v-snackbar`) ou formulários extensos de 6+ campos (usar *Side Sheet* ou Página).
|
||||
- **Regiões Fixas (*Pinned Header & Footer*):** Em modais (`v-dialog`) e painéis laterais (`Side Sheets`), o **Cabeçalho no topo** (com título em *Sentence case* e botão fechar `X` nos painéis) e a **Barra de Ações no rodapé** (`[Cancelar]` + `[Verbo específico]`, nunca `Sim/Não/OK`) devem permanecer **sempre fixos**, rolando apenas o corpo central caso necessário.
|
||||
|
||||
---
|
||||
|
||||
|
|
@ -142,18 +146,18 @@ Mesmo respeitando pesos tipográficos e ausência de bordas, uma tela continuar
|
|||
</v-card>
|
||||
```
|
||||
|
||||
### ✅ Correto — Hierarquia clara, menos bordas e pirâmide de ações (*Refactoring UI*)
|
||||
### ✅ Correto — Hierarquia clara, menos bordas, *Sentence case* e pirâmide de ações (*Refactoring UI* + M3)
|
||||
|
||||
```vue
|
||||
<section class="pa-6">
|
||||
<header class="d-flex align-baseline justify-space-between mb-6">
|
||||
<div>
|
||||
<h1 class="text-h6 font-weight-semibold">Licenças Ambientais</h1>
|
||||
<h1 class="text-h6 font-weight-semibold">Licenças ambientais</h1>
|
||||
<p class="text-body-2 text-medium-emphasis">12 licenças vigentes no período</p>
|
||||
</div>
|
||||
<div class="d-flex align-center ga-3">
|
||||
<v-btn color="secondary" variant="outlined">Exportar</v-btn>
|
||||
<v-btn color="primary" variant="flat">Nova Licença</v-btn>
|
||||
<v-btn color="primary" variant="flat">Nova licença</v-btn>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
|
|
@ -180,6 +184,8 @@ Elimina o aspecto amador, sobrecarregado e confuso das interfaces geradas pela I
|
|||
## Referências
|
||||
|
||||
- Livro completo no Paiol: `https://adm.paiol.idz.one/estaticos/Refactoring-UI-Steve-Schoger-Adam-Wathan.pdf`
|
||||
- Material Design 3 — Writing, Layout, Dialogs & Side Sheets: `https://m3.material.io/foundations/writing/best-practices`, `https://m3.material.io/components/dialogs/guidelines`, `https://m3.material.io/components/side-sheets/guidelines`
|
||||
- Rule: `global/rules/mensagens-usuario`
|
||||
- Rule: `global/rules/estilos-design-system`
|
||||
- Skill: `skills/ux/SKILL.md`
|
||||
- Skill: `skills/ux-fluxo-funcional/SKILL.md`
|
||||
|
|
|
|||
|
|
@ -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`
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ Garantir que qualquer aplicação `<modulo>-front` do ecossistema (identificada
|
|||
|
||||
---
|
||||
|
||||
## Os 6 Pilares da Usabilidade Funcional
|
||||
## Os 7 Pilares da Usabilidade Funcional
|
||||
|
||||
### Pilar 1 — Navegação no Menu Lateral Ordenada pela Jornada Operacional
|
||||
|
||||
|
|
@ -96,22 +96,49 @@ No Vuetify 3 em tema claro (`dark: false`), componentes com `variant="tonal"` e
|
|||
### Pilar 6 — Ergonomia de Quadros Operacionais e Navegação Cruzada
|
||||
|
||||
1. **Quadros Kanban Sempre Horizontais Lado a Lado:**
|
||||
- Colunas de estágios (ex.: *A Fazer*, *Em Andamento*, *Em Revisão*, *Concluído*) devem ser exibidas **lado a lado horizontalmente** em desktop utilizando container flexível (`d-flex flex-nowrap overflow-x-auto ga-4 pb-2`) com largura mínima por coluna (`min-width: 280px` a `320px`).
|
||||
- Colunas de estágios (ex.: *A fazer*, *Em andamento*, *Em revisão*, *Concluído*) devem ser exibidas **lado a lado horizontalmente** em desktop utilizando container flexível (`d-flex flex-nowrap overflow-x-auto ga-4 pb-2`) com largura mínima por coluna (`min-width: 280px` a `320px`).
|
||||
- **Proibido** usar `v-row`/`v-col` que empilhe colunas de `min-height: 420px` verticalmente em resoluções intermediárias, gerando enormes caixas vazias que escondem os cartões abaixo da dobra.
|
||||
2. **Navegação Cruzada (*Drill-down* Contextual):**
|
||||
- Cards de resumo em Dashboards e tabelas de acompanhamento devem oferecer ação direta (clique ou botão) para abrir o registro correspondente no painel de detalhamento ou no quadro operacional já filtrado pelo item selecionado (`query` ou `params` de rota).
|
||||
|
||||
---
|
||||
|
||||
### Pilar 7 — Organização de Telas, Modais (`Dialogs`) e Painéis Laterais (`Side Sheets`) — Material Design 3
|
||||
|
||||
Conforme as diretrizes de **Layout (`Panes` e `Canonical Layouts`), `Dialogs` e `Side Sheets` do Material Design 3** (`https://m3.material.io/foundations/layout/understanding-layout/panes`, `https://m3.material.io/components/dialogs/guidelines` e `https://m3.material.io/components/side-sheets/guidelines`):
|
||||
|
||||
1. **Matriz de Escolha de Superfície (Quando usar cada container):**
|
||||
- **Tela Principal / *Single-Pane* (`12 colunas`):** Fluxos primários densos (tabelas amplas, múltiplas abas, cronogramas, formulários estruturantes).
|
||||
- **Painel Lateral Coplanar (*Standard Side Sheet*, `360px–420px`, sem *scrim*):** Inspeção contextual de item selecionado na lista/árvore (*Supporting Pane* / *Master-Detail* leve) ou filtros avançados ao vivo, onde o usuário precisa comparar ou alternar itens na área principal simultaneamente. Recolhe automaticamente o menu lateral esquerdo.
|
||||
- **Painel Lateral Modal (*Modal Side Sheet*, `v-navigation-drawer temporary location="right"`, `400px–560px`, com *scrim*):** Formulários secundários de média complexidade (5 a 8 campos), histórico detalhado ou fluxos auxiliares que exigem foco exclusivo sem perder o contexto espacial da página ao fundo.
|
||||
- **Modal Básico (*Basic Dialog*, `v-dialog`, `max-width: 400px–560px`):** Modais são **interruptivos** por natureza e devem ser usados **com parcimônia**, exclusivamente para:
|
||||
1. **Confirmações críticas ou destrutivas** que exigem decisão imediata;
|
||||
2. **Decisões rápidas ou criação enxuta** (até **3 a 4 campos simples** que não dependem de leitura da tela de fundo).
|
||||
- **Modal de Tela Cheia (*Full-Screen Dialog*, `v-dialog fullscreen`):** Tarefas modais complexas ou multi-etapas com barra superior fixa contendo `Fechar (X)` à esquerda, título em *Sentence case* e ação primária (`Salvar`) à direita.
|
||||
- **Snackbar / Toast (`v-snackbar`):** Feedback passivo de sucesso ou aviso curto de 1 frase. **Proibido** abrir um `v-dialog` apenas para exibir `"Salvo com sucesso"`.
|
||||
2. **Organização de Telas e *Chunking* Escaneável (*Make Content Scannable*):**
|
||||
- Dividir telas e formulários longos em **seções temáticas curtas** (máximo de **4 a 6 campos** relacionados por bloco) encabeçadas por título em *Sentence case* (`16px–20px`, peso `600`, sem dois-pontos `:` e sem ponto final `.`).
|
||||
- Posicionar a informação mais importante no início do título/parágrafo (*front-loading*) e ocultar configurações raras ou detalhes técnicos sob demanda (*Reveal details as needed*).
|
||||
3. **Anatomia e Regiões Fixas em Modais (*M3 Dialog Anatomy & Pinned Regions*):**
|
||||
- **Cabeçalho e Rodapé Fixos (*Pinned Header & Footer*):** Evitar rolagem em *Basic Dialogs*; quando o conteúdo precisar rolar (ex.: lista de seleção), o **Cabeçalho (`v-card-title`) no topo** e a **Barra de Ações (`v-card-actions`) no rodapé** devem permanecer **fixos e visíveis**, rolando apenas o corpo central (`v-card-text`) com divisor sutil.
|
||||
- **Título Específico + Consequência + Botão com Verbo:** Título com pergunta direta (`"Excluir condicionante?"`), corpo explicando a consequência sem repetir o título, e botões alinhados à direita (`[Cancelar]` + `[Excluir condicionante]`), proibindo `[Sim]`, `[Não]` ou `[OK]`.
|
||||
4. **Anatomia de Painéis Laterais (*M3 Side Sheet Anatomy*):**
|
||||
- **Header Fixo no Topo:** Título conciso em *Sentence case*, botão explícito de fechar (`X` com `aria-label="Fechar painel"`) à direita e, quando houver navegação multi-nível dentro do painel, botão de voltar (`←`) à esquerda do título.
|
||||
- **Corpo em Seções e Acordeões:** Até 2 seções primárias abertas; seções relacionais (`1:N`) em acordeões colapsáveis com resumo numérico no título.
|
||||
- **Footer Fixo de Ações:** Quando o painel exigir submissão manual, manter `[Cancelar]` e `[Salvar alterações]` fixos no rodapé do painel com divisor superior.
|
||||
|
||||
---
|
||||
|
||||
## Protocolo Passo a Passo de Aplicação
|
||||
|
||||
1. **Ler Identidade do Módulo:** Consultar `memorias-ia/modulo.yml` para identificar `modulo-id`, `modulo-caminho`, `modulo-descricao` e `modulo-tipo`.
|
||||
2. **Auditar a Jornada Completa:** Inspecionar `App.vue`, `router/index.ts`, `plugins/vuetify.ts` e as views de `<modulo>-front/src/` verificando os 6 Pilares acima.
|
||||
2. **Auditar a Jornada Completa:** Inspecionar `App.vue`, `router/index.ts`, `plugins/vuetify.ts` e as views de `<modulo>-front/src/` verificando os 7 Pilares acima.
|
||||
3. **Corrigir Tokens e Navegação Global:**
|
||||
- Ajustar `secondary` em `vuetify.ts` caso esteja usando cor clara sem contraste.
|
||||
- Concentrar a navegação principal exclusivamente em `MenuLateral.vue` (sem duplicar links na `CabecalhoPrincipal.vue`) e ordenada pela jornada operacional.
|
||||
4. **Desafogar Layouts e Conectar Fluxos:**
|
||||
4. **Desafogar Layouts, Organizar Modais/Painéis e Conectar Fluxos:**
|
||||
- Substituir *split-screens* apertados (`4+8`) por seleção de contexto + área principal de `12 colunas`.
|
||||
- Adequar modais e painéis à Matriz de Superfícies M3 (convertendo modais longos de 6+ campos em *Side Sheets* ou páginas, garantindo *Pinned Header/Footer* e botões com verbo específico).
|
||||
- Inserir links de navegação cruzada e *empty states* guiados entre telas dependentes.
|
||||
- Garantir que quadros Kanban sejam horizontais e responsivos.
|
||||
5. **Validar Visualmente com `agent-browser`:**
|
||||
|
|
@ -126,7 +153,9 @@ No Vuetify 3 em tema claro (`dark: false`), componentes com `variant="tonal"` e
|
|||
- [ ] Telas com abas densas ou tabelas largas usam `12 colunas` em vez de *split-screen* `4+8` espremido?
|
||||
- [ ] O cabeçalho operacional respeita o teto de 2 faixas horizontais (com criadores rápidos sob demanda) e recolhe o menu lateral automaticamente ao abrir o Inspetor de Detalhes?
|
||||
- [ ] Linhas de árvore/lista exibem no máximo 3 indicadores em repouso (sem "Natal de Badges") e o Inspetor usa seções colapsáveis (Acordeão) sem card de resumo duplicado?
|
||||
- [ ] Todos os rótulos técnicos de banco/código (`(info)`, `JSONB`, `Instanciar`, enums crus) foram substituídos por linguagem natural do domínio?
|
||||
- [ ] A Matriz de Superfícies M3 é respeitada (*Basic Dialog* restrito a confirmações ou 3–4 campos com Header/Footer fixos; *Side Sheet* com botão fechar `X` e Footer fixo para formulários médios/inspeção; `v-snackbar` para avisos passivos)?
|
||||
- [ ] Formulários longos estão divididos em blocos temáticos de até 4–6 campos com títulos em *Sentence case* (sem `:` e sem `.`)?
|
||||
- [ ] Todos os rótulos técnicos de banco/código (`(info)`, `JSONB`, `Instanciar`, enums crus) foram substituídos por linguagem natural do domínio em *Sentence case*?
|
||||
- [ ] O token `secondary` do tema Vuetify possui contraste escuro (≥ 4.5:1) em botões e chips `variant="tonal"` e `variant="outlined"`?
|
||||
- [ ] Quadros Kanban renderizam colunas lado a lado (`overflow-x-auto`) sem empilhar caixas vazias gigantes?
|
||||
- [ ] Existe navegação direta (*drill-down*) entre o Dashboard, a Visão de Detalhes e o Quadro Operacional?
|
||||
|
|
@ -135,6 +164,9 @@ No Vuetify 3 em tema claro (`dark: false`), componentes com `variant="tonal"` e
|
|||
|
||||
## 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: `rules/mensagens-usuario.md` (UX Writing M3 e linguagem do domínio)
|
||||
- Rule: `rules/refactoring-ui-hierarquia-despoluicao.md` (Hierarquia visual, pirâmide de ações, menos bordas e consolidação de tabelas — *Refactoring UI*)
|
||||
- Livro *Refactoring UI* (consulta online no Paiol): `https://adm.paiol.idz.one/estaticos/Refactoring-UI-Steve-Schoger-Adam-Wathan.pdf`
|
||||
- Skill: `skills/ux/SKILL.md` (Paleta de cores, Lucide icons e padrões Vuetify)
|
||||
|
|
|
|||
|
|
@ -112,12 +112,17 @@ Antes de alterar, entender o que já existe:
|
|||
|
||||
Para cada elemento da interface, avaliar:
|
||||
|
||||
#### Clareza
|
||||
#### Clareza e UX Writing (Material Design 3)
|
||||
|
||||
- [ ] O propósito de cada elemento é óbvio sem instrução?
|
||||
- [ ] Labels e placeholders são descritivos? (ex: "Buscar por nome ou CPF" vs "Buscar")
|
||||
- [ ] Títulos, cabeçalhos, labels, abas, menus e botões usam **Capitalização de frase (*Sentence case*)** (apenas a 1ª letra da 1ª palavra e siglas em maiúscula, ex.: `"Nova licença"`, `"Salvar alterações"`, sem *Title Case* artificial)?
|
||||
- [ ] Textos orientativos começam pelo **objetivo antes da ação** (`"Para emitir a licença, anexe o parecer técnico"`)?
|
||||
- [ ] Rótulos (`label`), botões, títulos, tooltips de 1 frase e toasts de 1 frase **omitem ponto final (`.`)** e nenhum `label` ou título termina com dois-pontos (`:`)?
|
||||
- [ ] Modais de confirmação seguem a **Anatomia M3**: Título com pergunta direta (`"Excluir condicionante?"`), corpo com a consequência neutra sem repetir o título, e botões `[Cancelar]` + `[Verbo + objeto]` (sem botões genéricos `[Sim]`, `[Não]` ou `[OK]`)?
|
||||
- [ ] Quantidades e limites usam **algarismos** (`"3 condicionantes"`, `"Até 10 MB"`) e a tela está livre de abreviações truncadas (`"Qtd."`, `"Obs."`, `"Cad."`, `"End."`) e pontos de exclamação (`!`) em erros/alertas?
|
||||
- [ ] Labels e placeholders são descritivos (ex.: `"Buscar por razão social ou CNPJ"` vs `"Buscar"`)?
|
||||
- [ ] Ícones acompanham texto quando a ação não é universalmente reconhecível?
|
||||
- [ ] O estado vazio (empty state) orienta o usuário sobre o próximo passo?
|
||||
- [ ] O estado vazio (*empty state*) orienta o usuário sobre o próximo passo com botão de ação?
|
||||
|
||||
#### Hierarquia visual e Pirâmide de Ações (*Refactoring UI*)
|
||||
|
||||
|
|
@ -140,6 +145,8 @@ Para cada elemento da interface, avaliar:
|
|||
- [ ] Ao abrir uma gaveta inspetora de detalhes (`400px+`), o menu lateral de navegação recolhe automaticamente (*Sidebar Mutual Exclusion*) para preservar >= 70% de largura útil?
|
||||
- [ ] Linhas de árvore/lista exibem no máximo 3 indicadores em repouso (sem "Natal de Badges"), revelando ações secundárias (`+ Sub`, `Editar`) em `:hover` / `:focus-within`?
|
||||
- [ ] Painéis de detalhe usam seções colapsáveis (Acordeão) com resumo no título para itens secundários (*Pré-requisitos*, *Recursos*, *Responsáveis*), sem card de resumo duplicado no topo?
|
||||
- [ ] A **Matriz de Superfícies M3** é respeitada (*Basic Dialog* restrito a confirmações críticas ou 3–4 campos rápidos; *Side Sheet* para formulários de 5–8 campos ou inspeção; `v-snackbar` para avisos passivos; formulários longos agrupados em blocos de até 4–6 campos)?
|
||||
- [ ] Em modais (`v-dialog`) e painéis laterais (`Side Sheets`), o **Cabeçalho no topo** (com botão fechar `X` nos painéis) e o **Rodapé de ações** permanecem **fixos (*pinned*)** caso o conteúdo central role?
|
||||
|
||||
#### Feedback e estados
|
||||
|
||||
|
|
@ -262,7 +269,10 @@ Após implementar:
|
|||
| Múltiplos botões sólidos (`primary`, `success`, `warning`) lado a lado | Pirâmide de ações: 1 primário `flat`, secundários `outlined`/`tonal` e terciários `text` |
|
||||
| *Card-ception* (`v-card` com borda dentro de `v-card` + `v-divider`) | Separar seções por contraste de superfície (`#FFFFFF` sobre `#F2F3EE`) ou espaçamento (`24px–32px`) |
|
||||
| Pilha de `Rótulo: Valor` com mesmo peso visual | Omitir rótulos óbvios pelo formato ou combinar em frase; destacar o dado e suavizar o rótulo |
|
||||
| Modal com scroll extenso | Dividir em etapas ou usar drawer lateral |
|
||||
| Modal com scroll extenso ou 6+ campos espremidos | Converter em *Side Sheet* (5–8 campos), página dedicada ou *Full-Screen Dialog*, mantendo Cabeçalho e Rodapé fixos (*pinned*) |
|
||||
| Modal de confirmação com botões `[Sim] / [Não]` ou `[OK]` | Título com pergunta (`"Excluir condicionante?"`), consequência no corpo e botões `[Cancelar]` + `[Excluir condicionante]` |
|
||||
| *Title Case* anglófono (`"Nova Licença"`, `"Salvar Alterações"`) ou labels com `:` | Capitalização de frase (*Sentence case*: `"Nova licença"`, `"Salvar alterações"`) e zero dois-pontos (`:`) em labels/títulos |
|
||||
| Abreviações truncadas (`"Qtd."`, `"Obs."`, `"Cad."`, `"Máx."`) | Escrever por extenso (`"Quantidade"`, `"Observações"`, `"Cadastro"`, `"Máximo"`) e usar algarismos (`3`, `10 MB`) |
|
||||
| Tabela com 10–15+ colunas estreitas | Consolidar colunas correlatas em célula de 2 linhas (Título + metadado secundário) |
|
||||
| Ícone inflado a seco (`48px–64px`) | Ícone `20px–24px` dentro de badge arredondado (`40px–48px`) com fundo pastel |
|
||||
| Estilos inline em template | Usar `<style scoped>` com tokens CSS e fallback |
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue