Avaliação heurística

Método: inspeção por um avaliador, navegando a plataforma em produção com conta de teste (out/2026), em viewport mobile (375 px) e desktop. Severidade na escala de Nielsen (1993): 1 cosmético, 2 menor, 3 maior, 4 catástrofe.

Limitação

Nielsen recomenda de 3 a 5 avaliadores para encontrar cerca de 75% dos problemas. Esta é uma avaliação individual, a ser complementada pelos testes de usabilidade.

Resumo

Heurística	Achados	Maior severidade
H1 Visibilidade do status do sistema	UX-06	3
H2 Correspondência com o mundo real	UX-01, UX-08	3
H4 Consistência e padrões	UX-04, UX-05, UX-07	2
H5 Prevenção de erros	UX-01	3
H6 Reconhecer em vez de lembrar	UX-02, UX-07	3
Responsividade (WCAG 1.4.10)	UX-03	3
H8 Estética e design minimalista	UX-10, UX-11	1
Acessibilidade (WCAG 2.2)	UX-02, UX-08, UX-09	3

Achados

Maior UX-01 · Medida do A4 errada no upload

Heurística: H2 · H5 · Onde: /studio/[id]/plantigraphy/[side]

O texto pede “folha A4 (21cm x 27,9cm)”. O A4 tem 29,7 cm; 27,9 cm é o formato Carta. Como a escala de toda a criação depende do papel, o erro de cópia pode gerar plantigrafia fora de escala. Corrigir para 21 × 29,7 cm.

Maior UX-02 · Botões de confirmar sem rótulo

Heurística: H6 · WCAG 1.1.1 / 4.1.2 · Onde: login, recuperar senha, novo rascunho, nota, modais do estúdio

O envio é um círculo verde só com “✓”. Não diz o que acontece (“Entrar”, “Criar rascunho”, “Adicionar”), e o botão do novo rascunho não tem nome acessível. Usar texto + ícone, com o verbo da ação.

Maior UX-03 · Controles do estúdio cortados no celular

Heurística: WCAG 1.4.10 Reflow · RNF-06 · Onde: estúdio, 375 px

A coluna de controles do canvas passa da largura da tela. Barra de ferramentas inferior no mobile.

Menor UX-04 · Formato de preço inconsistente

Heurística: H4 · Onde: /home/checkout

A sacola mostra “R$ 196,07” e o checkout “R$ 196.07”. Usar sempre Intl.NumberFormat('pt-BR', { style: 'currency', currency: 'BRL' }).

Menor UX-05 · Três linguagens visuais de botão

Heurística: H4 · Onde: estúdio (vermelho), parcial (azul), sacola (âmbar)

A mesma ação, avançar no fluxo, tem cores e formas diferentes em cada tela. Um único botão primário com o token --color-action.

Maior UX-06 · “Salvando status…” persistente

Heurística: H1 · Onde: estúdio: cobertura, nota, ajuda

O indicador ocupa os botões principais do rodapé e não confirma quando terminou. Indicador separado com estado final (“Salvo”).

Menor UX-07 · 1º passo separado dos demais

Heurística: H4 · H6 · Onde: estúdio

Os pés (1º passo) ficam no rodapé e os passos 2–4 no topo. Unificar a sequência em um único indicador de progresso.

Menor UX-08 · Rótulos técnicos em inglês

Heurística: WCAG 2.5.3 · H2 · Onde: controles do canvas

aria-label="zoomIn", "zoomOut", "resetZoom". Traduzir para “Aproximar”, “Afastar”, “Centralizar”.

Menor UX-09 · Contraste insuficiente em textos de apoio

Heurística: WCAG 1.4.3 · Onde: upload, placeholders, links

#9E9E9E sobre branco (2,7:1), --muted-foreground (3,6:1) e --text-link (4,0:1) ficam abaixo de 4,5:1. Ver tokens.

Cosmético UX-10 · Cores da marca ausentes na interface

Heurística: H8 · Onde: global

O roxo da marca não aparece, e o vermelho da interface é diferente do vermelho do logo. Aplicar os tokens semânticos derivados da marca.

Cosmético UX-11 · Parcial com hierarquia confusa

Heurística: H8 · Onde: /partial/[id]

A tela mistura linhas cinza, barra de total amarela e botões azuis. Usar o template “Resumo” com os mesmos componentes da sacola.

Pontos fortes

• Estado vazio da sacola bem resolvido: explica e oferece atalhos (H9/H10).
• Exemplos visuais de plantígrafo e baropodômetro no upload (H10).
• Passos bloqueados com explicação acessível (“Finalize o passo anterior…”) (H5).
• Toasts de confirmação claros (“Rascunho criado para…”) (H1).
• Parcial com preço por pé antes da sacola (H1, princípio “Preço sem surpresa”).