UX & Usabilidade

UX não é sobre fazer bonito. É sobre fazer funcionar. Uma interface bonita que o usuário não consegue usar é pior que uma interface feia que resolve o problema. Bonito é consequência de funcional, não o contrário.

Heurísticas de Nielsen

As 10 heurísticas de Nielsen continuam sendo o checklist mais eficiente para avaliar uma interface. Não precisa decorar todas. Três cobrem a maioria dos problemas:

Visibilidade do status: o usuário sempre sabe o que está acontecendo
Consistência: a mesma ação funciona do mesmo jeito em todo lugar
Prevenção de erros: é mais fácil impedir o erro do que consertar depois

Feedback

Toda ação precisa de reação visível:

Clicou num botão, ele muda de estado
Enviou um formulário, aparece confirmação ou erro
Carregando, mostra spinner ou skeleton

Sem feedback, o usuário clica de novo, ou pior, acha que quebrou e vai embora. O feedback não precisa ser elaborado. Precisa ser imediato. Um botão que muda de opacidade no hover já é feedback. Um input que mostra borda vermelha no erro já é feedback. Menos é mais, desde que exista.

Padrões

Padrões existem por um motivo: funcionam. Navegação no topo, busca no canto, formulário com label acima do input, botão de ação primária à direita. Quando você segue um padrão, o usuário não precisa aprender nada novo. Quando quebra um padrão, precisa ter um motivo muito bom.

Inovar na interação é diferente de inovar no conteúdo. Seu conteúdo deve ser único. Sua navegação deve ser previsível.

Estados de uma interface

Todo componente tem mais de um estado. Se você só desenha o estado ideal, está desenhando 20% da realidade:

Botão: default, hover, focus, active, disabled, loading
Input: vazio, preenchido, foco, erro, sucesso, desabilitado

/* Checklist de estados por componente */

/* Botão */
- default
- hover
- focus (acessibilidade)
- active/pressed
- disabled
- loading (com spinner)

/* Input */
- default/vazio
- focus
- filled
- error (com mensagem)
- success
- disabled
- placeholder

A decisão

Este guia segue padrões estabelecidos. Navegação lateral, conteúdo centralizado, breadcrumbs. Não inventamos interação nova porque o conteúdo é o que importa. Cada componente documentado mostra todos os estados, não só o ideal.

A regra é: se um usuário consegue usar sua interface sem explicação, você acertou. Se precisa de tutorial, errou.