12. Mockup de ERP — boas práticas

Origem: seed-ds-mockup/references/melhores-praticas-mockup-erp.md (skill de 2026-05-13, 12665 bytes, MD5 cb51e55e7f98c61352f35b2929c636e0; cópia preservada em 09-pesquisa/skills-v1-2026-05/referencias/melhores-praticas-mockup-erp.md) · Importado em 2026-09-06 sem edição — só os títulos foram rebaixados dois níveis (código intacto).

Estado: ⚠ não auditado contra o DS v2 (nenhuma contradição medida automaticamente: sem hex, sem Indie Flower, sem Lovable, sem apelidos do shadcn — a leitura humana ainda não foi feita).

Melhores práticas — mockup ERP/SaaS B2B 2026#

Reference exclusiva da skill seed-ds-mockup (também consulta-la pela seed-ds-ui). Síntese de práticas estabelecidas no mercado (autoridades + dados de benchmark 2024-2026) aplicáveis ao contexto ERP SEED.

Consultar sempre antes de produzir mockup de feature do ERP, dashboard, listagem, modal, ou tela complexa — princípios + escolhas de design direction.

---

Autoridades de referência#

Quando o usuário pedir "no estilo de" ou "como [produto]", reconhecer estas escolas:

Aplicação SEED: o ERP SEED é B2B engineering — clientes técnicos que vão viver na ferramenta. Direção mais aderente: Linear (precision/density) + Notion (warmth quando houver EEny e contextos amigáveis) = híbrido SEED. Stripe inspira nas telas financeiras (propostas, faturamento).

---

Dados de benchmark (UX enterprise 2024-2026)#

Layout e densidade#

• Sidebar 240-280px = padrão dominante 2026 (Linear, Notion, Vercel, HubSpot, Asana) — confirma decisão SEED
• 4-6 KPIs above the fold é regra (Stripe, Vercel) — não 10+
• F-pattern (Nielsen Norman): top-left = métrica mais crítica, top row = primárias, left column = secundárias
• Information density > whitespace em 2026 — Linear, Notion, Superhuman, Stripe ganham ground com interfaces densas (audiência B2B é power user)
• 22.4% dos desktops ainda em 1366px (StatCounter 2026) — sidebar de 280px + main de 1086px funciona; topbar com tabs colapsando vira hamburger nesses devices

Estados de componente#

• Skeleton screens > spinners: reduz percepção de load em 20-30% (Lukew + Google Web Vitals)
• 3 estados obrigatórios por componente: Loading (skeleton matching layout) + Empty (illustration + 1 frase + CTA) + Error (banner com retry, não full-page)
• Stripe/Linear/Notion: shimmer animation nos skeletons

Data display#

• Tabelas/listas > cards para power users (Linear issue list, Notion database views)
• Bar charts > pie charts (NN/g, basicamente sempre)
• Pagination ou virtualização em datasets >100 rows (não renderizar tudo)
• Drill-down explícito > "show all" automático (Mixpanel pattern)

Onboarding e adoption#

• 66% dos B2B customers param de comprar após onboarding ruim (Onething Design 2026)
• Just-in-Time onboarding > tour de 500 páginas inicial (tooltips contextuais quando user tenta a task)
• Role-aware onboarding: pergunta o role no signup, mostra defaults relevantes
• Time-to-value = métrica mais importante de UX em SaaS

---

4 personalidades de UI enterprise (escolher uma como direção)#

Antes de escrever qualquer componente, comprometer-se com uma direção:

Precision & Density (Linear, Raycast)#

• Tight spacing, monochrome, information-forward
• Para power users que vivem na ferramenta
• Borders-only flat (zero shadow, definição via borda)
• Base grid 4px, scale limitada (4, 8, 12, 16, 24, 32, 48)

Warmth & Approachability (Notion, Coda)#

• Generous spacing, soft shadows, friendly colors
• Para produtos que querem feel humano
• Hierarquia tipográfica forte
• Subtle single shadows (0 1px 3px rgba(0,0,0,0.08))

Sophistication & Trust (Stripe, Mercury)#

