Interação Humano Computador

Aulas 1 e 2 - Introdução
Joice Otsuka
Objetivos desta aula
1. Evolução das interfaces e interação
2. Importância da IHC
3. Diferentes visões sobre sistemas interativos
4. Conceitos básicos
5. Qualidade em IHC
○ Usabilidade
○ Experiência do usuário
○ Acessibilidade
2
 Evolução dos
sistemas
computacionais

Quais os impactos nas

interfaces e na interação?

Quais os impactos em
nossas vidas?

[Fonte: Harper et al. 2008] 3

Evolução das interfaces e da interação

4
Evolução das interfaces e da interação

5
Qual a importância da IHC?
● Sistemas computacionais interativos estão cada vez mais presentes
em nossas vidas e com grande impacto
○ comunicação
○ educação
○ saúde
○ entretenimento
○ cultura
○ comércio …

● Cada vez mais pessoas, com diferentes perfis e necessidades, são

usuários de sistemas computacionais interativos
6
Qual a importância da IHC?
● Sistemas interativos mal projetados geram impactos negativos na vida
das pessoas

● A IHC tem como objetivo projetar sistemas que promovam boas

experiências de uso aos usuários

● A IHC está preocupada com a qualidade de uso dos sistemas interativos

e no seu impacto na vida dos seus usuários

7
“Interação Humano Computador trata do design, da
avaliação e da implementação de sistemas de
computação interativos para o uso humano e
estuda fenômenos importantes que os rodeiam”
[ACM, 1992]

8
Diferentes visões sobre sistemas interativos

“de dentro para fora” “de fora para dentro”

(abordagem tradicional) (abordagem da IHC)
[Barbosa e Silva 2010] 9
Diferentes visões sobre sistemas interativos

organizações
usuários

produtores de
conteúdo
fabricante de
sistema
software
interativo
profissionais de
suporte
fabricante de
hardware
marketing e
provedores de acesso à Internet vendedores
10
[Barbosa e Silva 2010]
Benefícios de IHC
● Contribui para:
○ aumentar a produtividade dos usuários
○ reduzir o número e a gravidade dos erros
○ reduzir o custo de treinamento
○ reduzir o custo de suporte técnico
○ aumentar as vendas e a fidelidade do cliente

[Barbosa e Silva 2010] 11

Histórico da área
IHC surgiu como uma área de raízes entrelaçadas na computação
gráfica, sistemas operacionais, fatores humanos, ergonomia, engenharia
industrial, psicologia cognitiva e a parte de sistemas da Ciência da
Computação [ACM SIGCHI]

12
IHC como Área Multidisciplinar

Computação Engenharia

Psicologia Artes

Sociologia IHC Design

Antropologia Linguística
Ergonomia Semiótica

[Barbosa e Silva 2010] 13

Objetos de Estudo em IHC

[Barbosa e Silva 2010]14

Conceitos básicos

15
Interface
meio de contato entre
usuário e sistema

toda a porção do sistema

com a qual o usuário
mantém contato físico
(motor ou perceptivo)
ou conceitual durante a
interação (Moran, 1981)

interface para o usuário, a interface é

o sistema (Hix & Hartson)
[Barbosa e Silva 2010] 16
Interface
● A interface com o usuário determina os processos de interação possíveis
[Barbosa e Silva 2010]
○ O que posso fazer
○ De que forma
○ Quando, em que ordem ..

● Interface é software
○ 40% do código da aplicação
○ 50% do tempo de implementação

17
Exemplo: cédula x urna eletrônica

• Como votar no José da Silva para

vereador?
• Como saber se o número é do candidato
desejado?
• Como votar em branco?
• Como votar nulo?
• Em que ordem votar?
18
Interação
● Não pensamos em interfaces de forma independente e
sim, na interação com essas interfaces

“Processo através do qual o usuário formula uma intenção,

planeja suas ações, atua sobre a interface, percebe e
interpreta a resposta do sistema e avalia se seu objetivo foi
alcançado” [Norman,1986]

19
Perspectivas de Interação

[Fonte: Kammersgaard (1988) apud Barbosa e Silva 2010] 20

Perspectivas de Interação
perspectiva significado de interação fatores de qualidade mais evidentes

eficiência (tal como indicado pelo tempo de uso

sistema transmissão de dados
e número de erros cometidos)

parceiro de adequação da interpretação e geração de

conversa usuário-sistema
discurso mensagens

funcionalidades relevantes ao usuário, facilidade

