Disciplina:

Interface Homem Máquina

Prof. Ricardo Amorim
 Interação, interface, affordance
Interação

Interação: Comunicação entre o usuário e o sistema.

● Inclui ações como clicar, arrastar, digitar ou falar.

Pergunta: Qual foi a última interação com um sistema que te frustrou? Por quê?
 Interação, interface, affordance
Interface
Interface: O "meio" entre usuário e sistema

● Pode ser física (um teclado) ou digital

(uma tela).
● A interface deve ser intuitiva e eficiente.

Exemplo prático:
Boa Interface: Google Search
Má Interface: Sites com excesso de
anúncios

Discussão: Que características tornam uma

interface "boa"?
 Interação, interface, affordance
Affordance

Affordance: Indícios Visuais

Refere-se à percepção do usuário sobre como um elemento pode ser usado.

Exemplo: Um botão parece "clicável".

Exemplo prático:
● Boa Affordance: Porta com uma maçaneta clara para empurrar.
● Má Affordance: Porta sem indicação, gerando confusão.
 Interação, interface, affordance

● A interação eficaz melhora a experiência

do usuário.
● Interfaces intuitivas tornam sistemas
acessíveis.
● Affordance ajuda usuários a entender
como interagir com o sistema.
 Interação, interface, affordance
Atividade Prática
Analise um Sistema Real

Escolha um aplicativo ou sistema que

você usa regularmente.

Responda:
1. Como é a interação?
2. A interface é clara?
3. Há boa affordance?

Apresente suas conclusões para a

turma.
 Interação
A Importância da Interação no
desenvolvimento de Sistemas

Imagine que você está desenvolvendo

um aplicativo de pedidos para um
restaurante.

● O cliente reclama que os usuários

têm dificuldades para completar
pedidos.
● Qual seria o impacto de uma
interação ruim nesse cenário?

Discussão: Como podemos melhorar a

interação para garantir uma boa
experiência?
 Interação
Interação: A ponte entre usuário e sistema

● É a comunicação ativa entre o usuário e o sistema.

● Inclui ações como clicar, tocar, digitar ou falar.

Exemplo prático: Interagir com um caixa eletrônico para sacar dinheiro.

 Interação
Tipos de Interação

Principais Formas de Interação

● Interação direta: O usuário manipula

diretamente os elementos (ex.:
touchscreen).
● Interação indireta: Uso de dispositivos
intermediários, como teclado e mouse.
● Interação natural: Comandos de voz,
gestos ou realidade aumentada.

Exemplo: Como você interage com uma

assistente virtual, como a Alexa ou o Google
Assistente?
 Interação
Exemplos de Interação

Cenários do Cotidiano

1. Usar um aplicativo bancário:

Transferência de dinheiro.
2. Pesquisar na internet: Encontrar
informações rapidamente.
3. Configurar um smartwatch: Ajustar
alarmes ou acompanhar atividades
físicas.

Atividade: Identifique uma interação que você

considera eficiente e explique o porquê.
Desafios na Interação
Interação
Problemas Comuns

● Interfaces confusas ou sobrecarregadas.

● Falta de feedback do sistema.
● Complexidade desnecessária no design.

Discussão: Como evitar esses problemas em projetos que você desenvolverá no futuro?
 Interação
Atividade Prática

Analisando Interações

Escolha um sistema que você usa regularmente (app, site ou dispositivo).

Responda:

1. A interação é intuitiva?
2. O sistema oferece feedback claro?
3. Que melhorias poderiam ser feitas?

Compartilhe suas conclusões com a turma.

 Interação

● Interação é fundamental para a

usabilidade e sucesso de sistemas.
● Compreender os tipos de interação
ajuda a projetar experiências melhores.
● Resolver problemas de interação
resulta em maior satisfação do usuário.

Pergunta final: Como você aplicará esses

conceitos no design de seus sistemas
futuros?
 Interface
A Importância da Interface no
Desenvolvimento de Sistemas

Imagine que você está criando um

sistema de e-commerce. Alguns
clientes reclamam que não
conseguem finalizar compras porque
não entendem como usar o carrinho
de compras.

● Qual seria o impacto de uma

interface ruim nesse cenário?
● Como uma interface clara pode
resolver esse problema?

Discussão: Que elementos fazem

uma interface ser fácil de usar?
 Interface
O que é Interface?
Interface: O ponto de encontro entre usuário e sistema

● É a "cara" do sistema, onde o usuário interage.

● Pode ser física (como um teclado) ou digital (como uma tela).

Exemplo prático: A interface gráfica de um aplicativo bancário.

Pergunta: Qual interface de sistema você considera mais intuitiva? Por quê?
Tipos de Interface Interface
Principais Categorias de Interface

1. Interface Gráfica (GUI): Uso de janelas, botões e menus. Ex.: Sistemas

operacionais.
2. Interface por Comando de Linha (CLI): Baseada em texto. Ex.: Terminal Linux.
3. Interfaces Naturais: Comandos de voz, gestos ou toques. Ex.: Assistentes
virtuais.

Exemplo: Compare a experiência de usar um terminal CLI com a GUI de um sistema.

 Interface
Características de uma Boa Interface
O que torna uma interface eficaz?

● Clareza: Os elementos são fáceis de entender.

● Consistência: Padrões visuais e comportamentais.
● Feedback: O sistema informa ao usuário que sua ação foi registrada.

Exemplo: Um botão que muda de cor ao ser clicado fornece feedback visual.
 Interface
