chore(agent): evoluir @ux com ergonomia cognitiva, orcamento de viewport 75/25, teto de 3 indicadores por linha e inspetor em acordeao
This commit is contained in:
parent
5b122a4abd
commit
4818887cb3
15 changed files with 180 additions and 20 deletions
|
|
@ -5,7 +5,7 @@ description: Diretrizes obrigatórias do livro Refactoring UI (Steve Schoger & A
|
|||
scope: global
|
||||
trigger: always_on
|
||||
priority: alta
|
||||
updatedAt: "2026-10-24"
|
||||
updatedAt: "2026-10-26"
|
||||
---
|
||||
|
||||
# Regra: Despoluição Visual e Hierarquia de UI (*Refactoring UI*)
|
||||
|
|
@ -96,6 +96,26 @@ 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)
|
||||
|
||||
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:
|
||||
|
||||
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).
|
||||
- **Proibido empilhar 3 a 6 barras horizontais de cabeçalho/filtros/formulários inline acima do conteúdo.** O cabeçalho operacional de uma visão deve consolidar-se em no máximo **2 faixas horizontais enxutas**:
|
||||
- *Faixa 1 (Contexto):* Título do contexto ativo + KPIs resumidos inline + ações secundárias discretas/compactas.
|
||||
- *Faixa 2 (Operação):* Seletor de visão/abas + busca/filtros integrados + botão `+ Novo` (revelando campos de criação inline ou modal **sob demanda**, sem manter formulários multi-campo abertos permanentemente roubando altura).
|
||||
2. **Prevenção de Colisão de Painéis Laterais (*Sidebar Mutual Exclusion*):**
|
||||
- **Proibido** manter abertos simultaneamente um Menu Lateral de Navegação (`240px–280px`) e um Painel Inspetor de Detalhes (`400px–440px`) quando a soma dos painéis laterais consumir mais de **30%–35% da largura da tela**, espremendo o conteúdo central.
|
||||
- Ao abrir um Painel Inspetor (`Master-Detail`) ou alternar para visões de alta densidade horizontal (`Cronograma Gantt` / `Quadro Kanban`), o menu lateral secundário deve **recolher automaticamente** (`auto-collapse`), liberando largura para a área de trabalho.
|
||||
3. **Orçamento de Densidade por Linha/Card (*Teto de 3 Indicadores em Repouso*):**
|
||||
- Cada linha de árvore/lista ou card Kanban em estado de repouso deve exibir no máximo **3 sinais visuais** além do título (ex.: `1. Checkbox/Ícone de modalidade`, `2. Prazo ou Progresso X/Y`, `3. Indicador de bloqueio ou status crítico`).
|
||||
- **Proibido o "Natal de Badges"** (empilhar 5 a 7 pílulas coloridas de modalidade, dependência, barra de progresso, moeda, data, responsável e status em cada linha, nem pintar todas as linhas concluídas com fundos e bordas saturadas).
|
||||
- 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.
|
||||
|
||||
---
|
||||
|
||||
## Exemplos
|
||||
|
|
|
|||
|
|
@ -71,8 +71,7 @@ Toda sua comunicação — incluindo raciocínio interno, reflexões e respostas
|
|||
4. **Progressão natural** — o fluxo segue a lógica operacional do usuário
|
||||
5. **Erros orientam** — mensagens de erro 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 (*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 e respeitar a pirâmide de ações
|
||||
|
||||
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
|
||||
|
||||
## Checklist de revisão UX
|
||||
|
||||
|
|
@ -80,6 +79,8 @@ Toda sua comunicação — incluindo raciocínio interno, reflexões e respostas
|
|||
- [ ] A navegação principal está concentrada exclusivamente no `MenuLateral.vue` (sem duplicar links na `CabecalhoPrincipal.vue`) na sequência lógica de uso?
|
||||
- [ ] Telas com pré-requisitos orientam o usuário com botão direto para o cadastro anterior quando vazias?
|
||||
- [ ] 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?
|
||||
- [ ] 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)?
|
||||
- [ ] O token `secondary` do tema Vuetify possui contraste escuro (≥ 4.5:1) em variantes `tonal` e `outlined`?
|
||||
|
|
|
|||
|
|
@ -71,8 +71,7 @@ Toda sua comunicação — incluindo raciocínio interno, reflexões e respostas
|
|||
4. **Progressão natural** — o fluxo segue a lógica operacional do usuário
|
||||
5. **Erros orientam** — mensagens de erro 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 (*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 e respeitar a pirâmide de ações
|
||||
|
||||
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
|
||||
|
||||
## Checklist de revisão UX
|
||||
|
||||
|
|
@ -80,6 +79,8 @@ Toda sua comunicação — incluindo raciocínio interno, reflexões e respostas
|
|||
- [ ] A navegação principal está concentrada exclusivamente no `MenuLateral.vue` (sem duplicar links na `CabecalhoPrincipal.vue`) na sequência lógica de uso?
|
||||
- [ ] Telas com pré-requisitos orientam o usuário com botão direto para o cadastro anterior quando vazias?
|
||||
- [ ] 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?
|
||||
- [ ] 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)?
|
||||
- [ ] O token `secondary` do tema Vuetify possui contraste escuro (≥ 4.5:1) em variantes `tonal` e `outlined`?
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ description: Diretrizes obrigatórias do livro Refactoring UI (Steve Schoger & A
|
|||
scope: global
|
||||
trigger: always_on
|
||||
priority: alta
|
||||
updatedAt: "2026-10-24"
|
||||
updatedAt: "2026-10-26"
|
||||
---
|
||||
|
||||
# Regra: Despoluição Visual e Hierarquia de UI (*Refactoring UI*)
|
||||
|
|
@ -96,6 +96,26 @@ 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)
|
||||
|
||||
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:
|
||||
|
||||
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).
|
||||
- **Proibido empilhar 3 a 6 barras horizontais de cabeçalho/filtros/formulários inline acima do conteúdo.** O cabeçalho operacional de uma visão deve consolidar-se em no máximo **2 faixas horizontais enxutas**:
|
||||
- *Faixa 1 (Contexto):* Título do contexto ativo + KPIs resumidos inline + ações secundárias discretas/compactas.
|
||||
- *Faixa 2 (Operação):* Seletor de visão/abas + busca/filtros integrados + botão `+ Novo` (revelando campos de criação inline ou modal **sob demanda**, sem manter formulários multi-campo abertos permanentemente roubando altura).
|
||||
2. **Prevenção de Colisão de Painéis Laterais (*Sidebar Mutual Exclusion*):**
|
||||
- **Proibido** manter abertos simultaneamente um Menu Lateral de Navegação (`240px–280px`) e um Painel Inspetor de Detalhes (`400px–440px`) quando a soma dos painéis laterais consumir mais de **30%–35% da largura da tela**, espremendo o conteúdo central.
|
||||
- Ao abrir um Painel Inspetor (`Master-Detail`) ou alternar para visões de alta densidade horizontal (`Cronograma Gantt` / `Quadro Kanban`), o menu lateral secundário deve **recolher automaticamente** (`auto-collapse`), liberando largura para a área de trabalho.
|
||||
3. **Orçamento de Densidade por Linha/Card (*Teto de 3 Indicadores em Repouso*):**
|
||||
- Cada linha de árvore/lista ou card Kanban em estado de repouso deve exibir no máximo **3 sinais visuais** além do título (ex.: `1. Checkbox/Ícone de modalidade`, `2. Prazo ou Progresso X/Y`, `3. Indicador de bloqueio ou status crítico`).
|
||||
- **Proibido o "Natal de Badges"** (empilhar 5 a 7 pílulas coloridas de modalidade, dependência, barra de progresso, moeda, data, responsável e status em cada linha, nem pintar todas as linhas concluídas com fundos e bordas saturadas).
|
||||
- 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.
|
||||
|
||||
---
|
||||
|
||||
## Exemplos
|
||||
|
|
|
|||
|
|
@ -52,6 +52,15 @@ 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`)
|
||||
|
||||
Toda auditoria de UX deve verificar se a tela não está visualmente sufocada por excesso de barras fixas, colisão de painéis laterais ou excesso de pílulas/badges por linha:
|
||||
- [ ] **Orçamento de Viewport (`>= 70%` Área Livre):** Em `1366x768` ou `1440x900`, o canvas principal de trabalho (lista, árvore, tabela, Gantt, Kanban) ocupa pelo menos 70% da janela sem ser esmagado por múltiplos painéis laterais abertos ao mesmo tempo?
|
||||
- [ ] **Teto de 2 Faixas no Cabeçalho Operacional:** A área de trabalho possui no máximo 2 faixas horizontais de cabeçalho/filtros acima do conteúdo, mantendo formulários de criação rápida (`+ Nova Tarefa`) recolhidos sob demanda?
|
||||
- [ ] **Exclusão Mútua de Painéis Laterais (*Auto-Collapse*):** Ao abrir uma gaveta inspetora de detalhes (`400px+`) ou entrar no Cronograma Gantt, o menu lateral de navegação recolhe automaticamente?
|
||||
- [ ] **Teto de 3 Indicadores por Linha em Repouso:** Linhas de árvore/lista e cards exibem no máximo 3 sinais visuais além do título (sem "Natal de Badges" de 5–7 pílulas coloridas por linha), revelando ações secundárias (`+ Sub`, `Editar`) em `:hover` / `:focus-within`?
|
||||
- [ ] **Inspetor em Acordeão e Sem Card de Resumo Redundante:** O painel de detalhes inicia apenas com *Identificação/Prazo* e *Entrega* abertos, agrupando *Pré-requisitos*, *Recursos* e *Responsáveis* em seções colapsáveis (Acordeão) com resumo no título?
|
||||
|
||||
```sh
|
||||
# Detectar excesso de divisores e possíveis cards aninhados
|
||||
rg "<v-divider" --include='*.vue' <modulo>-front/src/ -c | sort -t: -k2 -rn | head -10
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ description: >
|
|||
e Contraste Funcional em aplicações <modulo>-front. Transforma telas isoladas em um fluxo contínuo,
|
||||
autoexplicativo e sem sobrecarga cognitiva.
|
||||
scope: global
|
||||
updatedAt: "2026-10-18"
|
||||
updatedAt: "2026-10-26"
|
||||
---
|
||||
|
||||
# Skill: UX de Fluxo Funcional e Jornada Guiada (`ux-fluxo-funcional`)
|
||||
|
|
@ -42,14 +42,25 @@ Quando uma tela ou ação exige registros previamente cadastrados em outra tela,
|
|||
|
||||
---
|
||||
|
||||
### Pilar 3 — Revelação Progressiva e Anti-Aperto Visual (*Progressive Disclosure*)
|
||||
### Pilar 3 — Revelação Progressiva, Orçamento de Viewport e Anti-Aperto Visual (*Progressive Disclosure*)
|
||||
|
||||
Evitar empilhar listas mestras, formulários e múltiplas abas analíticas na mesma dobra de tela.
|
||||
Evitar empilhar listas mestras, formulários, barras de ferramentas e múltiplas abas analíticas na mesma dobra de tela. Pelo menos **70%–75% da área da janela (`1366x768`)** deve pertencer ao conteúdo principal.
|
||||
|
||||
1. **Proibição de *Split-Screen* Estreito (`4 + 8 colunas`) para Conteúdo Complexo:**
|
||||
- **Nunca** dividir a tela em `v-col md="4"` (lista lateral fixa) + `v-col md="8"` (detalhe) quando o painel de detalhe possuir **tabelas de múltiplas colunas, cronogramas, árvores hierárquicas ou 3+ abas**.
|
||||
- **Padrão Recomendado:** Utilizar um **Seletor Rápido de Contexto no Topo** (`v-select` / `v-autocomplete` em card compacto + botão de listagem/troca) e dedicar **100% da largura (`12 colunas`)** para a área de trabalho ativa.
|
||||
2. **Agrupamento de Ações Secundárias:**
|
||||
2. **Prevenção de Colisão de Painéis Laterais (*Sidebar Mutual Exclusion*):**
|
||||
- **Proibido** manter abertos simultaneamente o Menu Lateral de Navegação (`256px`) e uma Gaveta Inspetora de Detalhes (`400px–440px`) quando isso espremer a área central.
|
||||
- Ao abrir o Painel Inspetor (`Master-Detail`) ou alternar para visões horizontais largas (`Cronograma Gantt`), o menu lateral esquerdo deve **recolher automaticamente** (`auto-collapse`).
|
||||
3. **Teto de 2 Faixas no Topo e Criadores Sob Demanda:**
|
||||
- **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.
|
||||
- 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`.
|
||||
6. **Agrupamento de Ações Secundárias:**
|
||||
- Limitar cada cabeçalho de seção ou linha de tabela a **1 ação primária visível** + até **2 ações frequentes**.
|
||||
- Agrupar ações secundárias ou administrativas (ex.: exportar, clonar, histórico, arquivar, excluir) em menu contextual (`v-menu`) ou modal específico.
|
||||
|
||||
|
|
@ -113,6 +124,8 @@ No Vuetify 3 em tema claro (`dark: false`), componentes com `variant="tonal"` e
|
|||
- [ ] 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?
|
||||
- [ ] 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?
|
||||
- [ ] 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?
|
||||
- [ ] 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?
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ description: Diretrizes obrigatórias do livro Refactoring UI (Steve Schoger & A
|
|||
scope: global
|
||||
trigger: always_on
|
||||
priority: alta
|
||||
updatedAt: "2026-10-24"
|
||||
updatedAt: "2026-10-26"
|
||||
---
|
||||
|
||||
# Regra: Despoluição Visual e Hierarquia de UI (*Refactoring UI*)
|
||||
|
|
@ -96,6 +96,26 @@ 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)
|
||||
|
||||
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:
|
||||
|
||||
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).
|
||||
- **Proibido empilhar 3 a 6 barras horizontais de cabeçalho/filtros/formulários inline acima do conteúdo.** O cabeçalho operacional de uma visão deve consolidar-se em no máximo **2 faixas horizontais enxutas**:
|
||||
- *Faixa 1 (Contexto):* Título do contexto ativo + KPIs resumidos inline + ações secundárias discretas/compactas.
|
||||
- *Faixa 2 (Operação):* Seletor de visão/abas + busca/filtros integrados + botão `+ Novo` (revelando campos de criação inline ou modal **sob demanda**, sem manter formulários multi-campo abertos permanentemente roubando altura).
|
||||
2. **Prevenção de Colisão de Painéis Laterais (*Sidebar Mutual Exclusion*):**
|
||||
- **Proibido** manter abertos simultaneamente um Menu Lateral de Navegação (`240px–280px`) e um Painel Inspetor de Detalhes (`400px–440px`) quando a soma dos painéis laterais consumir mais de **30%–35% da largura da tela**, espremendo o conteúdo central.
|
||||
- Ao abrir um Painel Inspetor (`Master-Detail`) ou alternar para visões de alta densidade horizontal (`Cronograma Gantt` / `Quadro Kanban`), o menu lateral secundário deve **recolher automaticamente** (`auto-collapse`), liberando largura para a área de trabalho.
|
||||
3. **Orçamento de Densidade por Linha/Card (*Teto de 3 Indicadores em Repouso*):**
|
||||
- Cada linha de árvore/lista ou card Kanban em estado de repouso deve exibir no máximo **3 sinais visuais** além do título (ex.: `1. Checkbox/Ícone de modalidade`, `2. Prazo ou Progresso X/Y`, `3. Indicador de bloqueio ou status crítico`).
|
||||
- **Proibido o "Natal de Badges"** (empilhar 5 a 7 pílulas coloridas de modalidade, dependência, barra de progresso, moeda, data, responsável e status em cada linha, nem pintar todas as linhas concluídas com fundos e bordas saturadas).
|
||||
- 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.
|
||||
|
||||
---
|
||||
|
||||
## Exemplos
|
||||
|
|
|
|||
|
|
@ -52,6 +52,15 @@ 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`)
|
||||
|
||||
Toda auditoria de UX deve verificar se a tela não está visualmente sufocada por excesso de barras fixas, colisão de painéis laterais ou excesso de pílulas/badges por linha:
|
||||
- [ ] **Orçamento de Viewport (`>= 70%` Área Livre):** Em `1366x768` ou `1440x900`, o canvas principal de trabalho (lista, árvore, tabela, Gantt, Kanban) ocupa pelo menos 70% da janela sem ser esmagado por múltiplos painéis laterais abertos ao mesmo tempo?
|
||||
- [ ] **Teto de 2 Faixas no Cabeçalho Operacional:** A área de trabalho possui no máximo 2 faixas horizontais de cabeçalho/filtros acima do conteúdo, mantendo formulários de criação rápida (`+ Nova Tarefa`) recolhidos sob demanda?
|
||||
- [ ] **Exclusão Mútua de Painéis Laterais (*Auto-Collapse*):** Ao abrir uma gaveta inspetora de detalhes (`400px+`) ou entrar no Cronograma Gantt, o menu lateral de navegação recolhe automaticamente?
|
||||
- [ ] **Teto de 3 Indicadores por Linha em Repouso:** Linhas de árvore/lista e cards exibem no máximo 3 sinais visuais além do título (sem "Natal de Badges" de 5–7 pílulas coloridas por linha), revelando ações secundárias (`+ Sub`, `Editar`) em `:hover` / `:focus-within`?
|
||||
- [ ] **Inspetor em Acordeão e Sem Card de Resumo Redundante:** O painel de detalhes inicia apenas com *Identificação/Prazo* e *Entrega* abertos, agrupando *Pré-requisitos*, *Recursos* e *Responsáveis* em seções colapsáveis (Acordeão) com resumo no título?
|
||||
|
||||
```sh
|
||||
# Detectar excesso de divisores e possíveis cards aninhados
|
||||
rg "<v-divider" --include='*.vue' <modulo>-front/src/ -c | sort -t: -k2 -rn | head -10
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ description: >
|
|||
e Contraste Funcional em aplicações <modulo>-front. Transforma telas isoladas em um fluxo contínuo,
|
||||
autoexplicativo e sem sobrecarga cognitiva.
|
||||
scope: global
|
||||
updatedAt: "2026-10-18"
|
||||
updatedAt: "2026-10-26"
|
||||
---
|
||||
|
||||
# Skill: UX de Fluxo Funcional e Jornada Guiada (`ux-fluxo-funcional`)
|
||||
|
|
@ -42,14 +42,25 @@ Quando uma tela ou ação exige registros previamente cadastrados em outra tela,
|
|||
|
||||
---
|
||||
|
||||
### Pilar 3 — Revelação Progressiva e Anti-Aperto Visual (*Progressive Disclosure*)
|
||||
### Pilar 3 — Revelação Progressiva, Orçamento de Viewport e Anti-Aperto Visual (*Progressive Disclosure*)
|
||||
|
||||
Evitar empilhar listas mestras, formulários e múltiplas abas analíticas na mesma dobra de tela.
|
||||
Evitar empilhar listas mestras, formulários, barras de ferramentas e múltiplas abas analíticas na mesma dobra de tela. Pelo menos **70%–75% da área da janela (`1366x768`)** deve pertencer ao conteúdo principal.
|
||||
|
||||
1. **Proibição de *Split-Screen* Estreito (`4 + 8 colunas`) para Conteúdo Complexo:**
|
||||
- **Nunca** dividir a tela em `v-col md="4"` (lista lateral fixa) + `v-col md="8"` (detalhe) quando o painel de detalhe possuir **tabelas de múltiplas colunas, cronogramas, árvores hierárquicas ou 3+ abas**.
|
||||
- **Padrão Recomendado:** Utilizar um **Seletor Rápido de Contexto no Topo** (`v-select` / `v-autocomplete` em card compacto + botão de listagem/troca) e dedicar **100% da largura (`12 colunas`)** para a área de trabalho ativa.
|
||||
2. **Agrupamento de Ações Secundárias:**
|
||||
2. **Prevenção de Colisão de Painéis Laterais (*Sidebar Mutual Exclusion*):**
|
||||
- **Proibido** manter abertos simultaneamente o Menu Lateral de Navegação (`256px`) e uma Gaveta Inspetora de Detalhes (`400px–440px`) quando isso espremer a área central.
|
||||
- Ao abrir o Painel Inspetor (`Master-Detail`) ou alternar para visões horizontais largas (`Cronograma Gantt`), o menu lateral esquerdo deve **recolher automaticamente** (`auto-collapse`).
|
||||
3. **Teto de 2 Faixas no Topo e Criadores Sob Demanda:**
|
||||
- **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.
|
||||
- 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`.
|
||||
6. **Agrupamento de Ações Secundárias:**
|
||||
- Limitar cada cabeçalho de seção ou linha de tabela a **1 ação primária visível** + até **2 ações frequentes**.
|
||||
- Agrupar ações secundárias ou administrativas (ex.: exportar, clonar, histórico, arquivar, excluir) em menu contextual (`v-menu`) ou modal específico.
|
||||
|
||||
|
|
@ -113,6 +124,8 @@ No Vuetify 3 em tema claro (`dark: false`), componentes com `variant="tonal"` e
|
|||
- [ ] 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?
|
||||
- [ ] 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?
|
||||
- [ ] 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?
|
||||
- [ ] 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?
|
||||
|
|
|
|||
|
|
@ -136,6 +136,10 @@ Para cada elemento da interface, avaliar:
|
|||
- [ ] Colunas numéricas e monetárias estão alinhadas à direita com `tabular-nums`?
|
||||
- [ ] Badges e chips usam contraste invertido (fundo pastel claro + texto escuro da mesma matiz) em vez de múltiplas pílulas saturadas escuras?
|
||||
- [ ] Quando a listagem está inicialmente vazia (zero registros), barras de filtros secundárias e paginação inúteis são ocultadas?
|
||||
- [ ] O cabeçalho operacional respeita o teto de 2 faixas horizontais (mantendo criadores rápidos `+ Nova Tarefa` recolhidos sob demanda)?
|
||||
- [ ] 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?
|
||||
|
||||
#### Feedback e estados
|
||||
|
||||
|
|
|
|||
|
|
@ -136,6 +136,10 @@ Para cada elemento da interface, avaliar:
|
|||
- [ ] Colunas numéricas e monetárias estão alinhadas à direita com `tabular-nums`?
|
||||
- [ ] Badges e chips usam contraste invertido (fundo pastel claro + texto escuro da mesma matiz) em vez de múltiplas pílulas saturadas escuras?
|
||||
- [ ] Quando a listagem está inicialmente vazia (zero registros), barras de filtros secundárias e paginação inúteis são ocultadas?
|
||||
- [ ] O cabeçalho operacional respeita o teto de 2 faixas horizontais (mantendo criadores rápidos `+ Nova Tarefa` recolhidos sob demanda)?
|
||||
- [ ] 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?
|
||||
|
||||
#### Feedback e estados
|
||||
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ description: Diretrizes obrigatórias do livro Refactoring UI (Steve Schoger & A
|
|||
scope: global
|
||||
trigger: always_on
|
||||
priority: alta
|
||||
updatedAt: "2026-10-24"
|
||||
updatedAt: "2026-10-26"
|
||||
---
|
||||
|
||||
# Regra: Despoluição Visual e Hierarquia de UI (*Refactoring UI*)
|
||||
|
|
@ -96,6 +96,26 @@ 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)
|
||||
|
||||
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:
|
||||
|
||||
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).
|
||||
- **Proibido empilhar 3 a 6 barras horizontais de cabeçalho/filtros/formulários inline acima do conteúdo.** O cabeçalho operacional de uma visão deve consolidar-se em no máximo **2 faixas horizontais enxutas**:
|
||||
- *Faixa 1 (Contexto):* Título do contexto ativo + KPIs resumidos inline + ações secundárias discretas/compactas.
|
||||
- *Faixa 2 (Operação):* Seletor de visão/abas + busca/filtros integrados + botão `+ Novo` (revelando campos de criação inline ou modal **sob demanda**, sem manter formulários multi-campo abertos permanentemente roubando altura).
|
||||
2. **Prevenção de Colisão de Painéis Laterais (*Sidebar Mutual Exclusion*):**
|
||||
- **Proibido** manter abertos simultaneamente um Menu Lateral de Navegação (`240px–280px`) e um Painel Inspetor de Detalhes (`400px–440px`) quando a soma dos painéis laterais consumir mais de **30%–35% da largura da tela**, espremendo o conteúdo central.
|
||||
- Ao abrir um Painel Inspetor (`Master-Detail`) ou alternar para visões de alta densidade horizontal (`Cronograma Gantt` / `Quadro Kanban`), o menu lateral secundário deve **recolher automaticamente** (`auto-collapse`), liberando largura para a área de trabalho.
|
||||
3. **Orçamento de Densidade por Linha/Card (*Teto de 3 Indicadores em Repouso*):**
|
||||
- Cada linha de árvore/lista ou card Kanban em estado de repouso deve exibir no máximo **3 sinais visuais** além do título (ex.: `1. Checkbox/Ícone de modalidade`, `2. Prazo ou Progresso X/Y`, `3. Indicador de bloqueio ou status crítico`).
|
||||
- **Proibido o "Natal de Badges"** (empilhar 5 a 7 pílulas coloridas de modalidade, dependência, barra de progresso, moeda, data, responsável e status em cada linha, nem pintar todas as linhas concluídas com fundos e bordas saturadas).
|
||||
- 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.
|
||||
|
||||
---
|
||||
|
||||
## Exemplos
|
||||
|
|
|
|||
|
|
@ -52,6 +52,15 @@ 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`)
|
||||
|
||||
Toda auditoria de UX deve verificar se a tela não está visualmente sufocada por excesso de barras fixas, colisão de painéis laterais ou excesso de pílulas/badges por linha:
|
||||
- [ ] **Orçamento de Viewport (`>= 70%` Área Livre):** Em `1366x768` ou `1440x900`, o canvas principal de trabalho (lista, árvore, tabela, Gantt, Kanban) ocupa pelo menos 70% da janela sem ser esmagado por múltiplos painéis laterais abertos ao mesmo tempo?
|
||||
- [ ] **Teto de 2 Faixas no Cabeçalho Operacional:** A área de trabalho possui no máximo 2 faixas horizontais de cabeçalho/filtros acima do conteúdo, mantendo formulários de criação rápida (`+ Nova Tarefa`) recolhidos sob demanda?
|
||||
- [ ] **Exclusão Mútua de Painéis Laterais (*Auto-Collapse*):** Ao abrir uma gaveta inspetora de detalhes (`400px+`) ou entrar no Cronograma Gantt, o menu lateral de navegação recolhe automaticamente?
|
||||
- [ ] **Teto de 3 Indicadores por Linha em Repouso:** Linhas de árvore/lista e cards exibem no máximo 3 sinais visuais além do título (sem "Natal de Badges" de 5–7 pílulas coloridas por linha), revelando ações secundárias (`+ Sub`, `Editar`) em `:hover` / `:focus-within`?
|
||||
- [ ] **Inspetor em Acordeão e Sem Card de Resumo Redundante:** O painel de detalhes inicia apenas com *Identificação/Prazo* e *Entrega* abertos, agrupando *Pré-requisitos*, *Recursos* e *Responsáveis* em seções colapsáveis (Acordeão) com resumo no título?
|
||||
|
||||
```sh
|
||||
# Detectar excesso de divisores e possíveis cards aninhados
|
||||
rg "<v-divider" --include='*.vue' <modulo>-front/src/ -c | sort -t: -k2 -rn | head -10
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ description: >
|
|||
e Contraste Funcional em aplicações <modulo>-front. Transforma telas isoladas em um fluxo contínuo,
|
||||
autoexplicativo e sem sobrecarga cognitiva.
|
||||
scope: global
|
||||
updatedAt: "2026-10-18"
|
||||
updatedAt: "2026-10-26"
|
||||
---
|
||||
|
||||
# Skill: UX de Fluxo Funcional e Jornada Guiada (`ux-fluxo-funcional`)
|
||||
|
|
@ -42,14 +42,25 @@ Quando uma tela ou ação exige registros previamente cadastrados em outra tela,
|
|||
|
||||
---
|
||||
|
||||
### Pilar 3 — Revelação Progressiva e Anti-Aperto Visual (*Progressive Disclosure*)
|
||||
### Pilar 3 — Revelação Progressiva, Orçamento de Viewport e Anti-Aperto Visual (*Progressive Disclosure*)
|
||||
|
||||
Evitar empilhar listas mestras, formulários e múltiplas abas analíticas na mesma dobra de tela.
|
||||
Evitar empilhar listas mestras, formulários, barras de ferramentas e múltiplas abas analíticas na mesma dobra de tela. Pelo menos **70%–75% da área da janela (`1366x768`)** deve pertencer ao conteúdo principal.
|
||||
|
||||
1. **Proibição de *Split-Screen* Estreito (`4 + 8 colunas`) para Conteúdo Complexo:**
|
||||
- **Nunca** dividir a tela em `v-col md="4"` (lista lateral fixa) + `v-col md="8"` (detalhe) quando o painel de detalhe possuir **tabelas de múltiplas colunas, cronogramas, árvores hierárquicas ou 3+ abas**.
|
||||
- **Padrão Recomendado:** Utilizar um **Seletor Rápido de Contexto no Topo** (`v-select` / `v-autocomplete` em card compacto + botão de listagem/troca) e dedicar **100% da largura (`12 colunas`)** para a área de trabalho ativa.
|
||||
2. **Agrupamento de Ações Secundárias:**
|
||||
2. **Prevenção de Colisão de Painéis Laterais (*Sidebar Mutual Exclusion*):**
|
||||
- **Proibido** manter abertos simultaneamente o Menu Lateral de Navegação (`256px`) e uma Gaveta Inspetora de Detalhes (`400px–440px`) quando isso espremer a área central.
|
||||
- Ao abrir o Painel Inspetor (`Master-Detail`) ou alternar para visões horizontais largas (`Cronograma Gantt`), o menu lateral esquerdo deve **recolher automaticamente** (`auto-collapse`).
|
||||
3. **Teto de 2 Faixas no Topo e Criadores Sob Demanda:**
|
||||
- **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.
|
||||
- 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`.
|
||||
6. **Agrupamento de Ações Secundárias:**
|
||||
- Limitar cada cabeçalho de seção ou linha de tabela a **1 ação primária visível** + até **2 ações frequentes**.
|
||||
- Agrupar ações secundárias ou administrativas (ex.: exportar, clonar, histórico, arquivar, excluir) em menu contextual (`v-menu`) ou modal específico.
|
||||
|
||||
|
|
@ -113,6 +124,8 @@ No Vuetify 3 em tema claro (`dark: false`), componentes com `variant="tonal"` e
|
|||
- [ ] 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?
|
||||
- [ ] 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?
|
||||
- [ ] 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?
|
||||
- [ ] 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?
|
||||
|
|
|
|||
|
|
@ -136,6 +136,10 @@ Para cada elemento da interface, avaliar:
|
|||
- [ ] Colunas numéricas e monetárias estão alinhadas à direita com `tabular-nums`?
|
||||
- [ ] Badges e chips usam contraste invertido (fundo pastel claro + texto escuro da mesma matiz) em vez de múltiplas pílulas saturadas escuras?
|
||||
- [ ] Quando a listagem está inicialmente vazia (zero registros), barras de filtros secundárias e paginação inúteis são ocultadas?
|
||||
- [ ] O cabeçalho operacional respeita o teto de 2 faixas horizontais (mantendo criadores rápidos `+ Nova Tarefa` recolhidos sob demanda)?
|
||||
- [ ] 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?
|
||||
|
||||
#### Feedback e estados
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue