um panorama rápido sobre o design de interação e alguns métodos que podem ser utilizados.

1. Instituto Faber-Ludens
Edyd Junges (@edyd)
Instituto Faber-Ludens (@faberludens)

2. nós estamos aqui
O Instituto Faber-Ludens está sediado em Curitiba

3. Instituto Faber-Ludens
• Entidade sem fins lucrativos fundada em 2007
• Promover Design + Tecnologia = Inovação Social
• Quatro áreas de atuação
• Ensino
• Pesquisa
• Consultoria
• Projetos Sociais

4. Áreas de Atuação

5. Lego Mindstorms
Arduino
Especialização Design de Interação
Experiências na Pós-Graduação em Design de Interação com Post-It,
Lego Mindstorms e Arduino.

6. Treinamentos In-Company com dinâmicas práticas e divertidas sobre
os assuntos que as empresas precisam dominar

7. Consultorias
Avaliação de UX Bootcamp Teste de
Usabilidade InfoGlobo, Goomark Usabilidade
RioShow Webgoal, ApolloTI Electrolux

9. Estratégia de Design
em corporações
Diretoria
Design
Thinking
Design
Design
Participativo
Produção

10. “Nada substitui o ser-humano.”
Instituto Faber-Ludens

11. Design de Interação

12. O que é Design de Interação?
Design de Interação é uma área
profissional, uma sub-disciplina do Design
e um processo voltado ao projeto das
interações entre pessoas e sistemas.

13. Diferencial
Engenharias
IHC / Design de Interface
Design de Interação
Antropologia / Marketing

14. Pare de projetar produtos.
A experiência é a única coisa
com que o usuário se importa.”
Peter Merholz, Adaptive Path, 2006

15. User Experience (UX) são aqueles momentos na vida em que tudo está
perfeito ao seu redor.

16. Design é o projeto de ambientes, produtos e serviços visando
uma User Experience integrada.

17. Outback

18. As empresas só investem quando o negócio fica grave...

19. Recall feito para resolver o problema do Fox

20. Experiência do Usuário não é requisito. É estratégia.

21. Sistemas são ecologias

22. A base para seu projeto deve ser a atividade humana

23. Os Três Pilares do produto,
Donald Norman
Produto
Marketing Design
Engenharia

24. O objetivo da Engenharia é que o produto funcione.

25. O objetivo do Marketing é que o consumidor compre.

26. Enquanto o Marketing se vale da Propaganda para atrair a
atenção, o Design trabalha a sedução pelo próprio produto.

27. o que o o que a administração o que foi
marketing aprovou projetado pela
sugeriu engenharia
o que foi como foi montado o que o
produzido consumidor
queria...

28. Processo de desenvolvimento comum
Engenharia
Marketing Marketing

29. Vantagens/Desvantagens
• Economiza planejamento
• Tentativa e erro
• Design não é importante
• O produto é um frankestein de
funcionalidades
Office XP

30. Design como embelezamento
Marketing
Engenharia Design
Marketing

31. Vantagens/Desvantanges
• Beleza vende
• Que inovação é possível a essa
altura do campeonato?
Windows Vista

32. Ainda é um porco!

33. Design como inovação
Design
Marketing Engenharia
Marketing

34. Vantagens/Desvantagens
• Melhora a qualidade
• Economiza retrabalho
• Diminui a velocidade
• Risco de não obter retorno
Office 2007

35. Design como estratégia
Design
Engenharia
Marketing Marketing

36. Vantagens/Desvantagens
• Integra Pesquisa & Desenvolvimento
• Aumenta o ritmo de inovação
• Fortalece a marca
• Custo elevado
• Depende da cultura organizacional
Loja Apple em
Nova Iorque

37. inovação
qualitativa
sem competição competição pela
qualidade
novo mercado
mercado saturado
início da
competição
competição pela
inovação quantidade
quantitativa

38. Recursos para criar
• Fala
• Rabiscos
• Brainstorming
• Cenários hipotéticos

39. Etnografia
Busca a compreensão aprofundada do
comportamento a partir da observação
de situação reais.

40. Estudos etnográficos sobre uso de TV Móvel realizados pela Nokia

42. “Etnografia” virtual
Estudo etnográfico realizado no espaço
digital, baseado na participação em redes
sociais na web.

45. Algumas palavras-chave dos boleiros:
moral (e não "força",por exemplo)
fera (e não "jogador",por exemplo)
time (e não "equipe",por exemplo)

46. Prototipação
das representações
visuais das interfaces
• Propósito (demonstrar,testar,explorar)
• Fidelidade (alta,baixa)
• Funcionalidade (funcional,semi-funcional)
• Etapa e Competência técnica

47. Sketchs ou
Rabiscos
Liberte-se!

48. Criando possibilidades

49. Focalizando no que é viável

50. Storyboard
Ferramenta para edição
de quadrinhos online: Pixton

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

54. Diagrama Sequencial
Negativo

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

57. Wireflow

58. Protótipo em papel

59. Teste com protótipo
• Portátil
• Arquivos HTML apenas com as
opções de menu
• Tarefas de recuperação de
informação

61. Protótipo em alta
fidelidade

62. Muito + no Corais.org
+ acompanhamento (shadowing)
+ fly on the wall
+ diários de uso continuado
+ sondas culturais (cultural probes)
+ história de vida
+ um dia na vida (real ou simulado)
+ levantamento demográfico
+ questionários
+ porquê,porquê,porquê

63. Livro colaborativo
http://designlivre.faberludens.com.br

64. Obrigado!
Edyd Junges (@edyd)
edyd.junges@faberludens.com.br
Instituto Faber-Ludens
www.faberludens.com.br