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

Ação, pistas e resposta

  • Affordance é a possibilidade de agir na relação entre pessoa e objeto. O significante é a pista percetível que comunica onde e como agir.
  • Mapping relaciona controlo e efeito: controlos dispostos como os bicos do fogão reduzem a necessidade de decorar correspondências.
  • Feedback responde a uma ação; visibilidade do estado permite compreender a situação atual. Uma animação decorativa pode não informar nenhuma das duas coisas.

Heurísticas de Nielsen

PrincípioAplicação
Visibilidade do estadoMostrar processamento, confirmação ou falha
Correspondência com o mundo realUsar conceitos e consequências da tarefa
Controlo e liberdadePermitir sair, corrigir e desfazer
Consistência e padrõesManter nomes e seguir convenções
Prevenção de errosEvitar uma escolha inválida antes de executar
Reconhecimento em vez de recordaçãoMostrar a informação necessária
Flexibilidade e eficiênciaApoiar percursos de pessoas experientes
Desenho minimalistaDestacar o relevante sem esconder o necessário
Recuperação de errosExplicar problema e correção, preservando dados
Ajuda e documentaçãoOferecer apoio encontrável para a tarefa

Heurísticas orientam inspeção, não garantem usabilidade. Uma falha pode afetar várias; identifica a principal e explica o mecanismo.

Consistência, prevenção e padrões

SituaçãoRegra
Mesmo produtoMantém nome e comportamento; “Cancelar” não vira “Desmarcar” num ecrã
Outros produtosSegue convenções conhecidas; disquete não significa reservar
PrevençãoEvita escolha inválida antes de executar, sem bloquear colagem ou tecnologias de apoio
RecuperaçãoExplica o intervalo válido e conserva a entrada
  • Padrão resolve problema recorrente num contexto, não vale para tudo. Assistente orienta passos dependentes; filtros servem catálogos extensos; abas separam secções; divulgação progressiva esconde opções raras. Nenhum esconde informação necessária à decisão inicial.

Compromisso financeiro

“Continuar” que cobra imediatamente não permite antecipar o compromisso. Mostra dados e preço antes de “Pagar e reservar” e permite corrigir.

A proposta exige avaliação: observa se a pessoa antecipa o efeito e conclui a reserva pretendida.

Análise do exemplo.

À 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.