IHC - Interação Humano Computador

Prévia do material em texto

INTERAÇÃO
HUMANO-
COMPUTADOR
Produzir sistemas usáveis, seguros e funcionais
Melhorar segurança, efetividade e usuabilidade
Conhecer e aplicar aspectos de projeto,
implementação e avaliação de interfaces
Aplicar princípios de projetos de interface a
diferentes sistemas interativos.
OBJETIVOS
SIGNIFICADO
Modos, meios ou processos envolvidos no uso de
tecnologia de informação e comunicação(TICs)
objetivos = Interação
importância = simplificaram processos, redução de
custos, agilidade no relacionamento.
consequência = gerar isolamento, menos contato
com mundo físico.
TICs = Sistemas interativos compostos por hardware,
software e meios de comunicação
Contexto
de uso
OBJETOS DE
ESTUDO
Natureza
da
Interação
Arquitetura 
Processo de
desenvovimento
 Característica
s humanas
INTERAÇÃO,
INTERFACES E
AFFORDANCES
Tudo o que uma pessoa faz com um sistema
computacional para alcançar seu objetivo.
Perspectiva de sistema;
Perspectiva de discurso;
Perspectiva de ferramenta;
Perspectiva de mídia.
PERSPECTIVAS
DE INTERAÇÃO
o usuário é considerado
como um sistema
computacional 
Interação humano
computador é similar a
interação entre sistemas.
PERSPECTIVA
DE SISTEMA
Usuário deve aprender a interagir com o
sistema:
 • Melhores resultados
 • Comandos digitados em terminais
 • Teclas de atalho
 • Formulários de sites
PERSPECTIVA
DE DISCURSO
 Auxílio da IA 
 Raciocina
faz inferências
 adquire informações 
Sistema assume papel de ser humano:
Exemplo: Chatter Bots, Busca por
produtos, Sistema de busca, Tradutores.
PERSPECTIVA
DE FERRAMENTA
 O sucesso da interação depende do
conhecimento do usuário sobre a
ferramenta
Sistema auxilia o usuário para realizar suas
atividades:
Exemplo: Software editor de texto.
PERSPECTIVA
DE MÍDIA
 emergente
Sistema computacionais que conectam
pessoas pela internet:
Exemplo: Emails, chats, redes sociais
Objeto da interface que não
condiz com o que deveria
representar
Falsos
affordancesCaracterísticas de um objetoque evidenciam o que um
usuário deve fazer com ele
. • Promovem uma melhor
usabilidade.
 Affordances
Affordance
Explícito
 
É quando tornamos um elemento
óbvio e claro das suas
funcionalidades, indicando
exatamente o que precisa ser
feito.
Geralmente utilizado quando
ainda não há um padrão
definido de como podemos
interagir com esse elemento.
 
Affordance
Padrão
reduzir a carga cognitiva dos
usuários quando interagem
com um determinado
elemento.
São baseadas nas experiências
anteriores e que são conhecidas
para maioria dos usuários. Um
clássico exemplo é o link
sublinhado com a cor azul.
 
 
Affordance
escondida
Neste tipo, o affordance não está
disponível ou claro até que uma
ação seja realizada pelo usuário.
Por exemplo, um menu
dropdown, onde você precisa
passar o mouse ou clicar no
menu para ver os itens de da
lista.
 
Affordance
metafórica
Utilizamos objetos do mundo real
como metáforas em interfaces
digitais. Ícones e símbolos são
grandes exemplos: carrinho de
compra, envelope, telefone,
vídeo, câmera, impressora, etc…
 
USABILIDADE E
EXPERIÊNCIA DO
USUÁRIO
USABILIDADE - refere-se à facilidade que o usuário tem em
navegar em um sistema, website ou em um aplicativo.
 
 EXPERIÊNCIA - conjunto de sensações e atitudes que o
