Checklist de Revisão de Interface

Corre esta checklist em qualquer ecrã antes de o considerares terminado — cobre os aspetos que mais frequentemente ficam esquecidos numa primeira versão.

Hierarquia

• A ação mais importante do ecrã destaca-se claramente das secundárias
• O olhar sabe para onde ir primeiro, sem esforço

Contraste

• O texto tem contraste suficiente com o fundo para ser lido sem esforço
• Elementos interativos (botões, links) distinguem-se claramente de texto estático

Espaçamento

• Elementos relacionados estão visualmente agrupados, e elementos diferentes estão separados
• Não há elementos demasiado próximos, dificultando o toque em ecrãs pequenos

Estados

• Desenhei o estado de hover/foco para elementos interativos, não só o estado normal
• Desenhei o estado de carregamento (loading), não só o estado com dados já carregados

Erros

• Desenhei o que acontece quando algo corre mal (erro de formulário, falha de rede)
• As mensagens de erro explicam o que fazer a seguir, não só que algo falhou

Acessibilidade

• Os elementos interativos são grandes o suficiente para toque em telemóvel
• O design funciona também para alguém com dificuldade visual (contraste, tamanho de texto)

A maioria dos ecrãs mal avaliados não falha na parte visível — falha nos estados que ninguém desenhou: vazio, erro e carregamento.