Resumo (hub)
Componentes de usabilidade

As decisões de UX que sustentam o portal

Cada componente resolve um problema concreto do jeito que se trabalha hoje — planilhas com dezenas de colunas, scroll para todo lado e pouca hierarquia. Aqui está o problema, o ganho de UX e a referência de mercado que valida cada escolha.

10
componentes gerais
transversais a todas as telas.
25+
referências de mercado
Salesforce, Sheets, Jira, iOS…
Nielsen · NN/g
heurísticas aplicadas
e WCAG para acessibilidade.
0
componente inventado
todos com precedente consolidado.
01Modal centralizado 02Tabela zebrada 03Coluna congelada 04Cell stacking 05Barra fixa 06Hint pulse 07Status na borda 08Filtros 09Autocomplete 10Botões de bloco
01

Modal centralizado de seleção

Modal · overlay central · foco total
O problema hoje
Escolher um contrato ou cooperado significa caçar numa planilha, ou abrir um painel lateral que empurra e esconde a tela. O operador perde o contexto e precisa decorar onde estava.
Ganho de UX — Mosaic 2.0
  • Foco total na tarefa — o overlay escurece o fundo e centraliza a seleção; o resto some do caminho, mas continua de referência.
  • Ações fixas no rodapé — Cancelar / Selecionar sempre ancorados, sem rolar até o fim.
  • Hierarquia clara — header (título + fechar), corpo rolável e rodapé de ações em camadas separadas.
SalesforceGmailFigma
Ver na tela real →
Demo
Selecionar cooperado✕
02

Tabela zebrada (striped rows)

nth-child(even){ background:#f7f9f8 }
O problema hoje
Nas planilhas com muitas colunas, o olho perde a linha ao deslocar horizontalmente e lê o dado da linha errada.
Ganho de UX — Mosaic 2.0
Faixas de cor ancoram o olhar e reduzem erros de leitura em tabelas densas. Diferença perceptível, sem poluição visual.
WCAG 1.4.8Material Design
Ver no Relatório →
Demo
ProtocoloContratoVolume
PRT-001SAP-4521120 t
PRT-002SAP-452380 t
PRT-003SAP-4528200 t
PRT-004SAP-453060 t
PRT-005SAP-4532140 t
03

Congelamento de coluna (sticky column)

position:sticky; left:0
O problema hoje
Com 24 colunas, o número do protocolo some no scroll horizontal. O usuário perde a referência de qual linha está lendo.
Ganho de UX — Mosaic 2.0
O identificador permanece visível em qualquer posição do scroll. Zero confusão de linha — o mesmo padrão de Google Sheets e Excel.
Google SheetsExcelAirtable
Ver no Relatório →
Arraste →
ProtocoloStatusContrato SAPClienteCidadeUF
PRT-001LiberadoSAP-4521Cooperativa ACuiabáMT
PRT-002NovoSAP-4523Cooperativa BSorrisoMT
PRT-003ConcluídoSAP-4528Cooperativa CLucasMT
PRT-004Em agend.SAP-4530Cooperativa DSinopMT
← arraste a tabela para o lado →
04

Agrupamento na linha (cell stacking)

.cell-stack{ flex-direction:column }
O problema hoje
Pares de campos relacionados ocupam 2 colunas separadas, dobrando a largura da tabela e o scroll.
Ganho de UX — Mosaic 2.0
~40% menos colunas visíveis. Informações relacionadas ficam juntas (proximidade), com leitura mais rápida em pares.
NN/g · Information density
Ver na tela →
Antes / Depois
Antes — 4 colunas
ProdutoEmbalagemClienteCNPJ
SojaSaca 60kgCoop A12.345/0001
MilhoGranelCoop B23.456/0001
Depois — 2 colunas (stack)
ProdutoCliente
Soja
Saca 60kg
Coop A
12.345/0001
Milho
Granel
Coop B
23.456/0001
05

Barra inferior fixa (sticky action bar)

.summary-footer{ position:fixed; bottom:0 }
O problema hoje
O botão de ação principal fica no fim da página — invisível sem rolar tudo. E o total do que foi selecionado se perde.
Ganho de UX — Mosaic 2.0
Botão primário sempre acessível e contador de itens / volume total sempre visível, independente do scroll.
iOS bottom barShopify Admin
Ver na tela →
Demo
3 protocolos · 340 t selecionadas
06

Atenção no estado vazio (hint pulse)

@keyframes hintPulse
O problema hoje
Operadores novos não sabem por onde começar. A tela em branco não comunica o próximo passo.
Ganho de UX — Mosaic 2.0
Direcionamento visual imediato, sem tooltip. A animação para no primeiro item adicionado — não irrita quem já é experiente.
Don Norman · signifiersDuolingo
Ver na tela →
Demo
Comece selecionando um contrato
07

Indicador de status na borda esquerda

border-left:4px solid <cor-status>
O problema hoje
Com vários itens na tela, é difícil identificar quais ainda precisam de atenção sem ler cada um.
Ganho de UX — Mosaic 2.0
Scanning visual rápido — o operador varre a borda colorida e identifica o status. Não depende de leitura de texto.
TrelloLinear
Ver na tela →
Demo
Contrato 4521Incompleto
Contrato 4523Em progresso
Contrato 4528Completo
Contrato 4530Erro
08

Filtros avançados colapsáveis

Progressive disclosure · toggle ▾/▴
O problema hoje
Filtros visíveis o tempo todo sobrecarregam a interface e intimidam o usuário ocasional.
Ganho de UX — Mosaic 2.0
O casual vê a interface limpa; o avançado expande quando precisa. Complexidade disponível, mas não imposta.
NN/g · Progressive disclosureAmazon filters
Ver no Relatório →
Clique para abrir
Filtros avançados▾
Status ▾
Cliente ▾
Cidade ▾
Período ▾
09

Campo de busca com autocomplete

debounce 250ms · máx 6 resultados
O problema hoje
Operadores digitam códigos longos (SAP, CNPJ) de memória. Um erro de digitação retorna "sem resultados".
Ganho de UX — Mosaic 2.0
Recognition over recall (Nielsen #6). O sistema apresenta as opções — o operador reconhece em vez de lembrar.
Nielsen Heuristic #6Google Search
Ver na tela →
Demo
Cooperativa Agrícola Sorriso14.521
Cooperativa Mista Lucas14.523
Cooper Cuiabá14.528
10

Navegação por blocos de coluna (‹ ›)

Block pager · scrollBy · interno ao LWC
O problema hoje
A planilha rola na horizontal só pela barrinha fina do sistema — que some no macOS e é inviável no touch. Em 24 colunas, achar a coluna certa é tentativa e erro.
Ganho de UX — Mosaic 2.0
  • Botões reais ‹ › avançam um bloco de colunas por clique — previsível, sem caçar a barra.
  • Acessível — funciona por teclado e leitor de tela, e independe do nível de zoom.
  • Baixo risco — interno ao componente (LWC), sem tocar em Theme Layout.
JiraGoogle SheetsComparativo de scroll ↗
Ver no Relatório →
Clique ‹ ›
Colunas 1–4 de 24
ProtocoloStatusContratoClienteCidadeUFVolume
PRT-001LiberadoSAP-4521Coop ACuiabáMT120 t
PRT-002NovoSAP-4523Coop BSorrisoMT80 t
PRT-003ConcluídoSAP-4528Coop CLucasMT200 t
os botões avançam um bloco — a 1ª coluna fica fixa

Onde ver na prática

Estes componentes estão implementados nas telas do protótipo. Volte ao resumo para navegar tela a tela.

← Voltar ao resumo (hub)