Aula 01 - Conceitos de IHC - Prof.ª Cristiane Fidelix

Introdução a IHC

1. Interação Humano
Computador
Introdução
ME.PROF.ª CRISTIANE FIDELIX

2. O que é IHC
2011.2 48/2
Interação
Sistema Usuário

3. Fonte
Processo de Interação
humano Computador

4. O que é IHC ?
é o estudo da interaçãoentrepessoasecomputadores.

5. IHC:Objetivos
Conheceros
computacionais
;
conceitosassociadoscomainterfacedesistemas
Estudar detalhes dasinterfaces;
Realizaratividades:
Prática dedesenvolvimento
Avaliação
Aprender a projetar interfaces de software eWeb;
Conhecer os usuários decomputadores;

6. 1º Vamoscolocaroprogramadorqueháemcadaumdenósemsegundoplano;
2º Vamospensar comousuários;
3º Vamospensar comoprojetistas;
“Somos diferentes no modode
pensar, agir esentir”

7. ECOMO
ASPESSOAS
SECOMUNICAM
COM OSSISTEMAS
COMPUTACIONAIS?

8. O que são TICS?

9. Mergulho no Tempo:
da era escrita à digital

10. Mergulho no Tempo dos recursos
visuais

11. Mergulho nas mídias Digitais

12. A nova era da televisão

13. Ferramentas de mudaram a interação do
homem
Tecnologias Disruptivas

14. As 3 ondas

18. Como um sistema é utilizado?

19. Como um sistema é utilizado?

20. Como um sistema é utilizado?

22. Como um sistema é utilizado?
Existem3 camadaspor ondeosusuáriospassam:

23. Quandoo
usuário
quer
consumir
osdados?

24. Quandoo
usuário
quer
armazenar
osdados?

25. EVOLUÇÃO DA INTERFACE COM O USUÁRIO

26. E hjutilizamos.....

27. Interface Gráfica

28. Interfacesmalprojetadas
ponto de vista dousuário:
Estressam
Desmotivam
Desencorajam
Geraminsegurança
Dificultam a conclusão de umatarefa
Afastam

30. O que éInterface:
Éosuportecomputacionalpeloqual
usuárioacionaasfunçõesdeum
sistema.
Éoelementoqueproporcionauma
ligaçãofísicaoulógicaentredois
sistemasoupartesdeumsistemaque
nãopoderiamserconectados
diretamente.

31. Interface:

32. Prazer(satisfação)
Melhorprodutividade
Maiorsatisfação
Facilidade dememorização
A interação com sistemas computacionaisbem
sucedida é fundamentalpara:

34. Princípios básicos que ajudam a garantir uma boaIHC
Visibilidade
Controles precisam ser visíveis e com um bom mapeamentopara
suasfuncionalidades/efeitos
Controles com funçãoúnica

35. Problemas Comuns no Desenvolvimento de Sistemas:
foco no sistema (versus foco no usuário);
desprezo pela interface;
impacto da introdução de novas tecnologias desprezado;
base teórica dos desenvolvedores fraca ou inexistente;
design de software desconsiderado;
processo de desenvolvimento inadequado;
ferramentas inadequadas;
interação usuário-sistema não avaliada;

36. Conhecimento e
Habilidades dos
Especialistas em IHC
Teorias,
Métodos,
Técnicas e
Ferramentas
de
Design de IHC
Disciplinas associadas à IHC
Inteligência
Artificial
Lingüística
Filosofia
Sociologia
Antropologia
Design
Engenharia
Ergonomia e
Fatores
Humanos
Psicologia
Social e
Organizacional
Psicologia
Cognitiva
Ciência da
computação

37. IHC como Área Multidisciplinar
IHC se beneficiade conhecimentos e métodos de outras
áreas fora da Computação para conhecer melhor os
fenômenos envolvidos no uso de sistemas computacionais
interativos.

38. Usuário:

39. Ousuáriodetermina:
O sucesso comercial de umproduto
A produtividade dosusuários
Oportunidadescomportamentos,indivíduos egrupos
A formaçãode grupos que conseguemou
não fazer determinadaatividade
Usuários:

