Oficina de Introdução ao Design de Interação ministrada na especialização ESPWEB da UEM em maio de 2013.

1. Oficina: Introdução
ao Design de Interação
Rodrigo Freese Gonzatto
maio de 2013

2. Rodrigo Gonzatto
Formação:
‣ Bacharel em Comunicação Social
‣ Especialista em Design de Interação
‣ MsC. em Tecnologia e Sociedade
Professor:
‣ Graduação:
PUCPR - Design Digital - Hipermídia
‣ Pós-graduação:
UTFPR Londrina - Design de Interação

3. Rodrigo Gonzatto
Atuação profissional:
‣ Agências de publicidade e comunicação
‣ Mídias Sociais (Crânio)
‣ Indústria (Hi Technologies)
‣ Consultorias, projetos e treinamentos
(InfoGlobo, Electrolux, Dataprev, PUCPR, CBV, Mídia
Digital, Redirect e WebgoaI)

4. Design Livre
Fundamentos teóricos
do Design de Interação
Arte & Tecnologia
Relações entre
Tecnologia e Sociedade
Novas mídias e questões
étnicas e de gênero

5. Objetivos da oficina
• Desenvolver um projeto de interatividade
• Conhecer alguns métodos e técnicas comuns
no Design de Interação
• Sentir na prática algumas das características
do processo de design

6. Cronograma
Manhã
• Apresentação
• Problematização
• Criação (concepção)
Tarde
• Criação (prototipação)
• Avaliação
• Encerramento

7. Cronograma
Manhã
• O que é Design de Interação?
• Personas, Cenários, Sistema da Atividade
• Brainstroming, Sketch, Fluxogramas
Tarde
• Wireframes, Storyboard,
• Prototipação em Papel
• Análise Heurística,Teste de Usabilidade

8. O que é Design de Interação?
• Estuda o projeto das interações humanas
mediadas por artefatos interativos, ou seja,
objetos que participam ativamente da ação humana
• O designer de interação pesquisa, projeta e
adapta artefatos websites, softwares, celulares,
tablets, videogames, entre outros.

9. O que é Design de Interação?
• Campo de pesquisa interdisciplinar
• Origens: Design Participativo (Sistemas de Informação)
Interação Humano Computador (Computação) /
+ Design

10. O que é Design de Interação?
• Não é Computação, mas também.
• Não é apenas Interação Humano-Computador.
• É diferente de Design de Interfaces (e de Webdesign).

11. O “Design”
do Design de Interação
• Prototipação: pensar com materiais
• Iteração: processo não-linear
• Colaboração
• Pesquisa com usuários
“Um sistema não funciona
se quem o utiliza não dá sentido à ele”

12. A “Interação”
do Design de Interação
• Inter - Entre
• A +B = C
• O designer de interação: de avaliador de telas e criador
de interfaces até pesquisador de nichos de mercado
“A interação não está somente no sistema
ou somente em quem usa. É mediação.”

13. Breve histórico
Fatores Humanos
linha de comando
um computador
para muitos
Ergonomia
IHC
interface gráfica
um computador,
uma pessoa
Psicologia
Design de Interação
interfaces tangíveis,
dispositivos móveis,
afetividade...
uma pessoa,
vários computadores
Design
Ciências Sociais
Antropologia
Filosofia
Computação Ciências Cognitivas
Arquitetura
Arte
Comunicação

14. Sistema
// @ #
& * %
usuário como
computador

15. ENIAC “girls” (década de 40)

16. Parceiro de discurso
computador
como pessoa
I.A.

18. Ferramenta
trabalho
ou produto
+ = ==

19. Sistema STAR da Xerox (1981)

20. Mídia / Linguagem
DxI

21. Windows Phone e Facebook

24. 1. Formar seis ou oito grupos
2. Ajeitar mesas para trabalho em
grupo :)
3. Receber materiais de colaboração
4. Escolher um dos briefings que
serão apresentados a seguir...
PREPARAÇÃO

25. Para dar base aos nossos projetos:
‣ Educação
‣ Entretenimento
‣ Monitoramento
‣ Relacionamentos
BRIEFING

26. Briefing A: Educação
• Interação entre professores e alunos
• Uma escola de Ensino Médio deseja que todos os
professores utilizem tablets em sala de aula,
conectados à internet.
• Como melhorar o ensino e o aprendizado na sala de
aula?
• Porém, a escola deseja utilizar os tablets como algo
mais do que um “caderno digital”, mais do que um
modo do professor passar a matéria.