ferramenta manipulação da ferramenta
de uso

comunicação entre usuários e qualidade da comunicação mediada e

mídia
designer-usuário entendimento mútuo

[Barbosa e Silva 2010] 21

Affordance
● “Dar uma pista” de como pode ser operado
● Atributo de um objeto que permite que as pessoas saibam como utilizá-lo

22
Falso affordance

[Barbosa e Silva 2010]

23
Video: Microsoft Sustainability Productivity, Future Vision

https://youtu.be/wraF2DjALls 24
Qualidade em IHC
● Usabilidade

● Experiência do usuário

● Acessibilidade

25
Usabilidade

26
Usabilidade
“Tem como meta
assegurar que os
produtos interativos
sejam fáceis de
aprender a usar,
eficazes e agradáveis”
[Rogers et al. 2013]

[Norman 1988] 27
Usabilidade
● Para Nielsen (1993), a usabilidade está associada a 5
atributos:
○ Facilidade de aprender (learnability)
○ Eficiência (efficiency)
○ Facilidade de lembrar (memorability)
○ Segurança no uso (safety)
○ Satisfação do usuário (satisfaction)
28
Usabilidade na prática

Há dúvidas
do que deve
ser feito para E neste caso?
abrir a porta?

29
Usabilidade na prática

Como abrir a torneira?

Como controlar o fluxo de água?
Como fechar?
30
Bad designs

Fonte: https://www.boredpanda.com/fails-bad-design/ 31
 Bad designs

Fonte: https://www.boredpanda.com/fails-bad-design/ 32
 Bad designs

33
Fonte: https://www.boredpanda.com/fails-bad-design/
Usabilidade e mercado

34
Atividade em grupo
Em grupos de até 3 estudantes, analisem o que muda nas seguintes situações de uso
de um sistema interativo.
1. (a) uma pessoa que paga as suas contas frequentemente pelo computador pessoal em
casa; (b) uma pessoa que paga as suas contas esporadicamente em um caixa eletrônico;
2. (a) um adolescente com poucos compromissos usando um sistema de agenda no seu
celular; (b) um adulto com muitos compromissos, administrando sua agenda no seu
computador pessoal.

O que muda nessas situações em relação ao contexto de uso, aos objetivos dos
usuários, à interface e à interação? Quais atributos de usabilidade ganhariam mais
importância em cada caso?

35
Experiência do usuário

36
Experiência do usuário

● Como as pessoas se sentem em relação a um produto e ao

prazer e satisfação que obtêm ao usá-lo

● Projetamos para uma boa UX

● UX engloba todos os aspectos da interação do usuário final

com a empresa, seus produtos e serviços.
37
38
Trataremos de UX nesta disciplina?
● Sim, no que se refere ao design de sistemas interativos
computacionais (design da interação) para promover boas
experiências de usuário

● Não abordaremos questões relacionadas à divulgação do

produto, design da embalagem.. A ênfase da disciplina será o
design da interação

39
UX e UI

40
Acessibilidade, design
inclusivo e design
universal
41
Acessibilidade

● remover obstáculos de interação

● cuidar da acessibilidade permite que mais pessoas usem
um sistema

42
Acessibilidade
O critério de acessibilidade está relacionado com a capacidade de o usuário acessar o
sistema para interagir com ele, sem que a interface imponha obstáculos (Barbosa e
Silva, 2010)

Acessibilidade é a flexibilidade proporcionada para o acesso à informação e à interação,

de maneira que usuários com diferentes necessidades possam acessar e usar esses
sistemas (Melo e Baranauskas, 2005)

Acessibilidade se refere ao grau em que um produto interativo é acessível a tantas

pessoas quanto possível. O foco está em pessoas com deficiência (Rogers et al 2013).

43
Segundo a
Organização Mundial
de Saúde, 1 bilhão de
pessoas no mundo
vivem com algum tipo
de deficiência

44
45
Acessibilidade

... será obrigatória a acessibilidade nos portais e sítios eletrônicos da

administração pública na rede mundial de computadores (Internet),
para o uso das pessoas portadoras de deficiência visual,
garantindo-lhes o pleno acesso às informações disponíveis.
decreto presidencial nº 5.296 de 2004, art. 47

46
Acessibilidade

Segundo a Lei nº 13.146 (06 de julho de 2015):

“possibilidade e condição de alcance para utilização, com