40. Exemplo de Interface

41. Atualidade-2020

43. Problemas Comuns no Desenvolvimento de Sistemas:
foco no sistema (versus foco no usuário);
desprezo pela interface;
impacto da introdução de novas tecnologias desprezado;
base teórica dos desenvolvedores fraca ou inexistente;
design de software desconsiderado;
processo de desenvolvimento inadequado;
ferramentas inadequadas;
interação usuário-sistema não avaliada;

44. Conhecimento e
Habilidades dos
Especialistas em IHC
Teorias,
Métodos,
Técnicas e
Ferramentas
de
Design de IHC
Disciplinas associadas à IHC
Inteligência
Artificial
Lingüística
Filosofia
Sociologia
Antropologia
Design
Engenharia
Ergonomia e
Fatores
Humanos
Psicologia
Social e
Organizacional
Psicologia
Cognitiva
Ciência da
computação

45. ÁreaMultidisciplinar
IHC se beneficia de conhecimentos e métodos de
outras áreascomo:
•Psicologia
•Sociologia
•Antropologia
•Design
•Ergonomia
•Linguistica
•Semiotica

48. Exercícios
01-ConceitueIHC?
02–ExpliqueaimportânciadoIHC?Quaissãoos
desafiosdaIHC?
03–QuaissãoosobjetivosdaIHC?
04–Crieumadefiniçãopessoalparaoconceitode
INTERFACE.

49. 05 –Observe a figuraabaixoe expliqueporqueé importanteum alunode SI
estudaIHC:
06-Qualadiferençaentreutilidadeeusabilidadedeumsoftware?

50. 07 –Quaisseriamosproblemasdos conteúdospassadospelo formulário
daimagem a seguir?

51. AFFORDANCE

52. Affordance
Odesign doscontrolesdeve
sugerir sua funcionalidade
Quais operações e manipulações
podem ser feitas
determinadoobjeto
Affordancepodeserentendidacomoquantopotencial
aformadeum objetotemparaqueeleseja
manipuladodamaneiraque foipensadopara
funcionar.
Porexemplo,umamaçanetaredondadeportaconvida
ousuárioagirá-la

53. AFFORDANCE

54. AFFORDANCE
https://vimeo.com/52704603

55. AFFORDANCE
Vídeo
https://vimeo.com/52704603

56. Tarefa do
designer
étornarexplícitaessafinalidade,
fazendo-aperceptívelaousuário,afim
defacilitarouso.
Assim,seeuqueroindicarquealgoé
clicável,eudevofazerparecerclicável;
seéparaserarrastado,eudevofazer
parecerarrastável.

57. AFFORDANCE

58. FALSAS AFFORDANCE

59. FALSAS AFFORDANCE
Aprendeu-seque,emsitesdecompras,a
imagemdeumprodutofuncionacomoum
botão:aimagemdoprodutopossuiaaffordance
deserclicável,mesmoquenãotenhaaparência
deumbotão,poisassimaprendeu-se.
Nocasodosite,aimagedoprodutoem
destaque,comoFeaturedGift,sugere
queelaéclicávelemelevaráàpágina
dedescriçãodesseproduto.Masna
realidadeelanãoéclicável.Esseéum
exemplodefalsaaffordance.

60. FALSAS AFFORDANCE
No caso do site, a image do produto em
destaque, como Featured Gift, sugere
que ela é clicável e me levará à página
de descrição desse produto. Mas na
realidade ela não é clicável. Esse é um
exemplo de falsa affordance.

61. FALSAS AFFORDANCE

62. Expectativas
Seacoisaéconhecida,
experiênciaspassadas;
esperamosdelaumcomportamentobaseadoem

63. Associamos a ele um comportamento de algo que já éconhecido;
Expectativas

64. Osusuários
Trazem consigo suas experiênciaspassadas;
Têm uma concepção daquilo que o computador podefazer;
Seelenãosabemuitoarespeitodeumcomputador,iráassociarcom
algoque já é do seuconhecimento;