Exemplos Práticos de Interface
Sistemas Reais

● Boa Interface: Google Search – Simples e direto.

● Má Interface: Sites com excesso de informações ou anúncios invasivos.
● Interface Inovadora: Aplicativos que usam gestos, como jogos em Realidade
Virtual.

Atividade: Identifique um sistema com boa interface e explique suas qualidades.

 Interface
Atividade Prática
Analisando Interfaces

Escolha uma interface que você usa regularmente (app, site ou dispositivo).

Responda:
1. Quais elementos são claros e fáceis de usar?
2. Há algo que poderia ser melhorado?
3. Como essas mudanças afetariam o usuário?

Compartilhe suas conclusões com a turma.

 Interface
Resumo de Interface

● Interfaces são essenciais

para a comunicação entre
usuário e sistema.
● Tipos diferentes de
interface atendem a
necessidades diferentes.
● Uma boa interface melhora
a usabilidade e a
satisfação do usuário.

Pergunta final: Que práticas

você usará para projetar
interfaces melhores no futuro?
 Affordance
Por que o Affordance é Importante?

Imagine que você desenvolveu um

aplicativo para idosos gerenciarem
consultas médicas, mas eles não
entendem quais botões devem ser
pressionados.

● Como o affordance poderia ajudar

nesse caso?
● O que acontece quando o design
de um sistema não é intuitivo?

Discussão: Que elementos visuais

indicam como um objeto deve ser
usado?
 Affordance

O que é Affordance?
Affordance: Indícios Visuais e Funcionais

● Refere-se às características de um objeto que sugerem como ele pode ser usado.

Exemplo: Uma maçaneta convida a ser girada, um botão convida a ser clicado.

● Fundamental para criar interfaces intuitivas e acessíveis.

Pergunta: Você já usou algo de maneira errada porque não sabia como interagir com ele?
 Affordance
Tipos de Affordance
Classificações Importantes

● Affordance Física: Baseada no formato e estrutura do objeto. Ex.: Uma

cadeira sugere que podemos sentar nela.
● Affordance Percebida: Indícios visuais que mostram como algo funciona.
Ex.: Um botão com efeito de "pressionado".
● Affordance Cultural: Baseada em convenções sociais. Ex.: Cores verde para
"confirmar" e vermelho para "cancelar".

Exemplo: Identifique affordances em um controle remoto.

 Affordance
Características de um Bom Affordance
O que torna um affordance eficaz?

● Clareza: O elemento comunica sua função sem ambiguidade.

● Coerência: Está alinhado com as expectativas do usuário.
● Contexto: Funciona bem dentro do cenário de uso do sistema.

Exemplo: Um ícone de lixeira claramente representa a função de excluir.

 Affordance
Exemplos de Affordance
Casos Reais

1. Bom Affordance: Ícones em aplicativos

móveis que indicam função, como uma lupa
para "buscar".
2. Mau Affordance: Botões que não parecem
clicáveis devido a falta de contraste ou
design ruim.
3. Affordance Inovador: Aplicativos que
utilizam gestos intuitivos, como "deslizar
para desbloquear".

Atividade: Identifique um sistema com

affordance claro e outro com affordance confuso.
Explique suas escolhas.
 Affordance
Atividade Prática
Analisando Affordances

Escolha um objeto ou sistema que você usa regularmente.

Responda:
1. Como o affordance foi aplicado no design?
2. O affordance facilita o uso intuitivo?
3. O que poderia ser melhorado para aumentar a clareza?

Compartilhe suas conclusões com a turma.

 Exemplo
Considere um aplicativo de banco que, após uma atualização baseada em
princípios de IHC, simplificou o processo de transferência de dinheiro.
Antes, o usuário precisava navegar por várias telas e inserir informações
redundantes. Agora, com um design mais intuitivo e menos passos, os
usuários realizam transferências mais rapidamente e com menos erros,
resultando em maior satisfação e menos chamadas ao suporte técnico.
Este é um exemplo claro de como a IHC aprimora a experiência do usuário
e otimiza a interação com a organização.
 Exemplo
Pense em uma plataforma de ensino a distância. Uma visão puramente
técnica a veria como um conjunto de funcionalidades (upload de arquivos,
fóruns, quizzes).
No entanto, uma visão centrada na IHC a enxerga como um espaço de
interação e aprendizado, onde a interface deve facilitar a comunicação entre
alunos e professores, a colaboração em projetos e o acesso intuitivo ao
conteúdo.
O design da plataforma, nesse caso, prioriza a fluidez da comunicação e a
experiência de aprendizado, e não apenas a entrega de conteúdo.
 Exemplo
Imagine um aplicativo de música. A interação ocorre quando o usuário toca
em um botão de play e a música começa a tocar.
A interface é a tela do aplicativo com seus botões, capas de álbum e barras
de progresso.
Um bom exemplo de affordance seria o botão de play/pause: ele pode ter
um ícone de triângulo (play) que se transforma em duas barras verticais
(pause) quando a música está tocando.
Essa mudança visual sugere claramente a ação disponível ao usuário, sem
a necessidade de um rótulo de texto.
 Affordance
Conclusão e Reflexão
Resumo

● Affordance ajuda os usuários a entenderem como interagir com um sistema ou

objeto.
● Tipos de affordance (físico, percebido e cultural) desempenham papéis cruciais
no design de interfaces.
● Usar affordances corretamente melhora a usabilidade e reduz a frustração do
usuário.

Pergunta final: Como você aplicará o conceito de affordance no design de futuros

sistemas?