Fundamentos de IHC

UI, UX, usabilidade em contexto, modelos mentais e os dois golfos do ciclo de ação.

TLDR

Perguntar sobre esta página

ChatGPTClaudePerplexityGrokGeminiCopiar e abrirDeepSeekCopiar e abrir

UI, UX e usabilidade

  • IHC estuda e desenha a interação entre pessoas e computadores.
  • A UI reúne meios de entrada e saída. A UX inclui perceções e respostas antes, durante e depois do uso, incluindo efeitos fora da interface.
  • A usabilidade relaciona utilizadores, objetivos e contexto definidos. Não é uma qualidade universal do produto.
DimensãoO que medeExemplo
EficáciaAtingir corretamente o objetivoComprar o bilhete certo
EficiênciaRecursos gastos para o atingirTempo e esforço
SatisfaçãoAvaliação da utilizaçãoResposta após o uso

Comprar depressa o destino errado falha a eficácia, mesmo que a pessoa esteja satisfeita.

Contexto e modelos

PACTPergunta
PessoasQuem usa, com que conhecimento e capacidades
AtividadesO que faz, com que frequência e cooperação
ContextosEm que ambiente físico, social e organizacional
TecnologiasCom que entradas, saídas e ferramentas
  • Stakeholders incluem utilizadores, manutenção e entidade compradora. Utilizadores são stakeholders, o inverso não vale sempre.
  • Modelo mental é o que a pessoa constrói. Modelo conceptual define conceitos, ações e relações que o desenho comunica.

Ciclo de ação e golfos

  • O golfo de execução separa intenção e ações descobertas e realizadas. Não encontrar Pagar é uma dificuldade de execução.
  • O golfo de avaliação dificulta perceber e interpretar o estado. Pagar sem saber se terminou é uma dificuldade de avaliação.
FalhaIntençãoExemploApoio
LapsoCorreta, execução falhaTocar em Cancelar em vez de PagarSeparar controlos, permitir desfazer
EnganoPlano ou interpretação erradosPensar que Reservar já pagaExplicar conceitos e consequências

Liga a análise ao objetivo, mecanismo da falha, alteração proposta e evidência: uma confirmação deve permitir reconhecer o resultado, não apenas aumentar a contagem de cliques.

Exemplos dos golfos.

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