segurança e autonomia, de espaços, mobiliários,
equipamentos urbanos, edificações, transportes, informação
e comunicação, inclusive seus sistemas e tecnologias, bem
como de outros serviços e instalações abertos ao público,
de uso público ou privados de uso coletivo, tanto na zona
urbana como na rural, por pessoa com deficiência ou com
mobilidade reduzida”
47
Design Universal ou Design para todos
“Design universal é o design de produtos e ambientes para
serem utilizados por todas as pessoas, com a maior
abrangência possível, sem a necessidade de adaptação ou
design especializado”– Ron Mace [Center for Universal Design – NC State University]

48
Design Universal
1. Uso equitativo
2. Flexibilidade de uso
3. Uso intuitivo
4. Informação perceptível
5. Tolerância ao erro
6. Baixo esforço físico
7. Tamanho e espaço para acesso e uso

Fonte: The 7 Principles | Centre for Excellence in Universal Design

49
Design inclusivo
● As pessoas são diferentes entre si e a de que essas diferenças devem ser respeitadas

● Visa projetar para todos, pensando nessas diferenças. São consideradas necessidades
específicas de pessoas com deficiências permanentes, temporárias, situacionais ou
mutáveis, de acordo com suas respectivas situações

● “Design de produtos convencionais acessíveis e usáveis por tantas pessoas quanto

razoavelmente possível em uma base global, em uma ampla variedade de situações e, na
maior medida possível, sem a necessidade de adaptação especial ou projeto especializado.”
- British Standards Institute, 2005

50
 Design inclusivo

Modelo de pirâmide que apresenta um continuum de diversidade

populacional. Os dados de prevalência e as definições dos níveis de
dificuldade são extraídos da pesquisa da Microsoft com base na
Fonte:
população dos EUA (Microsoft 2003 apud University of
https://www.inclusivedesigntoolkit.com/whatis/whatis.html51
Cambridge,2022).
Princípios do design inclusivo
1. Proporcionar uma experiência equivalente
2. Considerar a situação
3. Ser consistente
4. Dar o controle
5. Oferecer escolha
6. Priorizar o conteúdo
7. Adicionar valor
Exemplos: http://designinclusivo.com/files/posteres-design-inclusivo-com-exemplos-branco.pdf

Fontes:

● Inclusive Design Principles

● http://designinclusivo.com/

52
Atividade em grupo
Escolham um sistema interativo ao qual tenham acesso e que possam utilizar. Inspecionem
sua interface para analisar a usabilidade e acessibilidade, considerando diferentes perfis de
usuário:
● usuário usando o sistema pela primeira vez;
● usuário que utiliza o sistema diariamente;
● usuário que utiliza o sistema 1 vez por semestre;
● usuário que realiza diversas atividades ao mesmo tempo e é interrompido com
frequência;
● usuário com baixa visão moderada;
● usuário cego;
● usuário surdo, alfabetizado em Libras.
Grupos de até 3 estudantes.

53
Referências
● Barbosa, S.D.J.; Silva, B.S. (2010) Interação Humano-Computador. Série SBC,
Editora Campus-Elsevier.
● Glassman, E., Guo,P. ,Jackson D., Karger D.,Kim J., Miller R., Mueller S., Sims
C.,Zhang H. User Interface Design & Implementation. MIT Course. Available at:
http://web.mit.edu/6.813/www/sp18/
● Harper, R.; Rodden,T. ; Rogers,Y. ;Sellen,A. Being Human: Human-Computer
Interaction in the Year 2020. Microsoft Research Report.
● Rocha, H.; Baranauskas, M. (2003) Design e Avaliação de Interfaces
Humano-Computador. São Paulo - Escola Computação: IME - USP, 2000.
● Rogers, Y.; Sharp, H.; Preece, J. (2011) Interaction Design: Beyond
Human-Computer Interaction  3rd Edition, John Wiley & Sons, Inc, 2011.

54
Referências
● Carroll, John M. (2011): Human Computer Interaction (HCI). In: Soegaard, Mads
and Dam, Rikke Friis (eds.). "Encyclopedia of Human-Computer Interaction".
Available online at
http://www.interaction-design.org/encyclopedia/human_computer_interaction_
hci.html

● Susanne Bodker. (2006). When second wave HCI meets third wave challenges.
In Proceedings of the 4th Nordic conference on Human-computer interaction:
changing roles (NordiCHI '06), ACM, New York, NY, USA, 1-8.
http://doi.acm.org/10.1145/1182475.1182476
●

55