Princípios e heurísticas de usabilidade

Affordance, significantes, mapping, heurísticas, padrões e análise fundamentada de uma interface.

TLDR

Perguntar sobre esta página

ChatGPTClaudePerplexityGrokGeminiCopiar e abrirDeepSeekCopiar e abrir

O botão “Confirmar” está visível, mas não diz o que vai confirmar. Uma pessoa pode reconhecê-lo como interativo e continuar sem compreender a consequência, por isso distinguimos pistas de ação, significado e resposta.

Affordance, significante e mapping

Uma porta com puxador sugere puxar; uma porta lisa com placa sugere empurrar. A possibilidade de agir depende da relação entre a pessoa e o objeto: a isso chamamos affordance.

O puxador é o significante, a pista percetível que comunica onde e como agir. O relevo de um botão no ecrã é uma pista, não a definição completa de affordance. Uma imagem com aspeto de botão mas sem ação comunica uma possibilidade que a interface não oferece.

O mapping é a relação entre controlo e efeito. Quatro controlos de fogão dispostos como os quatro bicos reduzem a necessidade de decorar a correspondência. Numa reserva de salas, colocar a seleção de horário junto da informação da sala ajuda a associar a decisão ao objeto correto.

O feedback é a resposta à ação, enquanto a visibilidade do estado permite compreender a situação atual mesmo sem ter acabado de agir. Um indicador “Reserva confirmada” pode cumprir ambos, mas uma animação decorativa não informa necessariamente o estado da reserva.

Dez heurísticas

As heurísticas de Nielsen são princípios gerais de inspeção, não leis que garantem usabilidade. Estuda primeiro os quatro casos abaixo; depois usa a tabela para rever.

Correspondência com a tarefa. Na reserva, o botão “Continuar” cobra imediatamente, mas a pessoa esperava rever os dados; a etiqueta não antecipa o compromisso.

Controlo e recuperação. Depois de escolher a sala errada, a pessoa precisa de voltar atrás sem perder os dados já preenchidos, pois um percurso sem saída aumenta o custo de cada engano.

Reconhecimento em vez de recordação. O campo de horário mostra o formato esperado junto da entrada, para a pessoa reconhecer a opção em vez de adivinhar o código interno.

Minimalismo com propósito. O ecrã de revisão mostra sala, horário e preço, removendo banners e opções raras que competem com a decisão principal.

HeurísticaPergunta para a interface
Visibilidade do estadoSei o que está a acontecer?
Correspondência com o mundo realOs conceitos seguem a tarefa da pessoa?
Controlo e liberdadePosso sair ou desfazer?
Consistência e padrõesA mesma ação mantém nome e comportamento?
Prevenção de errosEvita escolhas inválidas antes de as executar?
Reconhecimento em vez de recordaçãoA informação necessária está disponível?
Flexibilidade e eficiênciaApoia percursos de pessoas experientes?
Estética e desenho minimalistaO conteúdo relevante distingue-se do resto?
Reconhecer e recuperar de errosA mensagem explica o problema e a ação possível?
Ajuda e documentaçãoConsigo encontrar apoio adequado à tarefa?

Uma mesma falha pode afetar várias heurísticas, por isso identifica a principal e explica o mecanismo em vez de enumerar etiquetas para aumentar a resposta.

Consistência interna e externa

Consistência interna significa que a mesma ação mantém nome e comportamento dentro do produto: mudar “Cancelar” para “Desmarcar” só num ecrã quebra essa consistência. Consistência externa segue convenções que a pessoa traz de outros produtos: usar um ícone de disquete para reservar quebra-a, porque esse símbolo pertence a guardar ficheiros.

Prevenção e recuperação

Suponhamos que o campo de horário aceita 25:90. Mostrar um exemplo de formato e impedir a confirmação de uma hora impossível previne o erro. Se a pessoa já submeteu, uma mensagem junto do campo conserva a entrada e explica o intervalo. Conservar a entrada distingue uma boa recuperação: a pessoa corrige o campo sem repetir tudo.

Bloquear todas as teclas “não numéricas” pode prejudicar colagem, tecnologias de apoio e formatos legítimos, por isso prevenir não significa restringir a entrada sem considerar a tarefa. Para uma ação destrutiva, desfazer pode ser mais adequado que uma confirmação genérica em cada clique.

Padrões com condições

Um padrão é uma solução recorrente para um problema em determinado contexto, não uma ordem para todas as interfaces. A mesma alteração pode ajudar uma tarefa e dificultar outra: um assistente com progresso orienta uma reserva com dependências, mas fragmenta uma tarefa simples de um passo.

ProblemaPadrão possívelCondição/limite
Passos com dependênciasAssistente com progressoPreservar dados e permitir revisão; não fragmentar uma tarefa simples
Catálogo com muitas opçõesPesquisa e filtrosExplicar filtros ativos e estados sem resultados
Alternar secções relacionadasAbasNomes claros, estado selecionado e interação adequada
Opções avançadas rarasDivulgação progressivaNão esconder informação necessária à decisão inicial

Escolhe o padrão pela tarefa: copiar um sistema de design dá convenções, mas não verifica se o fluxo resolve a necessidade deste utilizador.