65. Quantaspilastras existem?

66. Quantasjoaninhas?

67. Quantas pessoas hánesta
paisagem?

68. O que há nestapaisagem?

69. O que há de errado com a
mulher?

70. Quais taças sãoiguais?

71. Aplicações da IHC
https://www.youtube.com/watch?v=v1-XpI74Ys0 http://www.gonzatto.com/filmes-ficcoes-de-design/

72. Interação
Tudo o que uma pessoa faz com um sistema
computacional para alcançar seu objetivo.

73. Interação
Perspectiva de sistema;
Perspectiva de discurso;
Perspectiva de ferramenta;
Perspectiva de mídia.
De acordo com [Kammersgaard, 1988] existem 4
perspectivas de interação usuário-sistema (figura 2):

74. Interação

75. 1)Perspectiva de Sistema
Ousuárioéconsideradoumsistemacomputacionalea
interaçãoseaproximadainteraçãoentresistemas
computacionais(transmissãodedadosentrepessoase
sistemas).
Ousuáriodeveaprendercomointeragircomosistema.É
comumousodelinguagensdecomandocomolinguagem
descript,porexemplo.

76. 1)Perspectiva de Sistema
Exemplos:
◦Comandosdigitadosemterminaisdesistemas
operacionais;
◦Limitaçãodaparticipaçãodousuárioatravésde
formulárioscomodeempresasaéreas;
◦Combinaçõesdeteclasdeatalho.

77. Perspectiva de Sistema

78. 2) Perspectiva de discurso
Com o auxílio da Inteligência Artificial, tem-se a
perspectiva do discurso.

79. 2) Perspectiva de discurso
Possui o objetivo de tornar a interação entre homem-
máquina parecida com as relações entre seres humanos. A
comunicação pode ser preenchida como uma conversa.
Imagine um chat!!!
O designer deve se preocupar com a quantidade, conteúdo
e sequência de falas durante a conversa.
Exemplo: Sistema de busca por produtos na Web. Como
seria?
Quais técnicas seriam utilizadas? Uma das principais é
processamento natural de linguagem.

80. 2) Perspectiva de discurso
◦Sistema assume papel de ser humano
◦Raciocina, faz inferências, adquire informações
◦Possui o objetivo de tornar a interação entre homem-máquina
parecida com as relações entre seres humanos. A comunicação pode
ser preenchida como uma conversa. Imagine um chat!!! O designer
deve se preocupar com a quantidade, conteúdo e sequência de falas
durante a conversa. Exemplo: Sistema de busca por produtos na
Web. Como seria? Quais técnicas seriam utilizadas? Uma das
principais é processamento natural de linguagem
◦Exemplo:
◦Chat
◦Busca por produtos

81. 3) Perspectiva de ferramenta
Naperspectivadeferramenta,osistemaé
consideradouminstrumentoqueauxiliaousuárioa
realizarsuasatividades,obtendoumresultadofinal.
Exemplos de softwares com essas características?
◦Microsoft Office e Open Office
O sucesso da interação depende o quanto o
usuário conhece a ferramenta e de sua capacidade
para manipulá-la.

82. 4) Perspectivade mídia
Aperspectivademídiaéaquemaisestáganhando
espaçorecentementenossistemasinterativos
atuais,emespecialsistemasqueconectampessoas
atravésdaInternet.
Aqui,osistemaévistocomoumamídia.
Exemplosseriam:email,chats,fórunseredes
sociais.

83. EXERCÍCIOS
1) Cite alguns exemplos de affordances?

84. EXERCÍCIOS
2) Para você curtir algo na página do Facebook,
existem 2 opções.Por qual razão?
3) Considerando o que abordamos em aulasobre
Interaçãooque poderia ser melhorado?

86. EXERCÍCIOS
4) A imagem aseguir são de computadores
antigos da apple.Algumas dificuldades de uso or
usuários foram relatadas.Imagine o contexto da
época e responda qual seria as dificuldades
relatada?
5) Considerando o que abordamos em aulasobre
Interação oque poderia ser melhorado?

87. EXERCÍCIOS