27. Briefing B: Entretenimento
• Interação entre a família
• Um canal de TV deseja aumentar o número de
espectadores, reunindo a família para assistir um
programa de reality show.
• Este canal especula que a criação de um site para
funcionar como segunda tela (em dispositivos móveis)
pode ser uma solução.
• Como oferecer uma experiência significativa que integre
a família, mas sem que o canal precise criar conteúdo
exclusivo?

28. Briefing C: Monitoramento
• Interação entre pais e filhos
• Celulares com internet dão acesso à todo tipo de
informação e comunicação. Mas será que os pais querem
que seus filhos tenham contato com tudo?
• Uma empresa está pensando em criar uma interface para
celulares para estes pais preocupados comprarem.
• Entretanto, o foco deste sistema são pais que não querem
enganar seus filhos, nem mentir ou espioná-los, mas não
encontram alternativas nos sistemas de monitoramento
atuais, nem nos celulares disponíveis.

29. Briefing D: Relacionamentos
• Interação entre pessoas em uma festa
• Uma casa noturna quer promover a paquera/flerte.
Pensou em algo como um "correio elegante" digital.
• Pensa a princípio em um site acessível pelo celular, mas
pode-se instalar um telão na boate também.
• Entretanto, a casa noturna não quer que nenhum dos
usuários sejam incomodados ou se sintam ofendidos, e
tem uma preocupação com questões de gênero: tem
foco em públicos hétero e LGBT, não quer discriminar
mas quer promover a interação do flerte.

30. Processo
• Pesquisa
Levantamento do requisitos e informações para
definição dos objetivos do projeto.
• Ideação e prototipação
Geração de ideias e possibilidades.
• Testes
Avaliações com e sem usuários para melhorar
protótipos ou o produto final.

31. Modelo funil
(Karine Drummond)

32. Diverge Converge
especifica
definições
compreensão
explora
possibilidades
ambiguidade
pesquisa > requerimentos > design >
testes com
usuários
refinamento
do protótipo
>

33. PREECE, ROGERS & SHARP
pesquisa > requerimentos > design >
testes com
usuários
refinamento
do protótipo
>

34. Modelo cíclico
(Rodrigo Gonzatto)

35. Cronograma
• Problematização
• Criação (concepção)
• Criação (prototipação)
• Avaliação

36. PROBLEMATIZAÇÃO
1. elaborar as Personas
2. desenvolver Cenários
3. analisar a(s) atividade(s) e
compreender Sistema da Atividade

37. Geradores de avatar online:
Mangá, Mii, Meez
Personas
"Modelos" de usuários que servem comocritérios para um projeto e sintetizam dadoscoletados em pesquisas

38. Persona 3: Luigi
Garçom, 30 anos, Brasileiro
Carismático, espontâneo, fala com as mãos. É
agitado, mas se distrai conversando com clientes
ou com outros garçons com muita facilidade.
Tecnologia: usa muito o celular, que é um modelo bem simples,
mas mais para ligar e mandar mensagens. Internet tem foco
social: MSN, Orkut, Facebook, e-mail.
Rotina: Chega um pouco antes do restaurante abrir apenas para
colocar o avental, pois já vem com a roupa e cabelo arrumados.
Vai embora assim que sai o último cliente (ou seja, após as 00:00
em dias normais e depois das 5:00 em finais de semana).

41. Sugestões de itens
• Desenho/rascunho da persona
• Nome e idade
• Relacionamento com família e amigos
• Educação, trabalho e hobbies
• Personalidade: introvertido/extrovertido?
• Qual a sua rotina?
• Quais suas motivações?
• Como se relaciona com tecnologia? Que aparelhos usa?

42. O aluno de Psicologia, Jair Araújo,
casou-se e decidiu trancar seu curso
pois não está conseguindo acompanhar
as aulas e deseja trabalhar mais no
momento.
Utilizando um computador do
trabalho, ele recorre ao website da
universidade para saber por quanto
tempo poderá trancar seu curso.
Cenárioscom personas
descrições de situações hipotéticas
em que são colocadas pessoas que
interessam ao projeto

44. Cenários
• Devem ajudar a visualização da pessoa agindo em um
contexto, a partir de uma motivação
• Quem?
• Faz o quê?
• Onde faz?
• Como faz, com o que?
• Porquê faz?

45. Sistema da Atividade
• Projetar os artefatos (sistemas, dispositivos, sites, etc)
para dar suporte às atividades das pessoas
• Mais do que que teclas as pessoas apertam, ou a
sequência de cliques que pressionam:
O que as pessoas fazem? (atividade)
• O sistema (informático) deve se adaptar ao sistema
(social)

46. Pessoas
Artefatos
Atividades

