KF Cadernos interativos
IHC
Aulas 01–02 • Revisão P1

Fundamentos de IHC e visão centrada no usuário

IHC estuda o design, a avaliação e a implementação de sistemas interativos para uso humano, com foco na qualidade de uso e no impacto da tecnologia sobre as pessoas.

  • Sistema interativo: hardware, software e o ambiente que usa ou é afetado pela tecnologia.
  • Engenharia de Software: enfatiza eficiência, robustez, correção e manutenção.
  • IHC: enfatiza qualidade de uso e impacto na vida dos usuários.
  • Dentro para fora: visão centrada na máquina; parte da lógica interna do sistema.
  • Fora para dentro: visão centrada no usuário; parte de pessoas, objetivos, tarefas e contexto.
  • Perspectivas de interação: sistema (transmissão de dados), parceiro de discurso (conversa), ferramenta (controle para realizar tarefa) e mídia (comunicação entre pessoas).
Regra de prova: desempenho técnico não garante qualidade de uso. Um sistema pode ser rápido e correto e ainda ser difícil de usar.
Aula 02 • Revisão P1

Affordance, usabilidade, UX, acessibilidade e comunicabilidade

  • Affordance: propriedade percebida que sugere como algo pode ser usado.
  • Falsa affordance: algo parece permitir uma ação que não existe.
  • Usabilidade: facilidade de aprendizado, recordação, eficiência, segurança no uso e satisfação.
  • UX: cognição, percepção, afetos, emoções, satisfação e frustração durante o uso.
  • Acessibilidade: remoção de barreiras para pessoas com diferentes habilidades.
  • Comunicabilidade: quão bem a interface comunica a lógica e as intenções do design.
CritérioPergunta prática
UsabilidadeConsegue aprender, lembrar e executar a tarefa com eficiência e segurança?
UXComo a pessoa percebe e se sente durante a interação?
AcessibilidadeA interface impõe alguma barreira para este perfil?
ComunicabilidadeA interface deixa claro o que pode ser feito e o que está acontecendo?
Falsa affordance Parece botão, mas não é Finalizar pedido

O relevo, a borda e o destaque sugerem clique. Como este elemento é apenas visual, a expectativa de ação é quebrada.

Falsa affordance Parece link, mas não é Relatório completo

Cor e sublinhado comunicam “link”. Se nada acontece, o signo induz uma ação inexistente.

Tente clicar nos dois exemplos: a aparência promete interação, mas nenhum deles é um controle real.
Aula 03 • Revisão P1

Engenharia Cognitiva: intenção, ação e feedback

A Engenharia Cognitiva observa a distância entre objetivos psicológicos do usuário e controles/estados físicos do sistema.

  • Golfo de execução: dificuldade de transformar a intenção em ações. Pergunta-chave: “Como eu faço?”.
  • Golfo de avaliação: dificuldade de perceber e interpretar o estado após agir. Pergunta-chave: “Deu certo?”.
  • Feedback: respostas claras do sistema reduzem principalmente o golfo de avaliação.
  • Carga cognitiva: esforço mental; aumenta quando a interface exige memorização, cálculo ou reconstrução de contexto.
Objetivo“Quero transferir dinheiro”
Golfo de execução
Como faço?
Ação no sistemaSelecionar, preencher, confirmar
Golfo de avaliação
Deu certo?
Estado percebidoProcessando, aprovado ou erro
Os textos ficam dentro de células responsivas: no celular o fluxo vira uma sequência vertical, sem sobreposição.

Teoria da ação de Norman — ciclo mental

O ciclo ajuda a localizar em que momento a interação falha: antes da ação, na execução, ou depois dela, na percepção e interpretação do resultado.

1Objetivo
2Formular intenção
3Especificar ações
4Executar
5Perceber estado
6Interpretar
7Avaliar vs. objetivo
Atalho: execução = “como faço?”; avaliação = “deu certo?”. Hick-Hyman ajuda a justificar redução/organização de alternativas; Fitts ajuda a justificar alvos maiores e mais próximos.
Aula 03 • Revisão P1

Engenharia Semiótica: a interface como mensagem

