Contexto
O portal Razac cresceu rápido. A sidebar atual já tem 23 itens em 5 grupos (Relacionamentos Humanos, IDA, Cadastros, Importação, Workspaces, Outros) e mais 6 sub-itens em Análise Tributária. Com PRJs em andamento (Aguardando Nac., Análise Tributária Detalhada, IDA Prompts) ela vai passar de 30 itens curto prazo.
A sidebar de hoje:
- Largura fixa: 240px (16% de um viewport 1440)
- Itens listados em vertical sem hierarquia visual forte
- Sem busca / sem atalhos de teclado
- Truncam quando o label é longo (ex: "Análise Tributária Detalhada")
- Mobile/tablet sofre: ou esconde tudo num burger ou compromete o conteúdo
Problema
- Escala limitada: 30+ itens em coluna ficam impossíveis sem scroll
- Hierarquia plana: todos os grupos parecem ter o mesmo peso (cinza médio)
- Discoverability fraca: usuário precisa abrir cada grupo pra descobrir o que tem
- Persona invisível: quem usa só IDA carrega o peso visual dos 23 outros itens
- Mobile-hostile: 240px é quase metade da tela em iPad portrait
Hipótese
Antes de decidir UM novo menu, vamos divergir.
Inspirado no exercício Crazy 8 do Google Design Sprint: gerar 8 ideias radicalmente diferentes em pouco tempo, depois convergir via comparação visual + heurística + entrevistas curtas com PO e 3 usuários-chave.
Cada uma das 8 opções abaixo cobre um eixo distinto do espaço de soluções — algumas são evoluções conservadoras, outras são apostas mais altas. Nenhuma é "a certa" — todas são insumos pra decisão.
Solução
8 explorações lado-a-lado num sandbox em /projects/PRJ-MENU-LATERAL/explorations. Cada uma com:
- Screenshot do conceito (renderizado em React/Tailwind)
- Pros / Cons honestos
- Esforço técnico (S/M/L/XL)
- Cenário ideal
Nada disso vai pra produção sem decisão. O PortalShell atual fica intacto.
As 8 explorações
A — Status Quo+ (refinamento)
Mantém sidebar com 240px, mas: grupos colapsáveis com memória, cor por área (indigo IDA, amber Trib., emerald Cadastros), busca no topo (/ pra focar), labels truncam com tooltip. Esforço: S · Pro: zero atrito mudança · Con: não resolve escala.
B — Rail compacto + Drawer
Sidebar vira 72px só com ícones, click expande drawer com categorias completas (overlay 320px). Atalho [ pra colapsar/expandir permanente. Inspirado em VS Code, Linear. Esforço: M · Pro: economiza 168px sempre · Con: requer treino dos atalhos.
C — Top bar + Mega Menu Remove sidebar inteira. Header horizontal full-width com 6 áreas (IDA, Importação, Cadastros, Tributário, Workspaces, Pesquisas). Hover/click → mega-menu com 2-3 colunas categorizadas. Padrão de BI tools (Tableau, Looker). Esforço: M · Pro: viewport vertical livre · Con: hover-dependent (ruim em touch).
D — Command Palette First
Sidebar minimalista (só home + workspace ativo). Navegação principal via ⌘K palette com fuzzy search ("kanb" → Kanban). Item recentes na home. Inspirado em Linear, Raycast. Esforço: M · Pro: ultra-rápido pra power users · Con: descoberta inicial sofre.
E — Persona Switcher Topo da sidebar tem switcher de "modo" (Importação · IDA · Tributário · Cadastros). O resto do menu muda inteiro conforme persona ativa. Inspirado em Notion workspaces, Linear teams. Esforço: L · Pro: cognitive load mínimo (vê só o que importa) · Con: usuários que cruzam áreas trocam toda hora.
F — Híbrido: Top + Side contextual Top bar fina (40px) só com áreas globais (IDA, Importação, Cadastros, etc). Sidebar fina (180px) mostra apenas sub-itens da área ativa no top. Padrão Slack, Notion sidebar. Esforço: M · Pro: hierarquia clara · Con: 2 níveis pra clicar; viewport vertical fica curto.
G — Dock Flutuante Sidebar tradicional simplificada + dock flutuante no canto (bottom-right) com 4-6 atalhos por persona (configurável). Tipo macOS Dock. Esforço: L · Pro: shortcuts visuais por personas · Con: mais um elemento visual concorrendo por atenção.
H — Search-only + Home grid Quase sem menu. Logo + busca + avatar no topo. "Home" sempre = grid de cards das 12 telas mais usadas. Ambicioso. Inspirado em Apollo Hospitals, Spaceflight UI. Esforço: XL · Pro: viewport 100% conteúdo · Con: aposta grande, requer mudança de mental model.
Outcomes
A definir após:
- Revisão da PO (Gabriela)
- Comparação heurística (Nielsen 10) entre opções
- Test com 3 usuários (1 IDA-only, 1 multitasker, 1 financeiro)
- Síntese: combinar 1-2 ideias que ganham → wireframe de v2 → bump pra
affectedScreens: [PortalShell]
Métricas alvo (depois do rollout):
- Tempo médio pra encontrar tela: 12s → 5s
- Cliques na nav por sessão: 18 → 10
- Satisfação qualitativa: neutra → 4/5+
- Viewport ocupado por nav: 240px → ≤72px (rail) ou 0px (top)
Próximos passos
- [x] Criar PRJ + sandbox isolado
- [x] Materializar 8 explorações em React
- [ ] Sessão de review com Gabriela Govoni
- [ ] Heurística Nielsen 10 — score por opção
- [ ] 3 entrevistas curtas (15 min cada)
- [ ] Síntese + escolha das 1-2 vencedoras
- [ ] Wireframe + protótipo navegável da vencedora
- [ ] Decisão de implementar (ou voltar pra prancheta)