O documento discute interfaces homem-computador (IHC), definindo IHC, tipos de interfaces e usuários, e argumentando que tanto projetistas quanto usuários precisam ser considerados para o desenvolvimento de interfaces eficientes. Também aborda como mapeamentos de calor podem ser usados para analisar padrões de leitura em interfaces.

1. Profa. Janaíra França
Parte I
São Paulo (SP) – Agosto 2013
Interface Homem Computador

2. #Interface Homem Computador
 O que vamos discutir nesta primeira parte...
Tipos de interface
Problemas com interface
Conceito de interface
Conceito de IHC
Desenvolvimento de interface
Usuários de interfaces
2
@JanairaFranca

3. #Interface Homem Computador
3
@JanairaFranca
Por que, atualmente, o mercado de
trabalho precisa mais e mais estudar e
implementar IHC nos diversos projetos
de TI?!..

4. #Interface Homem Computador
4
@JanairaFranca

5. #Interface Homem Computador
5
@JanairaFranca

6. #Interface Homem Computador
6
@JanairaFranca

7. #Interface Homem Computador
7
@JanairaFranca

8. #Interface Homem Computador
8
@JanairaFranca

9. #Interface Homem Computador
9
@JanairaFranca

10. #Interface Homem Computador
10
@JanairaFranca

11. #Interface Homem Computador
11
@JanairaFranca

12. #Interface Homem Computador
12
@JanairaFranca

13. #Interface Homem Computador
13
@JanairaFranca
O problema é do usuário que não sabe utilizar o
produto?
Ou....
Do projetista (desenvolvedor) que não leva em
conta as necessidades e a tarefa a ser executada
com o produto?

14. #Usuário...
14
@JanairaFranca
O projetista não entendeu o que
foi solicitado.
 Tem que digitar dados
desnecessários para fazer o
programa funcionar.
 Experimenta várias
possibilidades até conseguir
realizar o que é preciso.
 O manual não é claro e nunca
tem o que é necessário.

15. #Projetista...
15
@JanairaFranca

16. #Projetista...
16
@JanairaFranca
BIOS

17. #Projetista...
17
@JanairaFranca

18. #Projetista...
18
@JanairaFranca
 O produto funciona e o
usuário é que não sabe usar.
 O usuário precisa de
treinamento.
 O usuário não lê ou não sabe
ler manual.
 Existe prazo para a entrega do
projeto e não há tempo para
essas mudanças
desnecessárias.

19. #Projetista...
19
@JanairaFranca

20. #Quem tem razão?
 Alguns pontos relevantes...
Nãodápara
responsabilizar
apenasumou
outro.
Buscarum
equilíbrioentre
desempenho
técnicoe
usabilidade.
Omercado
demanda
interfacesfáceise
visualmente
atrativas.
Eoquetemosque
fazer?
20
@JanairaFranca

21. #IHC ou IU...
21
@JanairaFranca

22. #IHC ou IU...
22
@JanairaFranca

23. #Superfícies Contemporâneas
23
Mudançasnaformadepensare
fazercomunicação,antes
baseadanalinearidade
cartesiana.
@JanairaFranca

24. #IHC ou IU...
24
@JanairaFranca
Interfaces Homem- Computador (IHC)
Human Computer Interaction (HCI)
Disciplina interdisciplinar que trata o projeto (desenho), o
desenvolvimento e a avaliação de sistemas informáticos
interativos a serem usados por seres humanos, buscando
aumentar a qualidade e satisfação dos usuários.

25. #IHC ou IU...
25
@JanairaFranca
Estuda a interação
e a troca de
informação entre
PESSOAS e
MÁQUINAS

26. #IHC ou IU...
26
@JanairaFranca
Ajudar
• Desenvolvimento
de tecnologias
que facilitem a
realização de
tarefas pelo
usuário
Usar e Construir
• Sistemas
computacionais
mais produtivos,
seguros, práticos,
agradáveis e
estimulantes
Avaliar
• Sistemas de
informática e as
formas de
interação

27. #IHC em Sistemas de Informação
27
@JanairaFranca
Interface: é um dispositivo lógico que faz a adaptação entre um
computador e o homem, também chamada de interface homem-
computador
Computador:
máquina onde o
programa roda.
Interação: usuário
diz ao computador
o que quer fazer e
o computador
comunica os
resultados.
Homem ou
Usuário: usuário
final do sistema

28. #IHC ou IU...
28
@JanairaFranca

29. #Interação-projeto
29
@JanairaFranca

30. #Interface
 Como definir?
30
Parte visível de uma
aplicação/sistema;
 Parte de um programa que
permite ao usuário: Interagir
com a aplicação e Realizar as
suas tarefas;
 Resultado da aplicação do
processo a estudar em IHC.
@JanairaFranca

31. #Interface
 Como definir?
31
 Interface é uma superfície de
contato que reflete as
propriedades físicas das partes
que interagem, as funções a
serem executadas e o balanço
entre poder e controle.
@JanairaFranca

32. #Interface
 Existem problemas?
32
@JanairaFranca

33. #Interface
 Porque estudar?
O estudo de interface inclui aspectos relativos ao
processamento perceptual, motor, cognitivo
do usuário, aspectos socioculturais e aspectos
organizacionais de contexto de uso de software.
33
@JanairaFranca

34. #Interface
 Porque estudar?
Para aumentar a competitividade do seu
produto, visto que a Interface influencia na produtividade
do usuário, aumentando a sua satisfação com o produto
desenvolvido.
A qualidade de software está relacionada com a facilidade
e eficiência entre os usuários e os programas de
computadores.
34
@JanairaFranca

35. #Interface
35
@JanairaFranca

36. #Interface
 Porque estudar?
Além disso, por causa da massificação de uso dos
sistemas interativos (Web, vendas, estoque e outros),
sistemas integrados (ERP), prateleiras (microsoft office), jogos
e sistemas específicos (caixa eletrônico).
36
@JanairaFranca

37. #Interface
 Porque estudar?
37
@JanairaFranca
O homem não deve se adaptar a interface,
mas a interface ao homem!

38. #Interface
 Exemplo...
38
@JanairaFranca
A máquina que vende bilhetes de
metrô:
O usuário tem que seguir
precisamente uma sequência
predeterminada de ações.
Primeiro deve ser inserido o
dinheiro e depois acionar as
opções do bilhete.
Por que o usuário não pode
escolher primeiro o bilhete e
depois colocar o dinheiro?
Com esta restrição da ordem da
ação, o usuário pode colocar o
dinheiro e depois na hora de
escolher o bilhete desejado
observa que não tem.
Esse fato foi um conhecimento
adquirido de como a máquina
funciona em que nas próximas
vezes provavelmente ele se
lembrará e quem sabe não
cometerá o mesmo engano.

39. #Interface
 Exemplo...
39
@JanairaFranca

40. 42
@JanairaFranca
# Interfaces e conteúdo...
We are all visual
thinkers. 75% of the
sensory neurons in our
brains are
processing visual
information.

41. #Expectativas do usuário de interfaces...
43
@JanairaFranca

42. 44
@JanairaFranca
#Interfaces e conteúdo...

43. 45
@JanairaFranca
# Interfaces e conteúdo...

44. 46
@JanairaFranca
# Interfaces e conteúdo...

45. 47
@JanairaFranca
# Interfaces e conteúdo...

46. 48
@JanairaFranca
# Interfaces e conteúdo...

47. 49
@JanairaFranca
# Interfaces e conteúdo...

48. 50
@JanairaFranca
#Leitores de Interfaces...
Padrão de Leitura “F”
De acordo com as pesquisas de Jakob
Nielsen, existe um movimento horizontal
na parte superior da área de conteúdo,
da esquerda para a direita, e ao voltar há
um movimento vertical pela parte
esquerda da tela; há um segundo
movimento horizontal, mas mais curto
que o anterior e, finalmente, um
movimento vertical na parte esquerda da
tela. As setas indicam a trajetória.
Fonte: Nielsen

49. 51
@JanairaFranca
#Leitores de Interfaces...
Fonte: Nielsen

50. 52
@JanairaFranca
#Tipos de Leitores
Leitores “Escaneadores”
• “Escaneiam” a interface (ou, se
preferir, lêem superficialmente) e
escolhem palavras-chave, frases
e parágrafos de seu interesse,
enquanto “brincam” com o
conteúdo da interface.
• Leitura mais fragmentada.
Leitores “Palavra a Palavra”
• Preferem seguir a ordem do texto
presente na interface, possuem
algum nível de restrição no
entendimento dos códigos
linguísticos.
• São adeptos da leitura linear.
Fonte: EyeTrack07

51. 53
@JanairaFranca
#Tipos de Leitores
Fonte: Nielsen & EyeTrack07
Palavra a
Palavra
Não leitores
Escanea-
dores
Não há consenso em afirmar
quais são os leitores mais
predominantes.
Depende de cada conteúdo
publicado nas diferentes
interfaces.

52. 54
@JanairaFranca
#Interfaces...
Fonte: Nielsen
Para Jacob Nielsen, escanear é o
comportamento dominante, e
não a leitura detalhada. Mesmo
quando ocorre a leitura, ela
prossegue só depois de o usuário
ter escaneado uma seção
específica que contém
informações importantes.

53. #Mapas de Calor
55
@JanairaFranca Fonte: Como Escrever para a Web

54. #Mapas de Calor
56
@JanairaFranca Fonte: Como Escrever para a Web

55. 57
@JanairaFranca
#Bibliografia...
FERNANDES, Leandro. A. F. Interface Homem Computador. Rio de
Janeiro: UFF, 2009.
FRANÇA, Janaíra D. S. Gestão do Conteúdo. São José dos Campos:
SENAC, 2012.
SANTOS, Adriana C. Ferrari. Interface Homem Computador. São José
dos Campos: Faculdades ETEC, 2013.

56. 58
#Dúvidas?
janaira.franca@terra.com.br
Twitter: @JanairaFranca
Linkedin: Janaira França
Facebook: Janaira França