🎯 Clinicafy — Auditoria cs-*

🔬 cs-ux-researcher — UX Research & Usability

Auditoria técnica e estratégica pela ótica cs-ux-researcher — UX Research & Usability. Achados classificados por severidade, plano de ação e matriz de decisão.

!

Veredito: App com interface médica rica e bem estruturada, mas onboarding sem guia e jornada de primeiro uso não validada com usuários reais.

O produto tem 26 telas cobrindo jornadas médicas complexas (prontuário, TISS, agenda). OnboardingPage.tsx (20KB) existe — bom sinal. Problemas de UX: user-scalable=no impede zoom para usuários com baixa visão, sem tutorial interativo de primeiro uso, AgendaPage.tsx (54KB) e PatientDetails.tsx (66KB) são candidatos a sobrecarga cognitiva. Sem testes de usabilidade documentados.

26
Telas no app
OnboardingPage
Onboarding existe
VIOLA
WCAG 1.4.4 (user-scalable=no)
0
Testes de usabilidade documentados
66KB
PatientDetails.tsx (possível bloat)

Dimensões Analisadas

Pontuação por área de análise.

Onboarding UX

50

OnboardingPage existe. Sem wizard step-by-step ou checklist de first-run. Sem tooltip tutorial.

2 achados

Usabilidade / Carga Cognitiva

55

PatientDetails 66KB sugere densidade de informação alta. AgendaPage 54KB pode ser complexa.

2 achados

Acessibilidade

35

user-scalable=no é a maior violação. Sem auditoria ARIA documentada.

1 achados

Design System

75

shadcn/ui + tailwind + motion/react — base sólida para consistência. lucide-react para ícones.

1 achados

🔎 Achados (4)

0 crítico(s) · 1 alto(s) · 0 bloqueante(s). Clique para expandir.

First-run experience sem guided tour — usuário largado após cadastroAltaEsforço medioUX Onboarding / First-Time User Experience

O que é: OnboardingPage.tsx existe mas sem evidência de: progress indicator de steps, tooltips de contexto para features principais, checklist de 'primeiros passos' ou tutorial interativo. Usuário médico técnico mas não tech-savvy pode abandonar na primeira sessão.

Onde: src/pages/OnboardingPage.tsx (20KB)

Impacto: D1 retention baixo (estimado <40% sem guided onboarding). AHA moment atrasado ou nunca alcançado.

✅ Correção: Implementar onboarding checklist in-app: □ Completar perfil □ Cadastrar primeiro paciente □ Criar primeiro agendamento □ Registrar primeira consulta. Cada check = PRODUCT_EVENT enviado.
PatientDetails.tsx com 66KB — possível sobrecarga cognitivaMédiaEsforço altoUX / Cognitive Load / Progressive Disclosure

O que é: src/pages/PatientDetails.tsx é o maior arquivo do projeto (66KB). Tela de detalhes do paciente cobre: dados pessoais, alergias, medicações, problemas clínicos, contatos, alertas, consultas, exames, receitas. Alta densidade de informação em uma única tela.

Onde: src/pages/PatientDetails.tsx:1 (66KB)

Impacto: Médico com cognição alta no consultório ainda pode se perder em tela densa. Risco de erro médico por UI confusa.

✅ Correção: Aplicar progressive disclosure: tabs por categoria (Dados, Clínico, Consultas, Exames). Collapsible sections para dados raramente acessados.
AgendaPage.tsx 54KB sem evidência de mobile-first designMédiaEsforço medioMobile UX / Responsiveness

O que é: AgendaPage.tsx (54KB) é o segundo maior componente. Agenda médica é frequentemente acessada em smartphone no consultório. user-scalable=no + interface de agenda complexa = UX ruim no mobile.

Onde: src/pages/AgendaPage.tsx:1 (54KB)

Impacto: Médicos usando no celular têm experiência degradada na funcionalidade mais usada do dia-a-dia.

✅ Correção: Testar AgendaPage em iPhone 12 mini (375px) e Android médio (360px). Adicionar view 'Dia' como default no mobile vs. 'Semana' no desktop. Usar PWA install prompt para melhorar UX mobile.
BookingPage pública sem validação de UX com pacientes reaisMédiaEsforço medioUX Research / External User Testing

O que é: BookingPage.tsx (11KB) é a interface que PACIENTES usam — não médicos. É a única interface B2C. Sem user testing com pacientes reais. Pacientes são demograficamente mais diversos que médicos.

Onde: src/pages/BookingPage.tsx

Impacto: Abandono de agendamento online por pacientes menos tech-savvy. Oportunidade de diferenciação via UX de booking perdida.

✅ Correção: Testar BookingPage com 5 pacientes de faixas etárias diferentes. Verificar: conseguem agendar sem instrução? Qual o ponto de abandono? Usar heatmap (Hotjar free tier).

📋 Plano de Ação

Cronograma de implementação recomendado.

1

Onboarding checklist in-app (3 dias)

4 steps: perfil → paciente → agendamento → consulta. Progress bar. PRODUCT_EVENTS em cada check.
onboarding
3 dias
2

PatientDetails: tabs por categoria (1 semana)

Refatorar em 4 tabs: Dados/Clínico/Consultas/Exames. Reduzir carga visual.
ux
1 semana
3

Mobile test AgendaPage (1 dia)

Testar em 3 dispositivos mobile reais. Corrigir top 3 problemas encontrados.
mobile
1 dia
4

Hotjar na BookingPage (1h)

Heatmap + session recording na booking pública. Analisar abandono.
research
1h

Matriz de Decisão

CritérioFonteStatusBloqueante
First-Run Guidancecs-ux-researcherOnboardingPage sem guided tournão
Cognitive Loadcs-ux-researcherPatientDetails 66KBnão
Accessibilitycs-ux-researcheruser-scalable=no WCAG violanão
Design Systemcs-ux-researchershadcn/ui consistentenão
User Researchcs-ux-researcherZero testes documentadosnão