refactor(ux): garantir agnosticismo polimorfico e exemplos neutros nos artefatos de UX
This commit is contained in:
parent
b540fd97c0
commit
790b56e614
21 changed files with 259 additions and 254 deletions
|
|
@ -66,9 +66,9 @@ Toda auditoria de UX deve verificar se a tela, modais e painéis seguem os limit
|
|||
### 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]`?
|
||||
- [ ] **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 solicitação"` e não `"Nova Solicitação"`)?
|
||||
- [ ] **Começar pelo Objetivo (*Begin with the objective*):** Frases de instrução iniciam pelo objetivo antes da ação (`"Para concluir a solicitação, anexe o comprovante"`)?
|
||||
- [ ] **Anatomia M3 de Diálogos e Botões Específicos:** Modais de confirmação têm título com pergunta direta (`"Excluir etapa?"`), explicam a consequência de forma neutra sem repetir o título e usam o verbo exato no botão (`[Cancelar]` / `[Excluir etapa]`), 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.`)?
|
||||
|
||||
|
|
|
|||
|
|
@ -20,15 +20,15 @@ Garantir que qualquer aplicação `<modulo>-front` do ecossistema (identificada
|
|||
|
||||
### Pilar 1 — Navegação no Menu Lateral Ordenada pela Jornada Operacional
|
||||
|
||||
O menu de navegação das páginas do módulo deve residir **exclusivamente no menu lateral (`MenuLateral.vue`)**, ordenado pela sequência lógica de trabalho do domínio:
|
||||
O menu de navegação das páginas do módulo deve residir **exclusivamente no componente de menu lateral de navegação** (ex.: `MenuLateral.vue` / `Sidebar`), ordenado pela sequência lógica de trabalho do domínio:
|
||||
|
||||
1. **Ordem da Tarefa (Task-Order Navigation no `MenuLateral.vue`):** A navegação lateral do módulo deve refletir a sequência lógica de trabalho do domínio:
|
||||
1. **Ordem da Tarefa (*Task-Order Navigation* no Menu Lateral):** A navegação lateral do módulo deve refletir a sequência lógica de trabalho do domínio:
|
||||
- `1. Cadastros Base / Pré-requisitos` (ex.: catálogos, recursos, equipes, parâmetros iniciais)
|
||||
- `2. Modelos / Configuração` (ex.: templates, padrões reutilizáveis)
|
||||
- `3. Entidade Principal / Planejamento` (ex.: registros centrais do módulo, cronogramas, estruturação)
|
||||
- `4. Execução Operacional` (ex.: quadros de trabalho, filas de atendimento, operação diária)
|
||||
- `5. Monitoramento / Indicadores` (ex.: dashboards executivos, relatórios consolidados)
|
||||
2. **Proibição de Menu Duplicado no Cabeçalho (`CabecalhoPrincipal.vue`):** O `v-app-bar` superior deve conter apenas o botão de acionamento do menu lateral, a identidade do módulo e o menu de usuário/notificações — **nunca** duplicar botões de navegação de páginas na barra superior.
|
||||
2. **Proibição de Menu Duplicado no Cabeçalho Superior:** O cabeçalho superior (`v-app-bar` / `Navbar`) deve conter apenas o botão de acionamento do menu lateral, a identidade do módulo e o menu de usuário/notificações — **nunca** duplicar botões de navegação de páginas na barra superior.
|
||||
|
||||
---
|
||||
|
||||
|
|
@ -56,7 +56,7 @@ Evitar empilhar listas mestras, formulários, barras de ferramentas e múltiplas
|
|||
- **Proibido** empilhar 4 a 6 barras horizontais antes do conteúdo (Topbar + Header + Ações/KPIs + Abas/Filtros + Form Inline de Criação + Barra de Situação).
|
||||
- Consolidar o cabeçalho da visão em no máximo **2 faixas horizontais** e abrir formulários de criação rápida (`+ Nova Tarefa`) **sob demanda** ao clicar no botão de ação, recolhendo-os após criar ou cancelar.
|
||||
4. **Revelação Progressiva Intra-Painel (Inspetor em Acordeão e Zero Card Redundante):**
|
||||
- Gavetas de detalhe (`PainelInspetor`) nunca devem exibir um "Card de Resumo" que repete os dados já visíveis no item selecionado e nos campos abaixo, nem abrir 5+ seções ao mesmo tempo.
|
||||
- Gavetas e painéis de detalhe (*Side Sheets* / *Inspectors*) nunca devem exibir um "Card de Resumo" que repete os dados já visíveis no item selecionado e nos campos abaixo, nem abrir 5+ seções ao mesmo tempo.
|
||||
- Manter abertas por padrão apenas as seções de *Identificação/Prazo* e *Entrega*, e usar **acordeões colapsáveis** com resumo no título (`Recursos (2 • R$ 1.200,00)`, `Pré-requisitos (1/1)`, `Responsáveis (1)`) para seções secundárias `1:N`.
|
||||
5. **Orçamento de Densidade por Linha (Teto de 3 Indicadores em Repouso):**
|
||||
- Cada linha de árvore/lista ou card Kanban em repouso deve exibir no máximo **3 indicadores** além do título (ex.: Checkbox/Ícone + Prazo ou Progresso + Bloqueio/Alerta), ocultando ações secundárias (`+ Sub`, `Editar`) até o `:hover` / `:focus-within`.
|
||||
|
|
@ -121,7 +121,7 @@ Conforme as diretrizes de **Layout (`Panes` e `Canonical Layouts`), `Dialogs` e
|
|||
- 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]`.
|
||||
- **Título Específico + Consequência + Botão com Verbo:** Título com pergunta direta (`"Excluir etapa?"`), corpo explicando a consequência sem repetir o título, e botões alinhados à direita (`[Cancelar]` + `[Excluir etapa]`), 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.
|
||||
|
|
@ -135,7 +135,7 @@ Conforme as diretrizes de **Layout (`Panes` e `Canonical Layouts`), `Dialogs` e
|
|||
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.
|
||||
- Concentrar a navegação principal exclusivamente no componente de menu lateral (sem duplicar links na barra de cabeçalho superior) e ordenada pela jornada operacional.
|
||||
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).
|
||||
|
|
@ -148,7 +148,7 @@ Conforme as diretrizes de **Layout (`Panes` e `Canonical Layouts`), `Dialogs` e
|
|||
|
||||
## Checklist Rápido de Conformidade (`ux-fluxo-funcional`)
|
||||
|
||||
- [ ] A navegação principal está concentrada exclusivamente no `MenuLateral.vue` (sem menu horizontal duplicado no cabeçalho) e ordenada na sequência lógica de uso do módulo?
|
||||
- [ ] A navegação principal está concentrada exclusivamente no menu lateral (sem menu horizontal duplicado no cabeçalho superior) e ordenada na sequência lógica de uso do módulo?
|
||||
- [ ] Todas as telas com pré-requisitos orientam o usuário e oferecem botão direto para a etapa anterior quando vazias?
|
||||
- [ ] 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?
|
||||
|
|
|
|||
|
|
@ -12,24 +12,21 @@ Guia de revisão e otimização de interfaces Vue 3 + Vuetify 3 no ecossistema A
|
|||
|
||||
---
|
||||
|
||||
## Perfil do Usuário
|
||||
## Perfil do Usuário (Resolução via `memorias-ia/modulo.yml`)
|
||||
|
||||
O público-alvo das interfaces é corporativo e diversificado em experiência técnica:
|
||||
O público-alvo e o domínio de negócio do módulo devem ser obtidos obrigatoriamente em `memorias-ia/modulo.yml` (`modulo-descricao` e `modulo-tipo`), abrangendo perfis operacionais, administrativos, técnicos e de gestão (pública ou privada).
|
||||
|
||||
- Gestores públicos e ambientais
|
||||
- Técnicos de campo
|
||||
- Consultores ambientais
|
||||
- Operadores administrativos
|
||||
|
||||
**Premissa central**: o usuário não tem familiaridade avançada com tecnologia. A interface precisa ser autoexplicativa, sem dependência de treinamento prévio.
|
||||
**Premissa central**: o usuário é especialista no seu domínio de negócio, mas não tem obrigação de ter familiaridade avançada com tecnologia. A interface precisa ser autoexplicativa, sem dependência de treinamento prévio.
|
||||
|
||||
---
|
||||
|
||||
## Paleta de Cores Institucional
|
||||
## Paleta de Cores Institucional (Conforme `rules/estilos-design-system.md`)
|
||||
|
||||
Cor base: `#688C00` (verde floresta). Três escalas derivadas: **Verde floresta** (primária), **Âmbar terroso** (apoio/aviso), **Cinza musgo** (neutros). Semânticas independentes para garantir reconhecimento universal.
|
||||
A seleção do Design System depende do módulo identificado em `memorias-ia/modulo.yml` (ver `rules/estilos-design-system.md`):
|
||||
- **Estilo Floreta (Iniciativa Privada / Verde Floresta `#688C00`):** tokens `--cor-eli-*` detalhados nas tabelas abaixo.
|
||||
- **Estilo Betha (Governo / Setor Público `#007bff` e Header `#343a40`):** tokens governamentais documentados em `rules/estilos-design-system.md`.
|
||||
|
||||
### Escala primária — Verde floresta
|
||||
### Escala primária — Estilo Floreta (Verde floresta `#688C00`)
|
||||
|
||||
| Token | Hex | Stop | Uso |
|
||||
|---|---|---|---|
|
||||
|
|
@ -115,11 +112,11 @@ Para cada elemento da interface, avaliar:
|
|||
#### Clareza e UX Writing (Material Design 3)
|
||||
|
||||
- [ ] O propósito de cada elemento é óbvio sem instrução?
|
||||
- [ ] 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"`)?
|
||||
- [ ] 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 solicitação"`, `"Salvar alterações"`, sem *Title Case* artificial)?
|
||||
- [ ] Textos orientativos começam pelo **objetivo antes da ação** (`"Para concluir a solicitação, anexe o comprovante"`)?
|
||||
- [ ] 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?
|
||||
- [ ] Modais de confirmação seguem a **Anatomia M3**: Título com pergunta direta (`"Excluir etapa?"`), 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 pendências"`, `"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 com botão de ação?
|
||||
|
|
@ -127,9 +124,9 @@ Para cada elemento da interface, avaliar:
|
|||
#### Hierarquia visual e Pirâmide de Ações (*Refactoring UI*)
|
||||
|
||||
- [ ] O olho do usuário é guiado para a ação principal primeiro (apenas **1 ação primária sólida** `variant="flat"` por vista/seção)?
|
||||
- [ ] Ações primárias usam `--cor-eli-primaria` (`#688C00`) com destaque, secundárias usam `outlined`/`tonal` e terciárias usam `text`?
|
||||
- [ ] Ações primárias usam o token `primary` do tema com destaque, secundárias usam `outlined`/`tonal` e terciárias usam `text`?
|
||||
- [ ] Ações destrutivas (Excluir, Limpar, Remover) na tela principal são discretas (`variant="text"` ou em `v-menu`), reservando o botão vermelho sólido exclusivamente para o **modal de confirmação**?
|
||||
- [ ] Rótulos óbvios foram omitidos ou combinados com o valor (`"12 condicionantes"`, CNPJ/e-mail pelo formato) em vez de pilhas repetitivas de `Rótulo: Valor`?
|
||||
- [ ] Rótulos óbvios foram omitidos ou combinados com o valor (`"12 etapas"`, CNPJ/e-mail pelo formato) em vez de pilhas repetitivas de `Rótulo: Valor`?
|
||||
- [ ] Em cards de indicadores/KPIs, o valor numérico é o protagonista (`20px–24px`, peso `600/700`) e o rótulo é secundário (`12px`, cor neutra)?
|
||||
- [ ] Títulos de seção (`h1`–`h3`) têm tamanho contido (`16px–20px`, peso `600`) sem roubar espaço do conteúdo?
|
||||
|
||||
|
|
@ -250,7 +247,7 @@ Após implementar:
|
|||
|
||||
- [ ] A tela renderiza sem erros no console?
|
||||
- [ ] Os estados (vazio, carregando, erro, com dados) estão todos cobertos?
|
||||
- [ ] A paleta de cores está coerente com a base `#688C00`?
|
||||
- [ ] A paleta de cores está coerente com o Design System do módulo (`rules/estilos-design-system.md`: Estilo Floreta `#688C00` ou Estilo Betha `#007bff` / `#343a40` conforme `memorias-ia/modulo.yml`)?
|
||||
- [ ] Todos os tokens usados estão definidos na escala primária, de apoio ou neutra?
|
||||
- [ ] Nenhuma cor está hardcoded no CSS do componente (usar `var(--token, #fallback)`)?
|
||||
- [ ] Tokens novos têm fallback hardcoded? (ex: `var(--cor-eli-primaria-suave, #BFC99C)`)?
|
||||
|
|
@ -270,8 +267,8 @@ Após implementar:
|
|||
| *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 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 |
|
||||
| Modal de confirmação com botões `[Sim] / [Não]` ou `[OK]` | Título com pergunta (`"Excluir etapa?"`), consequência no corpo e botões `[Cancelar]` + `[Excluir etapa]` |
|
||||
| *Title Case* anglófono (`"Nova Solicitação"`, `"Salvar Alterações"`) ou labels com `:` | Capitalização de frase (*Sentence case*: `"Nova solicitação"`, `"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 |
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue