9 pontos de usabilidade
implementados nos protótipos

01

Drawer lateral em vez de modal centralizado

Side Drawer · 560px · slide-in da direita

Problema

Modais centralizados bloqueiam o contexto da página e forçam o usuário a decorar o que estava vendo.

Ganho de UX

• Contexto preservado — o operador continua vendo a tela de fundo enquanto interage com o drawer. Sem precisar decorar.
• Ações sempre fixas no rodapé — botões primário/secundário ficam ancorados na barra inferior mesmo com scroll vertical interno. Ideal para drawers com conteúdo longo, onde o usuário não precisa rolar até o fim para confirmar.
• Organização hierárquica do conteúdo — header (título + close), body (conteúdo rolável) e footer (ações) são camadas visualmente separadas, criando ritmo de leitura previsível.

Gmail compose Salesforce Figma

Ver na tela →

Selecionar contrato ✕

Cancelar Selecionar

02

Tabela zebrada (striped rows)

nth-child(even) { background: #f7f9f8 }

Problema

Em tabelas com muitas colunas, o olho perde a linha ao deslocar horizontalmente.

Ganho de UX

Faixas de cor ancoram o olhar e reduzem erros de leitura em tabelas densas. Diferença perceptual sem poluição visual.

WCAG 1.4.8 Material Design

Ver no Relatório →

Protocolo	Contrato	Volume
PRT-001	SAP-4521	120 t
PRT-002	SAP-4523	80 t
PRT-003	SAP-4528	200 t
PRT-004	SAP-4530	60 t
PRT-005	SAP-4532	140 t

03

Congelamento de coluna (sticky column)

position: sticky; left: 0

Problema

Com 24 colunas, o número do protocolo desaparecia no scroll. O usuário perdia a referência de qual linha estava lendo.

Ganho de UX

O identificador permanece visível em qualquer posição do scroll. Zero confusão de linha. Mesmo padrão de Google Sheets e Excel.

Google Sheets Excel Airtable

Ver no Relatório →

Protocolo	Status	Contrato SAP	Cliente	Cidade	UF
PRT-001	Liberado	SAP-4521	Cooperativa A	Cuiabá	MT
PRT-002	Novo	SAP-4523	Cooperativa B	Sorriso	MT
PRT-003	Concluído	SAP-4528	Cooperativa C	Lucas	MT
PRT-004	Em agend.	SAP-4530	Cooperativa D	Sinop	MT

← arraste a tabela para o lado →

04

Agrupamento na linha (cell stacking)

.cell-stack { flex-direction: column }

Problema

Pares de campos relacionados ocupavam 2 colunas separadas, dobrando a largura da tabela.

Ganho de UX

~40% menos colunas visíveis. Informações relacionadas ficam juntas (proximidade). Leitura mais rápida em pares.

NN/g · Information density

Ver na tela →

Antes — 4 colunas

Produto	Embalagem	Cliente	CNPJ
Soja	Saca 60kg	Coop A	12.345/0001
Milho	Granel	Coop B	23.456/0001

Depois — 2 colunas (stack)

Produto	Cliente
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 }

Problema

O botão de ação principal ficava no rodapé — invisível sem scroll até o fim.

Ganho de UX

Botão primário sempre acessível. Contador de itens / volume total sempre visível.

iOS bottom bar Shopify Admin

Ver na tela →

3 protocolos · 340 t selecionadas

Agendar

06

Animação de atenção no estado vazio (hint pulse)

@keyframes hintPulse

Problema

Operadores novos não sabiam por onde começar. Tela em branco não comunicava o próximo passo.

Ganho de UX

Direcionamento visual imediato sem tooltip. A animação para no primeiro item adicionado — não irrita experientes.

Don Norman · signifiers Duolingo

Ver na tela →

Comece selecionando um contrato

+ Adicionar contrato

07

Indicador de status na borda esquerda

border-left: 4px solid <cor-status>

Problema

Com múltiplos cards na tela, era difícil identificar quais itens ainda precisavam de atenção.

Ganho de UX

Scanning visual rápido — o operador varre a borda e identifica o status. Não depende de leitura de texto.

Trello Linear

Ver na tela →

Contrato 4521 Incompleto

Contrato 4523 Em progresso

Contrato 4528 Completo

Contrato 4530 Erro

08

Filtros avançados colapsáveis

Progressive disclosure · toggle ▼/▲

Problema

Filtros visíveis o tempo todo sobrecarregavam a interface e intimidavam usuários ocasionais.

Ganho de UX

Casual vê interface limpa. Avançado expande quando precisa. Complexidade disponível mas não imposta.

NN/g · Progressive disclosure Amazon filters

Ver no Relatório →

Filtros avançados ▾

Status ▾

Cliente ▾

Cidade ▾

Período ▾

09

Campo de busca com autocomplete

debounce 250ms · max 6 resultados

Problema

Operadores digitavam códigos longos (SAP, CNPJ) de memória. Erros de digitação retornavam "sem resultados".

Ganho de UX

Recognition over recall (Nielsen #6). O sistema apresenta opções — o operador reconhece em vez de lembrar.

Nielsen Heuristic #6 Google Search

Ver na tela →

Cooperativa Agrícola Sorriso 14.521

Cooperativa Mista Lucas 14.523

Cooper Cuiabá 14.528