• Cool tones, layered depth, financial gravitas
• Para produtos que lidam com dinheiro ou dados sensíveis
• Layered shadows (múltiplas camadas pra depth real)
• Progressive disclosure forte

Boldness & Clarity#

• High contrast, dramatic negative space, confident typography
• Para produtos que querem feel moderno e decisivo

---

Direção de design SEED (escolha documentada)#

Direção primária do ERP SEED: Precision & Density (Linear-like) + Warmth localizado

Justificativa:

• Cliente típico SEED é técnico (engenheiro, gestor industrial) — quer densidade, scan rápido, dados visíveis
• ERP é ferramenta de trabalho diária — eficiência > delight
• Mas SEED tem EEny + tom acolhedor — não pode ser "frio total" como Linear
• Compromisso: Linear-like estrutura (densidade, tipografia, borders flat) + Notion-like warmth pontual (EEny em empty states, microcopy acolhedor, turquesa em vez de cinza puro)

Implicações práticas:

• Borders-only flat como default em tabelas e cards (sem shadows pesadas)
• Subtle single shadow (0 1px 3px rgba(0,0,0,0.06)) em hover de cards clicáveis
• Spacing base 4px (4, 8, 12, 16, 24, 32, 48) — alinhado com Linear
• Tabelas em vez de cards para listagens (cliente, proposta, contrato)
• 4-5 KPIs above the fold em dashboards (não 10+)
• F-pattern: indicador crítico top-left, primárias top row
• EEny + microcopy acolhedor apenas em empty states / onboarding / mensagens de sucesso

---

7 princípios consolidados pra mockup ERP SEED#

1. F-pattern hierarchy#

Top-left = métrica mais crítica do dashboard. Top row = 3-5 KPIs primários. Left column = secundárias. Quando dashboard tiver mais que isso, considerar 2 dashboards (por papel) em vez de inflar 1.

Anti-padrão: "Welcome, Rafael!" ocupando o top-left. Esse espaço é caro demais pra mensagem.

2. Density > whitespace (power user wins)#

Audiência ERP SEED é power user — quer dados, não breathing room. Information density bem hierarquizada reduz cognitive strain, ao contrário do que minimalismo dos 2010 sugeria.

Regra prática:

• Antes de remover elemento, perguntar: "ele pode ficar menor, com menos contraste, ou reposicionado?"
• Tamanho/cor/posição despriorizam sem remover

3. Progressive disclosure (Stripe pattern)#

Top-level = 3-4 números que o decisor precisa ver imediatamente. Cada nível adicional de detalhe = clique intencional, nunca automaticamente exposto. Detalhe a no máximo 2 cliques de qualquer KPI.

Aplicação SEED: dashboard de cliente mostra resumo (contratos ativos, valor total, última interação) → clique abre detalhe completo. Não inflar resumo com 15 campos.

4. Role-based interface (HubSpot pattern)#

Mesma plataforma, defaults diferentes por papel:

• Rafael (CEO) vê pipeline + KPIs financeiros
• Engenheiro vê projetos ativos + ARTs pendentes
• Comercial vê propostas + follow-ups

Aplicação SEED: quando criar mockup de dashboard, perguntar pra qual papel. Se não souber, default = CEO/diretor (visão executiva).

5. Skeleton > spinner (perceived performance)#

Loading state SEMPRE é skeleton que matches o layout final, não spinner genérico. Reduz percepção de load 20-30%.

Empty state SEMPRE tem 3 partes: illustration (EEny pose 06 + ondas SEED) + 1 frase + CTA.

Error state SEMPRE é banner inline com retry, não tela cheia.

6. Tabelas > cards (B2B power users)#

Para listagens densas (clientes, propostas, contratos, projetos), tabela é o default. Cards só quando atributos são heterogêneos ou navegação rápida em mobile.

