--- target: src/public/chat.html total_score: 23 p0_count: 0 p1_count: 3 timestamp: 2026-06-23T14-35-01Z slug: src-public-chat-html --- # Design Critique: Chat — Chatc2 **Target:** src/public/chat.html **Score:** 23/40 (Acceptable) ## Design Health Score | # | Heuristic | Score | Key Issue | |---|-----------|-------|-----------| | 1 | Visibility of System Status | 3 | Sem indicador de digitando, sem status de conexão, sem feedback de erro visível | | 2 | Match System / Real World | 3 | Padrão WhatsApp familiar; termos como associar precisam de contexto | | 3 | User Control and Freedom | 3 | Cancel em modais; sem undo em mensagens; sem reabertura direta | | 4 | Consistency and Standards | 2 | 30+ violações de design system (cores/radii fora do DESIGN.md) | | 5 | Error Prevention | 2 | Botão enviar ativo sem texto; sem confirmação ao finalizar | | 6 | Recognition Rather Than Recall | 3 | Tabs com contagens; ícones ambíguos sem labels | | 7 | Flexibility and Efficiency | 2 | Sem atalhos de teclado; zero ações em lote | | 8 | Aesthetic and Minimalist Design | 3 | Visual limpo; painel direito pode sobrecarregar | | 9 | Error Recovery | 1 | Zero indicadores visuais de erro em toda a interface | | 10 | Help and Documentation | 1 | Sem tooltips, ajuda contextual ou onboarding | | **Total** | | **23/40** | **Acceptable** | ## Anti-Patterns Verdict NAO parece gerado por IA. Interface com identidade própria (padrão WhatsApp). Detector: 34 advisories de drift de design system, 2 warnings (single-font = falso positivo intencional, dark-glow merece atenção). ## Overall Impression Tela de chat funcionalmente sólida, WhatsApp-style bem executado, dark mode completo, mobile responsivo. Problema crítico: resiliência — zero feedback de erro. Mais drift de design system e falta de atalhos para uso intensivo. ## Priority Issues [P1] Design system drift — 30+ valores fora do DESIGN.md. Cores e raios do chat precisam ser incorporados ou consolidados. [P1] Zero visibilidade de erro — mensagem falhou, upload quebrou, conexão caiu: atendente fica no escuro. [P1] Chat input com 5 botões competindo — ícones ambíguos, sem labels, peso visual similar. [P2] Painel direito sobrecarregado — todas as seções visíveis, scroll excessivo. [P2] Zero atalhos de teclado — 8h+/dia sem atalhos gera fadiga. ## Persona Red Flags Alex (Power User): Sem atalhos, sem notificação de novas conversas, 5 botões sempre visíveis. Jordan (First-Timer): Ícones sem texto, toggle privada ambíguo, sem onboarding. Sam (Accessibility): Botões emoji sem aria-label, enviar sem nome acessível, sem trap de foco em modais. ## Minor Observations - Padrão SVG do fundo é toque WhatsApp autêntico - Botão Finalizar sem confirmação - Drag-overlay excelente affordance - border-radius: 22px vs 50% inconsistente - Empresa-tag com border-radius inline