diff --git a/docs/jus-ia-project/ux-design-specification.md b/docs/jus-ia-project/ux-design-specification.md index 71dde3b25..c87c499c8 100644 --- a/docs/jus-ia-project/ux-design-specification.md +++ b/docs/jus-ia-project/ux-design-specification.md @@ -1,5 +1,5 @@ --- -stepsCompleted: [1, 2] +stepsCompleted: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14] inputDocuments: - prd.md - product-brief.md @@ -81,3 +81,696 @@ O advogado responde perguntas sobre seu caso e recebe um pedido otimizado pronto - **Agrupamento por momento mental**: 2-3 perguntas relacionadas por tela, máximo 4-5 telas no fluxo completo. - **Placeholders contextuais**: Quando texto livre for necessário, exemplos específicos guiam a resposta (ex: "Ex: demissão sem justa causa em 15/01/2026"). - **Progresso visual claro**: Indicador de progresso mostra 4-5 etapas — nunca mais que isso. + +--- + +## Desired Emotional Response + +### Primary Emotional Goals + +**Para Dra. Carla (nunca usou IA):** Segurança → Surpresa → Confiança. Ela precisa sentir que está no controle (perguntas familiares sobre seu caso), ser surpreendida pelo resultado (preview com fundamentação jurídica que ela reconhece), e sair confiante de que a ferramenta funciona. + +**Para Dr. Rafael (usa IA mas itera):** Alívio → Revelação → Empoderamento. Ele precisa sentir alívio ao ver que as perguntas certas estão sendo feitas (não precisa pensar no prompt), revelação ao entender que o problema era o pedido e não a ferramenta, e empoderamento ao ter um caminho repetível. + +**Para Dr. Marcos (dono de escritório):** Controle → Praticidade → Tranquilidade. Precisa sentir que tem controle sobre como a equipe usa IA (deep links por área), que a solução é prática (sem admin panel, sem configuração), e tranquilidade de que a qualidade está garantida (base verificada do Jus IA). + +### Emotional Journey Mapping + +| Momento | Emoção Desejada | Emoção a Evitar | Mecanismo UX | +|---------|----------------|-----------------|--------------| +| **Abrir o link** | Curiosidade confiante | Desconfiança, "mais uma ferramenta" | Linguagem jurídica desde o primeiro pixel, sem menção a IA/prompt | +| **Primeira pergunta** | "Isso é sobre o meu caso" | "Estão pedindo meus dados" | Pergunta relevante e específica, não genérica | +| **Durante o fluxo** | Fluidez, progresso | Tédio, burocracia, "formulário do governo" | Toque único, progresso visual, 4-5 telas máximo | +| **Pergunta da IA** | "Boa pergunta, não tinha pensado nisso" | "Por que está perguntando isso?" | Pergunta contextual que demonstra inteligência sem parecer aleatória | +| **Loading da IA** | Expectativa positiva | Ansiedade, impaciência | Indicador com microcopy: "Analisando seu caso..." (não "Processando...") | +| **Preview** | Surpresa + validação | Desconfiança do resultado | Fundamentação jurídica visível (artigos, súmulas) — a linguagem do advogado | +| **Redirect** | Satisfação, "funcionou!" | Medo de perder o que foi feito | Confirmação visual antes do redirect, opção de copiar | +| **Resultado no Jus IA** | "Por que não fiz isso antes?" | "Preciso refazer tudo" | Prompt bem construído = resultado na primeira tentativa | + +### Micro-Emotions + +**Críticas para o sucesso:** +- **Confiança > Ceticismo**: Cada elemento visual deve reforçar credibilidade institucional (Jusbrasil como âncora de confiança) +- **Competência > Confusão**: O advogado nunca deve se perguntar "o que devo fazer agora?" — a próxima ação é sempre óbvia +- **Progresso > Estagnação**: Cada toque leva visivelmente adiante — barra de progresso + feedback imediato + +**A evitar ativamente:** +- **Ansiedade**: "Estou colocando dados do meu cliente aqui?" → Microcopy: "Seus dados não são armazenados" +- **Frustração**: "Perdi o que já respondi" → Estado preservado no browser back +- **Condescendência**: "Isso é para quem não sabe usar IA" → Linguagem de profissional para profissional + +### Emotion-Design Connections + +| Emoção Desejada | Decisão de UX | +|-----------------|---------------| +| Segurança | Sem login, sem dados retidos, disclaimer visível mas não invasivo | +| Competência | Microcopy em linguagem jurídica, perguntas que demonstram expertise do sistema | +| Velocidade | Toque único, agrupamento por momento mental, indicador de progresso compact | +| Surpresa positiva | Preview com artigos/súmulas específicos — "a máquina sabe direito" | +| Controle | Botão voltar visível, browser back funcional, opção de copiar antes do redirect | + +### Emotional Design Principles + +1. **Credibilidade antes de tudo**: A primeira impressão determina se Carla continua ou fecha. Cada pixel deve comunicar "ferramenta jurídica profissional", não "startup de IA". +2. **Inteligência demonstrada, não declarada**: Não dizer "nossa IA é inteligente" — mostrar fazendo perguntas que o advogado reconhece como relevantes. +3. **Progresso como recompensa**: Cada resposta leva visivelmente ao resultado — o advogado sente que está construindo algo, não preenchendo formulário. +4. **Transparência sem sobrecarga**: "Seus dados não são armazenados" uma vez, discreto. Não repetir em cada tela. + +--- + +## UX Pattern Analysis & Inspiration + +### Inspiring Products Analysis + +**1. WhatsApp — Experiência de entrada e compartilhamento** +- O que faz bem: preview de links (OG tags) cria primeira impressão antes do clique. Compartilhar é o gesto mais natural. A maioria dos advogados brasileiros (90%) usa profissionalmente. +- UX lesson: O link compartilhado precisa ter preview rico e auto-explicativo. O advogado que recebe deve entender o valor antes de clicar. + +**2. iFood / Rappi — Fluxo de seleção em poucos toques** +- O que faz bem: Categoria → Subcategoria → Customização em 3-4 telas. Decisões por toque único. Progresso visível. Funciona perfeitamente em mobile com uma mão. +- UX lesson: Nosso fluxo (Tipo de tarefa → Área → Subtipo → Perguntas → Preview) deve ter a mesma fluência. Cada tela uma decisão principal. Chips e seleções, não campos de texto. + +**3. Nubank — Confiança em mobile para produto financeiro** +- O que faz bem: Tom profissional mas acessível. Linguagem clara sem jargão técnico financeiro. Feedback visual imediato em cada ação. Funciona como "ferramenta financeira" sem parecer "app de banco". +- UX lesson: O Start Kit deve parecer "ferramenta jurídica" assim como o Nubank parece "ferramenta financeira" — sem parecer que é IA por trás. + +**4. Typeform — Fluxo conversacional um passo por vez** +- O que faz bem: Uma pergunta por tela cria sensação de conversa, não formulário. Transições suaves. Progresso visual. Lógica condicional que pula perguntas irrelevantes. +- UX lesson: O agrupamento por "momento mental" é nossa versão otimizada deste padrão — conversacional mas mais eficiente que uma pergunta por tela. + +### Transferable UX Patterns + +**Navigation Patterns:** +- **Seleção por chips (iFood)**: Para tipo de tarefa, área do direito, subtipo — toque único, visual claro +- **Stepper linear (Nubank onboarding)**: Indicador de progresso 4-5 etapas, sempre visível no topo +- **Deep link direto (WhatsApp)**: Entrada no fluxo exato via URL — pula seleção inicial quando possível + +**Interaction Patterns:** +- **Progressive disclosure (Typeform)**: Mostrar perguntas condicionais apenas quando relevantes (ex: jornada contratual só aparece se CLT) +- **Chip selection (Material Design)**: Respostas pré-definidas como chips tocáveis, sem dropdown +- **Inline validation (Nubank)**: Feedback imediato ao responder, sem esperar submit + +**Feedback Patterns:** +- **Skeleton loading (Nubank)**: Durante chamada LLM, mostrar estrutura da próxima tela com shimmer +- **Microcopy contextual (Typeform)**: Texto helper que guia sem explicar demais +- **Success celebration (Duolingo)**: Micro-animação no preview para marcar o "momento aha" + +### Anti-Patterns to Avoid + +- **Formulário longo com scroll**: Advogado entre audiências não vai scrollar. Uma tela = uma decisão. +- **Dropdown menus em mobile**: Dropdowns são péssimos em touch. Sempre chips ou radio buttons. +- **Loading genérico ("Carregando...")**: Não comunica valor. Usar microcopy contextual ("Analisando seu caso..."). +- **Explicação antes da ação**: Não mostrar tutorial ou onboarding. A primeira tela já é a primeira pergunta. +- **Linguagem de chatbot**: "Olá! Sou um assistente de IA..." — este framing afasta a Dra. Carla imediatamente. + +### Design Inspiration Strategy + +**Adotar diretamente:** +- Chip selection para todas as perguntas de seleção (iFood/Material) +- Stepper linear compact no topo (Nubank) +- OG tags ricas para preview no WhatsApp + +**Adaptar ao contexto:** +- Progressive disclosure do Typeform → agrupamento por momento mental (2-3 perguntas/tela) +- Tom conversacional do Typeform → linguagem jurídica profissional +- Celebração do Duolingo → micro-feedback sutil no preview (profissional, não gamificado) + +**Evitar explicitamente:** +- Chatbot UI com balões de conversa — parece IA, afasta Carla +- Onboarding/tutorial antes do fluxo — barra de entrada +- Multi-step wizard com 8+ etapas — parece burocracia + +--- + +## Design System Foundation + +### Design System Choice + +**Decisão: Tailwind CSS + componentes custom leves (sem framework de componentes)** + +### Rationale for Selection + +1. **MPA mobile-first**: Tailwind funciona perfeitamente com server-rendered HTML — sem dependência de JavaScript framework pesado +2. **Performance**: CSS utilitário gera bundles mínimos. Cada page load carrega apenas o CSS usado — crítico para 3G entre audiências +3. **Customização total**: Sem overhead de Material Design ou Bootstrap que traria componentes desnecessários e visual genérico +4. **Boring technology**: Tailwind é estável, bem documentado, ampla comunidade. Sem risco de lock-in ou abandono +5. **Velocidade de desenvolvimento**: Utility-first permite iterar rapidamente no MVP sem criar sistema de design complexo + +### Implementation Approach + +- **Base**: Tailwind CSS v4+ com configuração customizada de design tokens +- **Componentes**: HTML semântico + classes Tailwind. Componentes server-side (templates/partials), não client-side +- **JavaScript**: Minimal — progressive enhancement para interações que melhoram a experiência (transições, validação inline) mas não são obrigatórias +- **Ícones**: Heroicons (já integrado com Tailwind) para consistência visual + +### Customization Strategy + +- Design tokens customizados no Tailwind config: cores, tipografia, espaçamento, border-radius +- Componentes reutilizáveis via templates/partials do backend (não React/Vue/Svelte) +- Preflight reset + base styles para consistência cross-browser +- Sem tema escuro no MVP — foco em uma experiência visual coesa + +--- + +## Core User Experience + +### Defining Experience + +**"Responda sobre seu caso e receba um pedido jurídico otimizado pronto para gerar resultado na primeira tentativa."** + +Este é o equivalente do Start Kit ao "Swipe to match" do Tinder — a interação que, se perfeita, define o produto. O advogado descreve seu caso respondendo perguntas e recebe um artefato jurídico (pedido otimizado) que funciona de primeira. A mágica é: as perguntas certas extraem as informações certas, sem que o advogado precise saber o que é relevante para um bom prompt. + +### User Mental Model + +**O que o advogado espera:** Uma consulta estruturada. Semelhante a quando um colega mais experiente pergunta sobre o caso antes de ajudar: "Qual o vínculo?", "Quanto tempo?", "Tem registro de ponto?". O advogado entende perguntas — faz isso todo dia com clientes. + +**O que NÃO espera:** Um chat com IA. Não espera campo de texto livre para "descrever seu caso". Não espera ter que saber o que é relevante. Não espera vocabulário técnico de IA. + +**Modelo mental correto a reforçar:** "Estou consultando um sistema especialista que sabe fazer as perguntas certas sobre meu tipo de caso." + +**Workarounds atuais:** +- Carla: escreve petição do zero, 2-3 horas. Copia modelo de colega. +- Rafael: copia prompts do Google, itera 3-5x no ChatGPT. Gasta 1h tentando. +- Marcos: equipe usa ChatGPT sem padrão, resultados inconsistentes. + +### Success Criteria + +| Critério | Indicador | Meta | +|----------|-----------|------| +| "Isso funciona de primeira" | Resultado no Jus IA sem reformulação | >70% | +| "Foi rápido" | Tempo do primeiro toque ao redirect | <5 min | +| "Não precisei aprender nada" | Conclusão sem abandono | >60% | +| "Vou mandar pra colega" | Tráfego por referral/WhatsApp | >30% | +| "Não perdi nada ao voltar" | Estado preservado no browser back | 100% | + +### Novel UX Patterns + +O Start Kit combina padrões estabelecidos de forma inovadora: + +**Padrão estabelecido (familiar):** Fluxo de seleção tipo e-commerce (categoria → subcategoria → detalhes). O advogado já faz isso no iFood e Nubank. + +**Inovação invisível:** A transição de perguntas determinísticas para perguntas geradas por IA. O advogado não percebe que mudou de fase — as perguntas da IA são renderizadas identicamente às estruturadas (chips, seleções, placeholders contextuais). + +**Padrão novo que precisa de validação:** O preview como "contrato de confiança" — mostrar fundamentação jurídica antes do redirect. Este é o ponto de risco: se o preview for confuso ou parecer "prompt", quebra a confiança. Se mostrar artigos/súmulas reconhecíveis, cria o "momento aha". + +### Experience Mechanics + +**1. Initiation:** +- Advogado recebe link via WhatsApp, post do Jusbrasil, ou acesso direto +- Deep link pode pré-selecionar área (ex: `/trabalhista/horas-extras` pula seleção inicial) +- Se link genérico: primeira tela = "O que você precisa?" com chips de tipo de tarefa + +**2. Interaction (4-5 telas):** +- **Tela 1 — Tipo + Área**: "O que você precisa?" [Petição Inicial] [Contestação] [Pesquisa] + Área do direito [Trabalhista] [Cível] (agrupados se deep link não pré-selecionou) +- **Tela 2 — Subtipo**: Subtipos da área selecionada como chips (ex: [Horas Extras] [Rescisão Indireta] [Dano Moral]) +- **Tela 3 — Dados do caso**: Perguntas estruturadas agrupadas por momento mental (empregador PJ/PF, regime, jornada, período — todas no mesmo contexto "relação de trabalho") +- **Tela 4 — Refinamento contextual**: Perguntas da IA + determinísticas restantes, renderizadas identicamente (registro de ponto, testemunhas, pagamento parcial). Loading state: "Analisando seu caso..." +- **Tela 5 — Preview + Redirect**: Pedido montado com fundamentação jurídica + botão "Gerar no Jus IA →" + +**3. Feedback:** +- Barra de progresso no topo atualiza a cada avanço (4-5 steps) +- Seleção de chip: feedback visual imediato (cor + check) +- Loading IA: skeleton com shimmer + microcopy ("Analisando seu caso...") +- Preview: fundamentação jurídica destacada visualmente (badges com artigos/súmulas) + +**4. Completion:** +- Preview mostra o pedido montado em linguagem jurídica (não o prompt raw) +- Fundamentação jurídica como badges clicáveis (art. 59 CLT, Súmula 85 TST) +- Botão primário: "Gerar no Jus IA →" (redirect via URL parametrizada) +- Se URL excede limite: fallback com "Copiar pedido" + link direto para Jus IA +- Microcopy: "Seus dados não são armazenados após o redirecionamento" + +--- + +## Visual Design Foundation + +### Color System + +**Paleta primária — Confiança jurídica:** + +| Token | Cor | Uso | +|-------|-----|-----| +| `primary` | Azul escuro (#1E3A5F) | Ações primárias, header, elementos de confiança | +| `primary-light` | Azul médio (#2E5A8F) | Hover states, links | +| `accent` | Dourado/âmbar (#D4A843) | Destaque, badges de fundamentação jurídica, CTA secundário | +| `surface` | Branco (#FFFFFF) | Background de cards e áreas de conteúdo | +| `background` | Cinza muito claro (#F8F9FA) | Background geral das páginas | +| `text-primary` | Cinza escuro (#1A1A2E) | Texto principal | +| `text-secondary` | Cinza médio (#6B7280) | Texto auxiliar, placeholders | + +**Paleta semântica:** + +| Token | Cor | Uso | +|-------|-----|-----| +| `success` | Verde (#059669) | Confirmação, progresso completo | +| `warning` | Âmbar (#D97706) | Atenção, fallback copy-paste | +| `error` | Vermelho (#DC2626) | Erros de validação | +| `info` | Azul claro (#0284C7) | Dicas, microcopy informativo | + +**Rationale:** Azul escuro + dourado = vocabulário visual de escritórios de advocacia, tribunais, e instituições jurídicas brasileiras. Transmite credibilidade e profissionalismo sem parecer tech startup. O dourado/âmbar para badges de fundamentação jurídica cria destaque sem parecer gamificado. + +**Acessibilidade:** Contraste mínimo 4.5:1 para texto normal, 3:1 para texto grande. Primary (#1E3A5F) sobre branco = ratio 8.2:1 (passa AAA). + +### Typography System + +**Typeface:** +- **Primary (headings)**: Inter — clean, profissional, excelente legibilidade em mobile. Sem serifa para modernidade sem perder seriedade. +- **Body text**: Inter — mesma família para consistência. Pesos variados para hierarquia. +- **Fallback**: system-ui, -apple-system, sans-serif + +**Type scale (mobile-first):** + +| Token | Size | Weight | Line Height | Uso | +|-------|------|--------|-------------|-----| +| `heading-1` | 24px (1.5rem) | 700 | 1.3 | Título da página | +| `heading-2` | 20px (1.25rem) | 600 | 1.35 | Seções | +| `heading-3` | 16px (1rem) | 600 | 1.4 | Subtítulos | +| `body` | 16px (1rem) | 400 | 1.5 | Texto principal | +| `body-small` | 14px (0.875rem) | 400 | 1.5 | Microcopy, helpers | +| `caption` | 12px (0.75rem) | 400 | 1.4 | Disclaimers, labels | + +**Desktop scale**: +2px nos headings (heading-1: 28px, heading-2: 22px). Body mantém 16px. + +### Spacing & Layout Foundation + +**Base unit:** 4px (0.25rem) + +**Spacing scale:** + +| Token | Value | Uso | +|-------|-------|-----| +| `space-1` | 4px | Gap mínimo entre elementos inline | +| `space-2` | 8px | Padding interno de chips, gap entre chips | +| `space-3` | 12px | Padding interno de inputs | +| `space-4` | 16px | Margem entre elementos de formulário | +| `space-6` | 24px | Margem entre seções dentro de uma tela | +| `space-8` | 32px | Margem entre seções principais | + +**Layout:** +- **Mobile**: Single column, 100% width com padding lateral de 16px +- **Desktop**: Max-width 640px centralizado — o fluxo não precisa ser wide, mantém foco +- **Cards**: Background white, border-radius 12px, padding 16px, sombra sutil +- **Chips**: Height 44px mínimo (touch target), border-radius 8px, padding horizontal 16px +- **Botões**: Height 48px, full-width em mobile, border-radius 8px + +### Accessibility Considerations + +- **Touch targets**: Mínimo 44x44px para todos os elementos interativos +- **Contraste**: WCAG AA (4.5:1 texto normal, 3:1 texto grande) +- **Focus indicators**: Outline visível para navegação por teclado (`:focus-visible`) +- **Semantic HTML**: `
`, `
`, ``, `