Linear issue list + Notion database views = exemplos canônicos. Tabela do ERP SEED segue mesmo padrão (componentes-ui-seed.md #7).

7. Coerência tipográfica e de spacing#

Spacing scale fixa (4, 8, 12, 16, 24, 32, 48) — nada arbitrário. Tudo snapando.

Typography scale fixa (11, 13, 16, 18, 20, 24, 30, 36) — nada entre.

Trocar layout/spacing/fonts entre páginas do mesmo ERP = parece amador. Consistência > criatividade local.

---

Padrões de density information hierarchy#

Quando precisar mostrar muito dado num espaço pequeno (caso comum em ERP), aplicar nessa ordem:

1. Hierarquia tipográfica: maior = mais importante. Bold > regular. --text > --cinza.
2. Hierarquia espacial: top-left > top-right > center > bottom.
3. Hierarquia cromática: --turquesa ou --amarelo em CTA primário, --cinza em metadata.
4. Hierarquia de contraste: dado primário em --text, secundário em --cinza, terciário em --cinza-light (quase invisível).
5. Spacing como agrupamento: elementos relacionados próximos (4-8px), grupos diferentes distantes (24-32px).

Regra de ouro: se tudo está chamando atenção, nada está. Hierarquia é prioridade explícita.

---

Anti-padrões verificados em produção (NÃO repetir)#

1. Welcome message ocupando top-left do dashboard → desperdiça F-pattern
2. 10+ KPIs above the fold → user não consegue priorizar
3. Cards pra listagem densa → quando tabela faria scan 3× mais rápido
4. Spinner em vez de skeleton → percepção de lentidão pior
5. Empty state vazio sem CTA → user fica sem saber o que fazer
6. Error state tela cheia → quebra contexto, parece bug
7. Spacing arbitrário (13px, 22px, 7px) → quebra ritmo visual
8. Múltiplas direções de design no mesmo ERP (uma página Linear, outra Stripe) → parece Frankenstein
9. One-size-fits-all dashboard → 4 papéis diferentes vendo o mesmo, ninguém satisfeito
10. Density sem hierarquia → vira cluttered, não informativo
11. Importar cores Tailwind padrão (purple, blue, orange, amber) → quebra DS SEED
12. Touch target <44×44px em mobile → falha WCAG 2.2 AA

---

Checklist pré-entrega (12 itens)#

Antes de entregar mockup do ERP SEED:

• [ ] Direção de design declarada (Precision & Density + warmth pontual = default SEED)
• [ ] F-pattern aplicado: top-left = mais crítico, top row = 3-5 KPIs primários
• [ ] Density > whitespace (não inflar com breathing room sem razão)
• [ ] Progressive disclosure: top-level limpo, detalhe a clique
• [ ] Role declarado (CEO/comercial/engenheiro) ou default executivo
• [ ] 3 estados por componente: loading skeleton + empty acolhedor + error inline
• [ ] Tabela em vez de cards pra listagem densa (default ERP SEED)
• [ ] Spacing scale 4pt rigorosa (4, 8, 12, 16, 24, 32, 48)
• [ ] Typography scale fixa (11, 13, 16, 18, 20, 24, 30, 36)
• [ ] Paleta 100% SEED (18 tokens — ver paleta.md), zero Tailwind padrão
• [ ] Touch targets ≥44×44px em mobile
• [ ] Grafia "SEED engenharia" correta em todos os elementos visíveis

---

Quando o mockup é só "componente isolado"#

Princípios continuam valendo (paleta, tipografia, spacing scale, hierarquia). Mas:

• Não precisa F-pattern (componente isolado, sem contexto)
• Não precisa role (componente é universal)
• Não precisa empty/loading/error se foco é demonstrar o estado "happy path"

Skill calibra: se briefing diz "botão de exportar", entrega só o botão. Se diz "tela de exportação", entrega tela completa com estados.

---

Composição com outras skills#

• seed-ds-proposta — mockup vai pra Word/PDF. Stack: inline styles obrigatório (não Tailwind CDN). Export PNG 2x retina.
• seed-ds-slide — mockup vai pra PPTX. Stack: inline styles + dimensões 16:9 ou similar. Export PNG.
• seed-ds-post — mockup vai pra Instagram. Stack: SVG puro ou inline styles dentro de device frame. Dimensões 1080×1080 ou 1080×1350.
• seed-ds-carrossel — múltiplos mockups em sequência. Coerência visual entre slides obrigatória.
• seed-ds-ui — workflow comum: mockup aprovado → seed-ds-ui implementa código React. Mockup é descartável; código vive.

---