usuário vivencia como consequência da interação 
LEIS DE UX
as Leis de UX são princípios
básicos que devem ser
considerados em qualquer
desenvolvimento de interface.
Tais leis possuem como base
estudos e argumentos no âmbito
da psicologia.
 
A falta de algumas dessas leis
pode prejudicar a sua interface e
a experiência do usuário.
LEI DE FITTS
Lei de Fitts está relacionada ao
tempo que o usuário leva para
entender a interface e agir.
LEI DE HICK Quanto mais escolhas e opçõesà disposição do usuário, mais
ele demorará a tomar alguma
decisão.
 
Interface do seu produto deve
ser de fácil usabilidade.
 
simplificar as opções para o
usuário dividindo tarefas
complexas em etapas menores. 
LEI DE JAKOB
Os usuários que tem experiência
em outras interfaces, desejam
que a sua funcione de uma
maneira parecida com a que
eles já conhecem
 
 preferem aplicativos
semelhantes aos que utilizam e
já estão familiarizados.
 LEI DE
PRÄGNANZ Nossos olhos preferem encontrar
a simplicidade porque nos
previnem de uma sobrecarga de
informações.
 
Interfaces que possuem
elementos visuais mais simples,
também são mais fáceis de
serem utilizadas e cumprem
com seu propósito.
LEI DA
PROXIMIDADE Todos os dados queentendemos que
correspondem ao mesmo
grupo devem estar juntos, e
para os dados diferentes,
deve haver uma separação
entre eles. 
Objetos próximos tendem a
se unir e, na experiência do
usuário, são entendidos
como membros do mesmo
grupo
 
LEI DA
SIMILARIDADE
elementos que possuem, por
exemplo, a mesma cor,
formato ou outras
características comuns são
vistos como partes do
mesmo conjunto. 
EFEITO VON
RESTORFF Efeito Von Restorff prevê que
os elementos visualmente
contrastantes tenham uma
alta chance de serem
notados e lembrados pelo
usuário.
podemos utilizar o Efeito Von
Restorff como forma de
direcionar o olhar do usuário
para determinadas
informações e/ou locais
 
POSIÇÃO
SERIAL
Na barra de navegação dos
aplicativos, as ações mais
importantes são colocadas à
esquerda ou à direita,
introduzindo elementos como
início ou perfil 
Entre os elementos de uma
série, os usuários sempre se
lembrarão melhor do
primeiro e do último
 
LEI DE MILLER A Lei de Miller descreve que a
nossa memória imediata é
limitada e sua capacidade
total é cerca de 7 “pedaços
de informação”.
Para facilitar a lembrança
dos elementos, pode-se
organiza-los em grupos com
uma quantidade menor de
itens
exemplo = listas de séries do
aplicativo da Netflix
 
 
https://medium.com/aela/mem%C3%B3ria-e-usabilidade-42a6d571e7f8
https://lawsofux.com/millers-law.html
USUABILIDADE
 Deve ser intuitiva, principalmente
em seu primeiro acesso; 
 Deve ser fácil encontrar tudo o
que o usuário precisa em poucos
cliques; 
Deve ser simples, para o usuário
lembrar onde ficam as coisas, nas
próximas visitas.
Uma interface que pensa na
usabilidade tem três pontos
importantes: 
A USABILIDADE
COMEÇA A SER
PENSADA NO
PAPEL, COM OS
WIREFRAMES.
1.
POSICIONAMENTO DE BOTÕES
QUANTOS CLIQUES O USUÁRIO VAI
PRECISAR PARA CONCLUIR UMA TAREFA
FACILIDADE DE ENCONTRAR UMA
INFORMAÇÃO
 
 
 
 
DESIGN DE
INTERAÇÃO
 Primeira Dimensão: Conteúdo
Segundo Dimensão: representações visuais
 
Terceira Dimensão: Dispositivos de acesso
Quarta Dimensão: Tempo
Quinta Dimensão: Comportamento
DESIGN DE
INTERFACE
Deixar o sistema funcional, além de bonito
 