Exemplo resolvido

Numa reserva, o botão “Continuar” cria uma reserva paga imediatamente, sem mostrar preço nem permitir desfazer; a pessoa pensa que vai rever a reserva.

O problema principal é a correspondência entre intenção e efeito: a etiqueta sugere continuação, mas executa um compromisso financeiro. Também faltam informação para prevenir o erro e uma saída adequada.

Propomos mostrar sala, horário e preço antes de um botão “Pagar e reservar”, com um percurso para corrigir os dados.

Para avaliar, pede a participantes que expliquem o que acontecerá antes de ativar o botão e observa se concluem a reserva pretendida; a análise identifica uma hipótese de melhoria, não uma conclusão.

Exercícios

O botão Continuar cobra

Um ecrã tem um botão Continuar que cobra imediatamente. O preço aparece depois. Escolhe uma heurística relevante, explica a falha e propõe uma alteração.

Pista

Não basta escrever o número de uma heurística.

Mais uma pista

Relaciona o nome do botão com a intenção e a consequência.

Solução

Correspondência com o mundo real e prevenção de erros são relevantes, porque a etiqueta não antecipa o compromisso. Mostra preço e dados antes da confirmação, e usa uma etiqueta que explicite o compromisso. Depois testa compreensão e conclusão da tarefa.

Confere a tua resposta:

  • Identifica correspondência com mundo real/prevenção ou controlo com justificação.
  • Explica que a pessoa não pode antecipar a consequência e o preço.
  • Propõe rever dados/preço antes de uma ação explicitamente nomeada.

Erros frequentes

Enumerar todas as heurísticas sem demonstrar a relação não fundamenta o diagnóstico.

Voltar à explicação
Um controlo comunica mais do que permite

Uma sala indisponível continua a mostrar “Reservar” com aspeto de botão ativo. A pessoa consegue ativá-lo, mas só depois recebe “Operação inválida”. A equipa propõe retirar o relevo e manter o texto e o comportamento.

Distingue ação disponível, significante e feedback. Propõe uma alteração que explique a indisponibilidade antes da tentativa e permita continuar a tarefa.

Solução

É possível ativar o controlo, mas a reserva pretendida não está disponível. O significante “Reservar” e o aspeto ativo comunicam uma expectativa que a operação não cumpre. O feedback “Operação inválida” também não explica o motivo.

Mostra que a sala está ocupada nesse intervalo antes da tentativa e oferece horários ou salas disponíveis. Se o estado mudou depois da escolha, conserva os dados e explica esse conflito. Retirar o relevo não informa a causa nem fornece um percurso de recuperação.

Confere a tua resposta:

  • Distingue ativar o botão de conseguir criar uma reserva válida.
  • Identifica a expectativa comunicada e a mensagem que não explica a causa.
  • Propõe estado explícito e alternativa para continuar, além de mudar o aspeto.
Voltar à explicação
Cancelar muda de nome

Num ecrã a ação chama-se Cancelar reserva; noutro chama-se Desmarcar, e voltar atrás apaga os dados preenchidos. Analisa e propõe uma correção.

Pista

A pessoa precisa de reconhecer que é a mesma ação.

Solução

Há quebra de consistência interna e falta de controlo: dois nomes para a mesma ação e retorno destrutivo. Usa um nome único em todos os ecrãs, mostra saída visível e preserva os dados ao voltar. Avalia se a pessoa reconhece a ação e recupera sem repetir tudo.

Confere a tua resposta:

  • Identifica a quebra de consistência interna.
  • Explica a consequência para reconhecer e recuperar.
  • Propõe nome único, saída visível e dados preservados.

Erros frequentes

Não tratar como problema só de texto: a perda de dados é uma falha de controlo e recuperação.

Voltar à explicação

À tua maneira

Aparência

Modo de cor
Tema
Cor de destaque

Leitura

Fonte de leitura

Álgebra, lógica e uma ideia de cada vez.

Código

Fonte do código

Navegação

Cursor de leitura, sem edição. h, j, k, l movem; / pesquisa nesta página. v seleciona caracteres; V seleciona linhas; y copia. Tab permite destacar ou comentar. Espaço ou Enter abre blocos recolhíveis. Nos cartões, h, j, k, l mudam o foco.

CSS personalizado

Ativa uma sugestão ou guarda o teu CSS. Só muda este navegador.

Usa --page, --text e --accent para acompanhar o tema.

Seletores e recuperação

.site-header, .prose, .course-card, [data-reading-history], [data-playground] e .page-actions.

Abre a aparência com a tecla vírgula ou no rodapé. Se o CSS esconder os controlos, abre esta página sem CSS personalizado.

Pesquisar

Escreve para pesquisar em todo o site.

para escolher · Enter para abrir · Esc para fechar

Copiar fórmula

A cópia automática não está disponível. Copia o LaTeX abaixo.

Pesquisar nesta página

Enter procura · n / N repetem · Esc cancela. Ctrl / Cmd K pesquisa todo o site.

Atalhos de teclado

Clica numa tecla para a mudar. Esc cancela. Backspace desativa.

PesquisarCtrl / Cmd K

Os atalhos não interferem enquanto escreves. Tab e Enter funcionam sempre.