1. facetas do
Design de
Interação
rodrigo@gonzatto.com
rodrigo gonzatto
das interfaces
às interações
gonzatto.com

2. Pessoas percebem o mundo de várias maneiras.

3. Propõem diferentes problemas para uma mesma questão.

4. o que o marketing
sugeriu
o que a administração
aprovou
o que foi projetado pela
engenharia
o que foi produzido como foi montado o que o consumidor
queria...
E dão soluções diferentes para problemas similares.

5. formas de analisar
a interação
humano-artefato
• Formal
• Dialética

6. compreensão
formal Imagem: encontrada no artigo!
Philosophy of Interaction, de Dag Svanaes!
Interaction-Design.org!

7. Estatísticas quantitativas dizem O QUÊ as pessoas fizeram
— mas como saber para quê e porquê?

8. Lei de Fitts

9. Lei de Fitts em softwares: Mini toolbar do Microsoft Office

10. Lei de Fitts em OS: utilizada na barra de ferramentas superior

11. Lei de Fitts em OS: utilizada na barra de ferramentas superior

12. Imagem: Modelo de !
Card, Moran and Newell!
The Psychology of Human-Computer
Interaction, 1983!

13. Imagem: Modelo de !
Donald Norman!
7 estágios da Ação!

14. compreensão
dialética

15. Dimensão social
• Lâmpada elétrica com
a criação do filamento
incandescente em
1879
• Escrita do livro
"Grundisse" até 1858
(mas só publicado
muitos anos depois)
Imagem: Capa de livro da!
Editora Boitempo!

17. O que as pessoas fazem com os artefatos,pelos artefatos,
para os artefatos,em torno dos artefatos e nos artefatos?

18. Para irmos
das interfaces às interações
• Nesta apresentação temos
estórias sobre construção social de interfaces
• Visão breve e geral de algumas das diferentes
facetas do humano-computador
• Que nos indicam compressões outras, para além
da formal (e, desta maneira, outras compreensões,
perguntas e respostas)
“Das Interfaces às Interações “ é o título da
dissertação de Frederick van Amstel!

19. facetas do____
humano-computador
• Contraditória/Dialética
• Histórica
• Existencial
• Cultural
• Atividade (Contextual)
• Ética e Moral
• Política
• Ideológica

20. faceta
contradições
e dialética
porquê os links!
mudaram de 90’s até hoje?!
!
porquê os ícones de!
comprimir, salvar e a barra de rolagem
estão mudando e/ou desaparecendo?

21. Qual a história do
!
hiperlink (hiperligação)
link
endereço / sítio
ou âncora?
!
e como mudou em virtude de contradições
entre o novo e o artigo

22. A LONGA HISTÓRIA DA URL E
DOS ENCURTADORES DE URL
!
endereço URL: http://www.site.com/node/123
URL amigável: site.com/sobre
tinyurl.com/site
bit.ly, migre.me,
u.nu,
➡.ws (unicode characters)
longurl.org
glo.bo, goo.gl, g.co, fb.me
senta.la, rial.to, pqp.vc
(ponto frio - encurtar preço) + virus
+ rick rolled

23. !
(além de ver as interfaces,
para ver as interações
é preciso ver as pessoas, o social)

24. Interfaces... cada vez mais intuitivas???
+ roda rolagem no mouse
+ gestual no celular (dois dedos)

25. ...?
...?
O disquete significa... salvar?
ZIP é... comprimir?

26. faceta
histórico-social
porquê existem hoje!
botões de liga e desliga!
que não ligam e não desligam?

29. porquê o botão de liga/desliga!
se moveu em torno do computador!
!
e se transformou ao!
longo do tempo?

30. faceta
existência
gonzatto diz (para todos): :)
porquê o!
:)!
surgiu?

35. :o

36. • Oi.
• Oi. Eu estou feliz.
• Oi * feliz *
• Oi :)
• Oi : ^ )
• Oi ^_^
!
• emoticon, emoji, internetês...
QUAL A DIFERENÇA?

40. QUAL A DIFERENÇA?

45. faceta
cultura
qual desses botões!
passa para o!
próximo slide?!
!
como representar !
o controle tempo !
na interface?

46. Diferenças culturais no uso da Wikipedia

47. faceta
atividade+contexto
como entender!
o que significa clicar!
em curtir e cutucar?!
!
sem analisar o processo !
e o contexto !
de quem cutuca e curte?!
(análise de tarefa basta?)

48. compartilhar links
quantificar
muito bom!
gostei disso
eu também
eu também [2]
eu também [3]
eu também [4]
Imagens encontradas no post “Des
de Frederick van Amstel!
http://fredvanamstel.com/blog/intera

49. contexto!
e contradições
Imagens encontradas no post “Design as M
de Frederick van Amstel!
http://fredvanamstel.com/blog/interaction-de

50. faceta
ética e moral
quais as valores, regras e negociações !
de uso e produção não estão na interface!
e quais estão?

52. Relações de Gêneroum exemplo:

53. Cadastro e perfil noVila Mulher

54. exemplo do IRC:
@ op para homens
+ voice para mulheres

55. faceta
política
como interfaces!
são reguladas!
quanto a regras!
e normas!
legais, sociais!
e políticas, !
visando certas!
interações?

56. faceta
ideologia
o modo como artefatos !
(como mapas e representações)!
são usados e produzidos!
refletem e/ou refratam ideias e ideais?

59. Cartografia de Mercator, 1569

60. diferentes mapas, diferentes ênfases
politico, geográfico, densidade, hidrográfico

61. diferentes cartografias, diferentes formas de representar o mundo
!
a questão das projeções cartográficas

64. mapa mundi antigo
eurocentrismo?

66. Joaquín Torres-García, 1941

68. mapa, representação e
usabilidade
um mapa precisa
representar fielmente o
mundo?

69. O Mapa da Discórdia. Revista Época.!
http://epoca.globo.com/colunas-e-blogs/faz-caber/noticia/2014/10/o-mapa-da-discordia.html

70. O Mapa da Discórdia. Revista Época.!
http://epoca.globo.com/colunas-e-blogs/faz-caber/noticia/2014/10/o-mapa-da-discordia.html

73. Quem ganhou por município? 2o turno Gazeta do Povo!
http://www.gazetadopovo.com.br/vidapublica/eleicoes/2014/mapa-apuracao-por-municipios-no-
brasil.phtml

74. Votos por município 2o turno. Gazeta do Povo!
http://www.gazetadopovo.com.br/vidapublica/eleicoes/2014/mapa-apuracao-por-municipios-no-
brasil.phtml

75. Volume de votos por estado. Estadão.!
http://www.estadao.com.br/infograficos/os-sete-mitos-das-eleicoes-2014,271980.htm

76. Mapa das diferenças. Estadão.!
http://infograficos.estadao.com.br/public/politica/resultado-eleicoes-2014/

77. visibilidade e circulação
de informação
google maps e as favelas

78. Cultura

79. The founder of the TED,
Richard Wurman, created
the phrase “information
architect” and a few of his
books helped drive the idea
of “information design”