47. pessoas objetivo
Vygotsky

48. pessoas objetivo
instrumentos
Vygotsky

49. Engestrom
objetivo

50. ATIVIDADE
1. elaborar as Personas
2. desenvolver Cenários
3. analisar a(s) atividade(s) e
compreender Sistema da Atividade

51. CRIAÇÃO
1. Gerar muitas ideias realizando um
brainstorming e conversando
2. Rabiscar (prototipação em baixa
fidelidade) fazendo sketches e
colaborando com outros sketches
3. Anotar tudo em modelos conceituais

54. especifica
definições
compreensão
explora
possibilidades
ambiguidade
Diverge Converge

55. Diverge Converge
primeiras
ideias
ideia
para ser
desenvolvida
análise e
descarte
muitas
possibilidades
geração
(tese e
antítese)
início
do projeto
final
do projeto

57. Prototipação
• Pode ter diferentes propósitos
(demonstrar, testar, explorar)
• Protótipos podem ser
em baixa fidelidade ou alta fidelidade
• Podem não ter funcionalidades, ou serem funcionais
ou semi-funcionais
• É um tipo de comunicação e de documentação

58. Sketches
Prototipação em
baixa fidelidade

59. Protótipos em baixa
ou em
alta fidelidade
Protótipos

60. Protótipo em baixa
fidelidade

61. Protótipo em alta
fidelidade

62. Sketchs ou
Rabiscos

66. Cubezilla

67. Sketches de Jonas Lowgren

68. Brainstorming
Objetivo: máximo de ideias possível.
Não inibir os demais: ambiente de
liberdade = criatividade.
Que ajuda a evitar a
conformidade
E writestorming
também!

69. Sobre Writestorming
Vídeos de Psicologia:
Testes de conformidade

70. Anotação de ideias
• Não ficar nas listas! Tornar visual! :)
• Modelos conceituais
• Diagrama de afinidades

71. • Arquivar
◦ Tagear
■ Agrupar tags
• Compartilhar
◦ Indicar para amigos
◦ Linkar no blog
■ No post
■ Na linkroll
◦ Fornecer RSS Feeds
◦ Compartilhar tags
• Reencontrar
◦ Buscar por palavra-chave
◦ Filtrar por tags
■ Ver tags relacionadas
• Descobrir
◦ Nos populares
◦ Indicados por amigos
◦ Assinados
■ Tag X
■ Usuário Y

73. Diagrama de afinidades

76. Flickr User Model,
Bryce Glass

78. Diagrama de
afinidades

