sass-imobiliaria/specs/029-ux-area-do-cliente/ux-audit.md

UX/UI Audit — Área do Cliente (/area-do-cliente)

Data: 2026-04-22
Auditor: GitHub Copilot (UX/UI Review)
Escopo: Todas as páginas e componentes sob /area-do-cliente

---

1. Inventário de Telas Atuais

Rota	Componente	Status
/area-do-cliente	ClientDashboardPage	❌ Remover
/area-do-cliente/favoritos	FavoritesPage	🔧 Melhorar
/area-do-cliente/comparar	ComparisonPage	🔧 Melhorar
/area-do-cliente/visitas	VisitsPage	🔧 Melhorar
/area-do-cliente/boletos	BoletosPage	❌ Remover

---

2. Problemas Identificados

2.1 Dashboard (Painel) — REMOVER

• Problema: 3 cards com números (favoritos, visitas, boletos). Não agrega valor real ao usuário — ele precisa clicar de qualquer forma para ver os detalhes.
• Impacto: UX: Alto. Adiciona um clique desnecessário para chegar ao conteúdo real.
• Decisão: Remover o dashboard. Redirecionar /area-do-cliente → /area-do-cliente/favoritos.

2.2 Boletos — REMOVER

• Problema: Funcionalidade de boletos é uma feature de gestão imobiliária avançada raramente usada. A tabela existe mas os dados dependem de inserção manual pelo admin. Gera confusão para usuários sem boletos.
• Impacto: UX: Médio. Ruído visual no menu, expectativa não cumprida.
• Decisão: Remover a rota, o componente e o item do menu. Manter o backend (não excluir o model/API).

2.3 Navegação (Sidebar) — Ícones

• Problema: Ícones usam caracteres Unicode/emoji (⊞, ♡, ⇄, 📅, 📄) que rendem de forma inconsistente entre sistemas operacionais e navegadores. Look não-profissional em temas dark/light.
• Impacto: Visual: Alto. Inconsistência de rendering cross-platform.
• Decisão: Substituir por SVG inline (Heroicons 2.0 outline) para cada item de nav.

2.4 FavoritesPage — Cards sem imagem/preço

• Problema: Cards de favoritos mostram apenas título e link "Ver detalhes →". O usuário não consegue lembrar qual imóvel é qual sem clicar.
• Impacto: UX: Alto. Experiência frustrante para quem tem múltiplos favoritos.
• Decisão: Mostrar thumbnail da primeira foto, preço e cidade/bairro no card.

2.5 FavoritesPage — Layout de grid muito esparso

• Problema: Grid 1 → 2 → 3 colunas com cards muito altos (h-48 skeleton) para conteúdo mínimo.
• Decisão: Cards com imagem real + info resumida, altura proporcional.

2.6 VisitsPage — Sem ação do usuário

• Problema: O usuário só visualiza visitas. Não há como cancelar, nem há indicação clara de próximos passos.
• Impacto: UX: Médio. Usuário precisa entrar em contato por outro canal para cancelar.
• Decisão: Adicionar botão "Solicitar cancelamento" para visitas com status pending.

2.7 VisitsPage — Layout de lista plana

• Problema: Cards de visita não têm hierarquia visual clara. Data e status competem com o título.
• Decisão: Refatorar card de visita com: título em destaque, data em destaque, status badge alinhado à direita, mensagem como texto secundário colapsável.

2.8 ComparisonPage — Empty state sem call-to-action útil

• Problema: Empty state tem apenas "Nenhum imóvel selecionado" e link para /imoveis. Usuário não sabe como adicionar imóveis à comparação.
• Decisão: Empty state explicativo com instrução de como usar a feature (tooltip/hint).

2.9 ClientLayout — Sidebar sem perfil editável

• Problema: Sidebar mostra avatar + nome + email mas sem link para perfil/configurações.
• Impacto: UX: Médio. Usuário não consegue alterar dados cadastrais pela área do cliente.
• Decisão: Adicionar link "Minha conta" apontando para nova rota /area-do-cliente/conta.

2.10 ClientLayout — Botão "Sair" sem ícone próprio

• Problema: Usa → como ícone de logout. Semântica errada (parece "ir para").
• Decisão: Substituir por ícone ArrowRightOnRectangle (Heroicons logout).