A Engenharia Semiótica entende IHC como comunicação humana mediada pelo sistema. A interface representa o designer e transmite uma metamensagem ao usuário.

  • Metacomunicação: comunica quem o designer acredita que é o usuário, o que ele pode fazer e como o sistema deve ser usado.
  • Signo: algo que representa alguma coisa para alguém.
  • Significante: forma perceptível; significado: conceito interpretado.
  • Problema de interpretação: o usuário atribui ao signo um sentido diferente do pretendido.
EstáticoBotão “+”

O significado é interpretado olhando para forma, texto, posição ou layout.

DinâmicoClicar → abrir criação

O significado depende da relação temporal e causal entre ação e consequência.

Metalinguístico“Evento salvo”

Explica o estado, o uso ou o significado de outros signos da interface.

Exemplo baseado na atividade com Google Agenda.
Aula 04 • Revisão P1

Estilos de interação, multimodalidade e realidade mista

  • Linguagem de comando: instruções por sintaxe específica; rápida para experientes, mas exige lembrança.
  • Menus: opções visíveis reduzem a necessidade de recordar comandos.
  • Formulários: adequados para entrada estruturada e previsível de dados.
  • Manipulação direta: usuário age sobre objetos visíveis, com feedback imediato.
  • Multimodalidade: combina voz, toque, gestos, som ou outros canais.
  • Realidade mista: integra elementos reais e virtuais.
Aulas 03–04 • Revisão P1

Gestalt, memória, atenção, Hick-Hyman e Fitts

  • Proximidade: elementos próximos são percebidos como grupo.
  • Similaridade: elementos semelhantes parecem relacionados.
  • Continuidade: o olhar tende a seguir caminhos visuais contínuos.
  • Fechamento: a mente tende a completar formas incompletas.
  • Memória e atenção: minimizar retenção desnecessária, preferir reconhecimento à lembrança e destacar o que importa no momento da decisão.
  • Chunking: agrupar informação em unidades significativas reduz esforço de memória e facilita varredura visual.
  • Prevenção e recuperação de erros: tornar estado e ações visíveis, restringir ações inválidas e permitir correção.
  • Hick-Hyman: mais alternativas de escolha tendem a aumentar o tempo de decisão.
  • Fitts: tempo para apontar depende do tamanho do alvo e da distância até ele.
Proximidade: dois grupos pela distância
Similaridade: forma e cor sugerem relação
Continuidade: o olhar segue o trajeto
Fechamento: percebemos uma forma completa
Aula 05 • Revisão P1

Processo de Design em IHC

O projeto de um sistema interativo é iterativo e incremental.

01Análise

Compreender pessoas, atividades, contextos, tecnologias, problemas e oportunidades.

02Síntese

Planejar e executar uma intervenção para chegar a uma situação desejada.

03Avaliação

Verificar o efeito da intervenção e realimentar as próximas decisões.

↻ Os resultados da avaliação podem levar de volta à análise ou à síntese.
  • Ciclo de vida em estrela: avaliação ocupa posição central e conecta as atividades. O processo pode começar por pontos diferentes conforme o projeto e, após cada atividade, o resultado é avaliado antes do próximo passo.
  • Engenharia de Usabilidade: incorpora conhecimento do usuário, objetivos de usabilidade, prototipação e avaliação ao desenvolvimento.
  • Design baseado em cenários: histórias em linguagem natural representam pessoas executando atividades. O material destaca começar por cenários de problema e avançar para projeto, prototipação e avaliação.
  • Métodos ágeis: pesquisa, prototipação e avaliação podem ser distribuídas pelas sprints, envolvendo usuários e avaliando além de testes automáticos.

10 atividades de Engenharia de Usabilidade (Nielsen)

  1. Conhecer usuário
  2. Análise competitiva
  3. Metas de usabilidade
  4. Designs paralelos
  5. Design participativo
  6. Design coordenado da interface
  7. Diretrizes + análise heurística
  8. Protótipos
  9. Testes empíricos
  10. Design iterativo

Tipos de cenário

AtividadeO que a pessoa faz

Ilustra atividades e objetivos dos usuários no contexto.

InformaçãoO que é trocado

Explicita informações que circulam entre usuário e sistema.

InteraçãoAção ↔ resposta

Descreve ações do usuário e respostas do sistema. A avaliação permanece contínua.