80. Criatividade: Brainstorming
e prototipação com sketches
• Fazer sessões de brainstorming ou writestorming para
aquecer
• Gerar o máximo de ideias possíveis. Não ironizar
ideias absurdas >:’(
• Anotar todas as ideias em post-its.
Sempre que possível, anotar de forma visual (sketche)
• Grudar os post-its no A3, por afinidades, formando
modelos conceituais.

81. ATIVIDADE
1. Gerar muitas ideias realizando um
brainstorming e conversando
2. Rabiscar (prototipação em baixa
fidelidade) fazendo sketches e
colaborando com outros sketches
3. Anotar tudo em modelos conceituais

82. CRIAÇÃO
1. Criação dos primeiros fluxos de
interação
2. Prototipação em papel dos
Wireframes

83. Navegação e tempo
• O tempo é um dos diferenciais
do Design de Interação perante
outras disciplinas de UX
• Interações possuem
andamentos, ritmos
• Narrativa, Ritmo e Dança:
conduzir e ser conduzido
Parangolé

84. Interface gráfica do StepMania.
Conduza seu corpo (pés, olhos, pernas...) de acordo com os sinais exibidos.

85. Texto
Interface gráfica do Rock Band.
Conduza seu corpo (dedos, olhos, mãos, braços...) de acordo com os sinais exibidos.

86. A dança dos dedos
Conduza a ponta dos seus dedos...

87. Interface do Gtalk. O “Pessoa está digitando...” indica que algo está acontecendo e
também de que algo está para acontecer (chegar a mensagem). Muda a forma de interagir.

88. Interface de Add-on no Firefox. Ele não permite que você clique instantaneamente
no botão “Instalar”, obrigando a esperar 3 segundos. Com isso sugere um breakdown.

90. Sites de download: versões pagas e gratuitas. Velocidade e lentidão como argumento
para compra de um serviço do site. O design visual força a ideia de que ter que esperar é ruim.
Mas porque 19 minutos é lento se, em alguns lugares (ou no passado), era rápido?

91. Antiga tela de erro do orkut

94. Diagramas

95. Humano Computador
Interação
Como formalizar / diagramar?

97. Diagrama de Navegação,
Sitegrama ou Mapa do site
+ Computador

100. Representa a interação
entre papéis de usuários
Diagrama Sequencial
+ Humano

102. Diagrama Sequencial
Negativo

103. Fluxograma
ou fluxo de tarefa
+ Interação

106. Planejamento da Curva
de Aprendizado

108. 0
22,5
45
67,5
90
1 semana 2 semanas 3 semanas 4 semanas
Adobe Photoshop
Corel Photopaint

109. Prototipação:
wireframes

110. Wireframe Momento de definição:
especificação

112. Wireframe

113. Protótipo em alta fidelidade

114. Sketche: protótipo em baixa fidelidade

116. Protótipo em papel

117. Mockup
Protótipo que permite testar
funcionalidades com usuários

118. Wireflow

120. ATIVIDADE
1. Criação dos primeiros fluxos de
interação
2. Prototipação em papel dos
Wireframes
Convergente!

121. AVALIAÇÃO
1. Avaliação das telas pelas
heurísticas de Nielsen
2. Teste de Usabilidade

122. Análise cognitiva
O que o usuário
precisa saber?
O que a interface
explica?
Propiciação
O que o usuário
precisa lembrar?
O que a interface
armazena?
Memória
O que o usuário
pode descobrir?
O que a interface
propõe?
Descompasso

123. Avaliação heurística
• Tipo de avaliação de especialista, na qual os avaliadores
baseiam-se em princípios de usabilidade próprios ou
desenvolvidos por outros especialistas.
• Uma heurística é uma regra indutiva, baseada na
experiência, e exposta de forma sintética

124. Ação crítica ao lado de ação
rotineira (Heurística 2 -
Prevenção de erros)

125. Botão soneca
destacado
(Heurística 7 -
Atalhos)
Auto é pra ligar o rádio quando
tocar o alarme, mas não está
claro isso. (Heurística 2 -
Linguagem familiar)

126. Heurísticas de Nielsen
1. Percepção do Status do Sistema (feedback)
2. Falar a linguagem do usuário (utilizar uma linguagem familiar,fazendo o sistema e o
mundo real corresponderem)
3. Saídas claramente demarcadas (controle e liberdade de utilização - atalhos,
opções,desfazer,sair...deve estar claro e ser possível)
4. Consistência e padrões (uma mesma ação deve sempre ter o mesmo efeito)
5. Prevenção de erros
6. Minimizar a sobrecarga de memória do usuário (memória curta e aprendizado)
7. Os utilizadores inexperientes e especialistas utilizam os sistemas
diferenciadamente (oferecer atalhos,por exemplo)
8. Estética e design minimalista (oferecer a informação que o usuário precisa no
momento,nem mais nem menos)
9. Ajudar os utilizadores a reconhecer,diagnosticar e corrigir os erros (construir
boas mensagens de erro,contextualizar e explicar o que acontece no sistema)
10. Ajuda e Documentação

127. Etapas da avaliação heurística
1. Escolher os avaliadores
2. Definir as heurísticas a serem utilizadas
3. Executar a avaliação
4. Cada problema encontrado deve ser relacionado à
uma heurística
5. Promover a discussão entre os avaliadores
6. Redigir relatório
7. Priorizar problemas encontrados

128. Teste de Usabilidade
• Permite compreender melhor a interação do usuário
com um produto
• Receber feedback sobre o design
• Avaliar situação
• Comparar com a concorrência e convencer chefes e
equipes ;)
• Pode ser realizado em laboratório, em contexto ou a
distância

129. Laboratório de Usabilidade

131. Eye-tracking
Áreas onde o usuário
fixou o olhar
Caminho do olhar

132. Métricas
• Eficiência
• Tempo de execução da tarefa
• Taxa de erros
• Eficácia
• Taxa de conclusão da tarefa
• Satisfação
• Questionário de avaliação subjetiva

133. Exemplo de questionário de satisfação pós-teste

134. ATIVIDADE
1. Avaliação dos projetos
apresentados pelas heurísticas de
Nielsen

135. APRESENTAÇÃO
• Apresentação dos projetos dos
grupos!

136. Para se aprofundar...
• Barbosa e Silva - Interação Humano Computador
• Usabilidoido: www.usabilidoido.com.br
• Saffer - Designing for Interaction
• Cooper - About Face 3
• Dan Brown - Communication Design
• Information Architecture
for theWorldWideWeb

137. Obrigado!
Rodrigo Freese Gonzatto
www.gonzatto.com
rodrigo@gonzatto.com