2.11 Mobile Nav — Scroll horizontal fraco

• Problema: Em mobile, a navegação é uma barra horizontal com scroll. Após remover boletos e painel, teremos 3 itens — cabe bem. Mas ainda carece de indicador visual claro de ativo.
• Decisão: Melhorar o indicador ativo com underline/pill e alinhar os 3 itens centralizados.

2.12 Ausência de página de perfil/conta

• Problema: Não existe /area-do-cliente/conta. Usuário não pode ver/editar nome, email ou senha.
• Decisão: Criar ProfilePage com form de atualização de nome e alteração de senha.

---

3. Resumo das Decisões

❌ Remover

• ClientDashboardPage (/area-do-cliente) — redirecionar para /area-do-cliente/favoritos
• BoletosPage (/area-do-cliente/boletos) — remover rota, nav item e componente
• Item "Boletos" e item "Painel" do nav

✅ Manter (com melhorias)

• FavoritesPage — melhorar cards com thumbnail + preço + localização
• VisitsPage — adicionar cancelamento + melhorar layout do card
• ComparisonPage — melhorar empty state
• ClientLayout — trocar ícones por SVG, adicionar link "Minha conta", melhorar logout

➕ Criar

• ProfilePage (/area-do-cliente/conta) — formulário de edição de perfil

---

4. Nova Estrutura de Navegação

Antes (5 itens + Painel):

⊞ Painel
♡ Favoritos
⇄ Comparar
📅 Visitas
📄 Boletos

Depois (4 itens, sem Painel como item separado — é o redirect):

[heart-icon]     Favoritos
[scale-icon]     Comparar
[calendar-icon]  Visitas
[user-icon]      Minha conta

---

5. Fluxo UX Revisado

/area-do-cliente  →  redirect 302  →  /area-do-cliente/favoritos

/area-do-cliente/favoritos
  Cards: thumbnail | título | preço | cidade
  Ação:  [Remover dos favoritos]  [Ver imóvel →]

/area-do-cliente/visitas
  Cards: título imóvel | data | status badge
  Ação:  [Solicitar cancelamento] (só para status=pending)

/area-do-cliente/comparar
  Tabela: até 3 imóveis lado a lado
  Empty state: instrução de como adicionar imóvel à comparação

/area-do-cliente/conta
  Form: Nome | Email (readonly) | Senha atual | Nova senha | Confirmar senha
  Ação: [Salvar alterações]

---

6. Componentes Afetados

Arquivo	Ação
frontend/src/layouts/ClientLayout.tsx	Refatorar nav (SVG icons, remover Boletos/Painel, adicionar Conta)
frontend/src/pages/client/ClientDashboardPage.tsx	Deletar ou converter em redirect
frontend/src/pages/client/BoletosPage.tsx	Deletar
frontend/src/pages/client/FavoritesPage.tsx	Melhorar cards
frontend/src/pages/client/VisitsPage.tsx	Melhorar card + adicionar cancelamento
frontend/src/pages/client/ComparisonPage.tsx	Melhorar empty state
frontend/src/pages/client/ProfilePage.tsx	Criar (novo)
frontend/src/services/clientArea.ts	Adicionar updateProfile, changePassword, cancelVisit
frontend/src/App.tsx	Atualizar rotas (remover boletos, adicionar conta, redirect)
backend/app/routes/client.py	Adicionar PATCH /me/profile, PATCH /me/password, PATCH /me/visits/:id/cancel
backend/app/schemas/client.py	Adicionar schemas de update

---

7. Critérios de Aceite

• /area-do-cliente redireciona para /area-do-cliente/favoritos
• "Boletos" não aparece no menu e a rota 404
• "Painel" não aparece no menu
• Ícones do menu são SVG Heroicons consistentes em dark e light
• Card de favorito mostra: imagem (ou placeholder), título, preço, cidade
• Card de visita mostra: título, data agendada (ou solicitada), status badge
• Visita com status=pending exibe botão "Cancelar" que muda para cancelled
• Empty state do comparar explica como usar a feature
• /area-do-cliente/conta exibe form com nome e troca de senha
• Form de conta valida: nome obrigatório, senhas com mínimo 8 chars, confirmação igual
• Mobile nav centraliza os 4 itens sem scroll (ou scroll suave se necessário)
• Botão "Sair" usa ícone de logout correto