Efeito Halo - julgamentos positivos e
negativos Diferencial competitivo
MARKETING
Marketing e UX andam lado a lado
 Marketing cria valor para o negócio, a UX
cria valor para o usuário.
 O marketing faz com que as pessoas
comprem ou façam algo. Mas não cria
produtos melhores, com experiências
diferenciadas.
PERFORMANCE
Máximo 2 segundos para carregar alguma
informação 
Evitar página em branco
 Após 3 segundos, 40% dos usuários vão
desistir e abandonar o seu website. 
85% dos usuários de smartphones
esperam que o website abra muito mais
rápido que no desktop.
 Levar em consideração o layout,
hierarquia de informações, utilidade, etc. 
ACESSIBILIDADE
Os websites que apresentarem inclusão
social podem sair na frente da sua
concorrência. 
Mais usuários
Melhor imagem no mercado 
Princípios de acessibilidade da W3C
Deficiência visual, auditiva, física,
cognitiva, etc
ERGONOMIA
usa a ciência para melhorar a interface
física, eletrônica ou mecânica de um
objeto.
pensar nas pessoas que vão passar pela
experiência de utilizar um website;
pensar em qual é o propósito do site e seu
objetivo;
definir onde a experiência do usuário vai
acontecer (seja ele físico, cognitivo, social
ou ideológico);
WIREFRAMES
esboços simples de telas de produtos digitais, como sites
e aplicativos. O intuitoé estruturar e validar ideias.
COMO CRIAR UM
WIREFRAME?
 Procure inspiração e referências
Tenha o seu fluxo de usuários mapeado
 
Crie blocos no seu wireframe
Preencha os detalhes
Estabeleça um prazo para finalizar o
wireframe
PSICOLOGIA
EXPERIMENTAL
Mensurar e modelar o comportamento humano, com o
intuito de prever seu comportamento
tempo que o usuário
leva para tomar uma
decisão.(muita
informação)
Lei de Hick
tempo que o usuário
leva para entender e
agir. 
Lei de Fitts
PSICOLOGIA
COGNITIVA
APLICADA
Aspectos Cognitivos da interação
PRINCIPIOS DE
GESTALT Lei da proximidade
Boa continuidade
Simetria
Lei da similaridade
Destino Comum
Fecho
Região comum
 Conjunto de
leis que nos
leva a
perceber
determinada
informação
PRINCIPIOS DE
GESTALT
AVALIAÇÃO DE
INTERFACES
Método empírico e Método não empírico
MÉTODO
EMPÍRICO
Envolve o usuário
Um dos melhores métodos de avaliação
 
Mais demorado
Envolve observação, questionários, entrevistas
MÉTODO NÃO
EMPÍRICO
Feito por especialistas e não por usuários
Mais Rápido
 
A avaliação heurística é o mais famoso
Utilizado quando há pouco orçamento e tempo
para realizar os testes com usuários
AVALIAÇÃO
HEURÍSTICA
Método na qual os especialistas vasculham a
interface a procura de problemas.
Simples e Rápido
 
Padroniza a avaliação entre os especialistas
Capaz de aplicar em qualquer fase do projeto
HEURÍSTICAS DE
USABILIDADE
 
Visibilidade do estado do sistema
Equivalência entre sistema e mundo real
 
Liberdade e controle do usuário
Consistência e Padrões
Flexibilidade e eficiência de uso
Reconhecimento e Recordação
Prevenção de erro
Ajuda e documentação
HEURÍSTICAS DE
USABILIDADE
Preparação
Inspeção
Consolidação dos Resultados
AVALIAÇÃO
Usuário entende que o passo é
necessário para atingir tal
objetivo?
Componente está na interface?
O componente consegue
explicar a ação a ser feita?
O usuário entende o que
acontece depois?
COGNITIVE
WALKTHROUGH