Your SlideShare is downloading. ×
0
Campus Party_Design do dia a dia #Cpbr7
Campus Party_Design do dia a dia #Cpbr7
Campus Party_Design do dia a dia #Cpbr7
Campus Party_Design do dia a dia #Cpbr7
Campus Party_Design do dia a dia #Cpbr7
Campus Party_Design do dia a dia #Cpbr7
Campus Party_Design do dia a dia #Cpbr7
Campus Party_Design do dia a dia #Cpbr7
Campus Party_Design do dia a dia #Cpbr7
Campus Party_Design do dia a dia #Cpbr7
Campus Party_Design do dia a dia #Cpbr7
Campus Party_Design do dia a dia #Cpbr7
Campus Party_Design do dia a dia #Cpbr7
Campus Party_Design do dia a dia #Cpbr7
Campus Party_Design do dia a dia #Cpbr7
Campus Party_Design do dia a dia #Cpbr7
Campus Party_Design do dia a dia #Cpbr7
Campus Party_Design do dia a dia #Cpbr7
Campus Party_Design do dia a dia #Cpbr7
Campus Party_Design do dia a dia #Cpbr7
Campus Party_Design do dia a dia #Cpbr7
Campus Party_Design do dia a dia #Cpbr7
Campus Party_Design do dia a dia #Cpbr7
Campus Party_Design do dia a dia #Cpbr7
Campus Party_Design do dia a dia #Cpbr7
Campus Party_Design do dia a dia #Cpbr7
Campus Party_Design do dia a dia #Cpbr7
Campus Party_Design do dia a dia #Cpbr7
Campus Party_Design do dia a dia #Cpbr7
Campus Party_Design do dia a dia #Cpbr7
Campus Party_Design do dia a dia #Cpbr7
Campus Party_Design do dia a dia #Cpbr7
Campus Party_Design do dia a dia #Cpbr7
Campus Party_Design do dia a dia #Cpbr7
Campus Party_Design do dia a dia #Cpbr7
Campus Party_Design do dia a dia #Cpbr7
Campus Party_Design do dia a dia #Cpbr7
Campus Party_Design do dia a dia #Cpbr7
Campus Party_Design do dia a dia #Cpbr7
Campus Party_Design do dia a dia #Cpbr7
Campus Party_Design do dia a dia #Cpbr7
Campus Party_Design do dia a dia #Cpbr7
Campus Party_Design do dia a dia #Cpbr7
Campus Party_Design do dia a dia #Cpbr7
Campus Party_Design do dia a dia #Cpbr7
Campus Party_Design do dia a dia #Cpbr7
Campus Party_Design do dia a dia #Cpbr7
Campus Party_Design do dia a dia #Cpbr7
Campus Party_Design do dia a dia #Cpbr7
Campus Party_Design do dia a dia #Cpbr7
Campus Party_Design do dia a dia #Cpbr7
Campus Party_Design do dia a dia #Cpbr7
Campus Party_Design do dia a dia #Cpbr7
Campus Party_Design do dia a dia #Cpbr7
Campus Party_Design do dia a dia #Cpbr7
Campus Party_Design do dia a dia #Cpbr7
Campus Party_Design do dia a dia #Cpbr7
Campus Party_Design do dia a dia #Cpbr7
Campus Party_Design do dia a dia #Cpbr7
Campus Party_Design do dia a dia #Cpbr7
Campus Party_Design do dia a dia #Cpbr7
Campus Party_Design do dia a dia #Cpbr7
Campus Party_Design do dia a dia #Cpbr7
Campus Party_Design do dia a dia #Cpbr7
Campus Party_Design do dia a dia #Cpbr7
Campus Party_Design do dia a dia #Cpbr7
Campus Party_Design do dia a dia #Cpbr7
Campus Party_Design do dia a dia #Cpbr7
Campus Party_Design do dia a dia #Cpbr7
Campus Party_Design do dia a dia #Cpbr7
Campus Party_Design do dia a dia #Cpbr7
Campus Party_Design do dia a dia #Cpbr7
Campus Party_Design do dia a dia #Cpbr7
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Campus Party_Design do dia a dia #Cpbr7

3,790

Published on

Palestra Melina Alves na Campus Party 2014. Arquitetura da Informação e User Experience na influência de design de produtos do dia a dia.

Palestra Melina Alves na Campus Party 2014. Arquitetura da Informação e User Experience na influência de design de produtos do dia a dia.

Published in: Technology, Business
0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,790
On Slideshare
0
From Embeds
0
Number of Embeds
20
Actions
Shares
0
Downloads
20
Comments
0
Likes
6
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. DESIGN DO DIA A DIA Arquitetura de Informação e User Experience #Cpbr7 2014 !1
  • 2. Melina Alves Bianca Brancaleone Ex-UX Líder da Insula e NeogamaBBH, iThink, 
 Razorfish. Ex-Atrativa Games, Virgula, MMCafé, iG, iThink, Webgoal.
  • 3. Melina Alves Bianca Brancaleone
  • 4. + 30 
 Pesquisadores, 
 Filósofos e Psicólogos coworkers Arquitetos 
 da Informação Infografistas Designers 
 de Interação Gerentes 
 de Projetos Sound and Video
 Designers Redatores; 
 SEM & SEO Visual 
 Designers Arquitetos e Urbanistas Designers de estratégias
  • 5. Nymi by Bionym play
  • 6. As pessoas gostam isso? De que forma elas desejam? Envolve aspectos culturais? Qual a rotina dessas pessoas? E onde encaixar um sistema? Qual a hierarquia das informações em cada necessidade? O acesso é simplificado? Quando elas acessam é confortável, emociona, compartilha? …
  • 7. 2006 October 10th, 2006 by Kimmy Paluch Print-Friendly Version Correlação das áreas que criam o design da interface do usuário e, por sua vez, sua experiência ! ! ● ● ● ● Arquitetura da Informação Interação Humano Computador Design de Interação Usabilidade http://www.montparnas.com/articles/what-is-user-experience-design/
  • 8. 2008 by DAN SAFFER Correlação das áreas que criam o design da interface do usuário e, por sua vez, sua experiência ! ! ● ● ● ● Arquitetura da Informação Interação Humano Computador Design de Interação Usabilidade http://www.kickerstudio.com/2008/12/the-disciplines-of-userexperience/
  • 9. 2008 by DAN SAFFER Correlação das áreas que criam o design da interface do usuário e, por sua vez, sua experiência ! ! ● ● ● ● ● ● ● ● ● ● ● Arquitetura da Informação Interação Humano Computador Design de Interação Usabilidade Visual Design Arquitetura Engenharia Design Industrial Criação de Conteúdo Engenharia Elétrica Engenharia Mecânica ! ! http://www.kickerstudio.com/2008/12/the-disciplines-of-userexperience/
  • 10. 2009|2013 by DAN SAFFER (redesigned by envis precisely GmbH 2009 | 2013 Correlação das áreas que criam o design da interface do usuário e, por sua vez, sua experiência ! • • • • • • • • • • • • • ! Arquitetura da Informação Interação Humano Computador Design de Interação Ergonomia Usabilidade Visual Design Arquitetura Engenharia Design Industrial Criação de Conteúdo Engenharia Elétrica Engenharia Mecânica Ciência da Computação http://www.envis-precisely.com
  • 11. BENEFÍCIOS DE USER EXPERIENCE DESIGN • UXD é um componente essencial para produção e iniciativas em softwares, porque gera cases de negócio mais efetivos ! • Promove engajamento e experiências interativas entre consumidores e negócio, ou entre os negócios das pessoas e seus sistemas de informação ! • Cuida da maneira como as pessoas trabalham, pensam, e consomem informações ! • Estabelece significados mais ricos e comunicação mais colaborativas ! • Reduz frustrações e cria processos mais intuitivos ! • Distingue produtos, serviços e marcas para que possam ganhar mais competitividade ! • Desenvolve sistemas que possam crescer em escala e se adaptar as mudanças que os usuários precisam e com foco em comportamento ANDERSON, MCREE, John; WILSON; ROBB Wilson; Effective UI: The Art of Building Great User Experience in Software - O’REILLY - 2010
  • 12. ESTAMOS CRIANDO PRODUTOS
  • 13. UX + COMPORTAMENTO APRENDIZADO/ COMPORTAMENTO “Comportamentalismo:
 Psicologia.” “Froid: ! RELAÇÃO SÓCIOCULTURAL “...linguagens são reveladoras de nossas marcas e das mudanças que somos capazes
 de empreender…” ! MELO, Eliana; PRADOS, Rosália; GRARCIA, Wilton: Linguagens, tecnologias, culturas: discursos contemporâneos. Ed.Fatash Editora- 2008 - pg. 11 e 135 @melinalves #ficaadica ! ! ! ! ! BANCO
 DE REFERÊNCIAS “Todos os sites, exposições, filmes, informações para montar sua rede de pesquisa, benchmarking
 e banco de ideias” ! ! ! ! !
  • 14. EXPERIÊNCIA REAL
  • 15. "20
  • 16. "21
  • 17. "22
  • 18. "23
  • 19. "24
  • 20. "25
  • 21. EXPERIÊNCIA DIGITAL OU INTERATIVA
  • 22. Melina Alves PUC-RS - 2012 #Cpbr - 2014 "27
  • 23. Melina Alves PUC-RS - 2012 #Cpbr - 2014 "28
  • 24. Melina Alves PUC-RS - 2012 #Cpbr - 2014 "29
  • 25. Melina Alves PUC-RS - 2012 #Cpbr - 2014 "30
  • 26. Melina Alves PUC-RS - 2012 #Cpbr - 2014 "31
  • 27. Melina Alves PUC-RS - 2012 #Cpbr - 2014 "32
  • 28. Melina Alves PUC-RS - 2012 #Cpbr - 2014 "33
  • 29. Melina Alves PUC-RS - 2012 #Cpbr - 2014 "34
  • 30. Melina Alves PUC-RS - 2012 #Cpbr - 2014 "35
  • 31. Melina Alves PUC-RS - 2012 #Cpbr - 2014 "36
  • 32. Melina Alves PUC-RS - 2012 #Cpbr - 2014 "37
  • 33. Melina Alves PUC-RS - 2012 #Cpbr - 2014 "38
  • 34. Melina Alves PUC-RS - 2012 #Cpbr - 2014 "39
  • 35. Melina Alves PUC-RS - 2012 #Cpbr - 2014 "40
  • 36. Melina Alves PUC-RS - 2012 #Cpbr - 2014 "41
  • 37. Melina Alves PUC-RS - 2012 #Cpbr - 2014 "42
  • 38. Melina Alves PUC-RS - 2012 #Cpbr - 2014 "43
  • 39. “experiência do 
 usuário está 
 cada vez 
 mais próxima da imersão entre soluções 
 digitais e reais” Melina Alves PUC-RS - 2012 #Cpbr - 2014 "44
  • 40. Melina Alves PUC-RS - 2012 #Cpbr - 2014 "45
  • 41. HISTÓRIAS (informações que as pessoas contam que vem carregadas de ideias) - ! VALOR PRÁTICO 
 (notícias que podem ser usadas) ! PÚBLICO
 (“built to show, built to grow”) ! EMOCIONAIS 
 (“when we care we share”) ! TRIGGERS 
 (top of mind, tip of tongue) ! CAPITAL SOCIAL 
 (o que faz as pessoas parecerem melhores) http://www.maximsherstobitov.com/6-secrets-that-make-people-share/#sthash.q80xypc3.dpuf "46
  • 42. USER EXPERIENCE DESIGN
 ponto de vista da Arquitetura da Informação
  • 43. Arquitetura da Informação Os três círculos da Arquitetura de Informação ! ! ● Conteúdo (o que vai usado?) ● Contexto (como vai ser usado?) ● Usuário (por quem vai ser usado?) http://semanticstudios.com/publications/semantics/000029.php
  • 44. The User Experience Honeycomb ! ! ● ● ● ● ● ● ● Útil Desejável Acessível Confiável Encontrável Utilizável Valioso http://semanticstudios.com/publications/semantics/000029.php
  • 45. Diagrama da Experiência do usuário - Do mais ao menos consciente ! ● ● ● ● ● ● ● ● Linguagem escrita Design gráfico Som Movimento Design da Informação Design da Interface Design de Interação Programação
  • 46. 10 Heurítiscas de Nielsen by JAKOB NIELSEN 1995 http://www.nngroup.com/articles/ten-usability-heuristics
  • 47. 1 - Visibilidade do status do sistema Feedback O sistema deve sempre manter os usuários informados sobre o que está acontecendo, através de feedback apropriado e dentro de um tempo razoável.
  • 48. 2 - Combinação entre o sistema e o mudo real Linguagem adequada O sistema deve falar a linguagem do usuário, com palavras, frases e conceitos familiares ao usuário no lugar de termos orientados ao sistema. Siga convenções do mundo real, fazendo as informações aparecerem em uma ordem natural e lógica.
  • 49. 3 - Controle do usuário e liberdade Usuários sempre escolhem funções erradas e vão precisar de uma “saída de emergência” claramente marcada para sair do estado indesejado sem maiores problemas. Permita desfazer e refazer.
  • 50. 4 - Consistência e padrões Usuários não devem ter que se preocupar se palavras diferentes, situações ou ações significam a mesma coisa. Siga as convenções.
  • 51. 5 - Prevenção de erro Melhor que ter boas mensagens de erro é ter um design cuidadoso que previne um problema antes de acontecer. 
 Elimine condições de erro ou os conheça e apresente aos usuários uma opção de confirmação antes dele prosseguir com a ação. ! “NESSE MUNDO MOBILE, SOMOS TODOS DALTÔNICOS E SOFREMOS MAL DE PARKINSON”
 Luli Radfahrer Digital Talks RJ - 2013
  • 52. 6 - Reconhecimento é melhor que lembrança Reduza a carga de memória do usuário Objetos, ações e opções devem estar visíveis. ! O usuário não deve ter que lembrar informação de uma parte do diálogo em outra parte. ! Instruções para o uso do sistema devem estar visíveis ou facilmente recuperáveis sempre que necessário.
  • 53. 7 - Flexibilidade e eficiência no uso Atalhos Atalhos que não são vistos pelos usuários leigos - podem aumentar a velocidade na interação para usuários experientes. Assim, o sistema pode atender tantos os usuários inexperientes como os experientes.
 Permita que os usuários configurem ações frequentes.
  • 54. 8 - Estética e design minimalista Diálogos não devem ter informações irrelevantes ou raramente usados. 
 Cada unidade de informação extra em um diálogo compete com unidades relevantes de informação e diminui a sua visibilidade.
  • 55. 9 - Ajude o usuário a reconhecer, diagnosticar e recuperar erros Mensagens de erro devem ser expressadas em linguagem (sem código) indicando precisamente o problema, e sugerir uma solução construtiva.
  • 56. 10 - Ajuda e documentação É melhor que o sistema possa ser usado sem documentação, mas pode ser necessário ter um para oferecer ajuda. Qualquer informação deve ser fácil de procurar, focando na tarefa do usuário, listando passos concretos e sem ser muito extenso.
  • 57. usabilitygeek.com USER EXPERIENCE DESIGN
 ponto de vista Humano _ IHC
  • 58. Donald Norman “Um método importante de tornar os sistemas mais fáceis de aprender e usar é torná-los exploráveis, encorajar o usuário a fazer experiências e aprender as possibilidades através de exploração ativa. É assim que muitas pessoas aprendem a usar utensílios domésticos ou um novo sistema de som, aparelho de televisão ou videogame: apertando os botões enquanto escutam e observam, para ver o que acontece.”
  • 59. Out of the box from Vitamins play
  • 60. Convidando a experimentação “Em cada estado do sistema, o usuário tem de ver prontamente e ser capaz de fazer todas as ações permissíveis. 
 
 A visibilidade atua como uma sugestão, recordando ao usuário as possibilidades e convidando à exploração de novas idéias e métodos.”
  • 61. Affordance “Propiciação real é fornecida pelo teclado (apertar de teclas), pelo mouse (clique), pelo monitor touchscreen (apontar) e etc.”
  • 62. Affordance para Design de Interação “Propiciação percebida são as dicas visuais exibidas na tela do monitor para que essas ações sejam executadas. ! Para Norman, o designer deve se concentrar mais na propiciação percebida do que na real, pois esta está além do seu alcance.”
  • 63. Convidando a experimentação • visível • fácil de interpretar. “A imagem de sistema desempenha um papel crítico para possibilitar esse aprendizado.” • usuários aprendem os efeitos
 de cada ação (aprender causa/ consequência). • deve reversível (imediatamente para sistemas) • deve deixar muito claro o efeito que a ação pretendida • haver tempo suficiente para cancelar o plano. • ações difíceis de executar, não exploráveis. • explorável e passível de descoberta ! NFC Cards - http://vitaminsdesign.com/projects/nfc-cards- for-samsung
  • 64. Resumão 1 - Dar sempre feedback pro usuário do que está acontecendo no sistema 6 - Reduza a carga de memória do usuário, não crie menus com vários níveis nem esconda funcionalidades 2 - Usar sempre linguagem apropriada pro seu público 7 - Flexibilidade e eficiência, atalhos (botões configuráveis, atalhos no teclado são ótimos) 3 - Liberdade e controle do usuário para ir onde quiser e precisar no sistema 8 - Mostrar o que precisa ser mostrado na hora que precisa ser mostrado 4 - Sistema precisa ter consistência e seguir padrões é sempre recomendado 9 - Ajude o usuário a resolver caso haja problemas 5 - Previna os erros de acontecerem - veja pontos críticos e trabalhe neles 10 - Crie um sistema tão bom que não precise de documentação (mas como sempre tem que ter, que seja fácil de encontrar o que precisa e que mostre de maneira fácil o que se quer).
  • 65. "70
  • 66. REFERÊNCIAS E INSPIRAÇÕES ! Propiciação e clicabilidade http://www.usabilidoido.com.br/ propiciacao_e_clicabilidade.html ! Corais http://corais.org/knowledge ! Affordances: Clarifying and Evolving a Concept http://www.cs.ubc.ca/~joanna/papers/ GI2000_McGrenere_Affordances.pdf Service Design Tools http://www.servicedesigntools.org/ ! Affordances and Design http://www.interaction-design.org/encyclopedia/ affordances_and_design.html 
 Design como linguagem: não basta projetar, tem que parecer projetado? http://www.gonzatto.com/linguagem-design-projetado/ Apresentação: Quanto custa arquitetura da informação? http://www.slideshare.net/bibia1010/quantocusta-a-arquitetura-da-informao ! Livro: The design of everyday things http://www.amazon.com/Design-EverydayThings-Donald-Norman/dp/0465067107 ! Livro: Information Architecture for the World Wide Web http://shop.oreilly.com/product/ 9781565922822.do
  • 67. Melina Alves melina@duxcoworking.com @melinalves melinaalves.com duxcoworking.com Bianca Brancaleone contato.bianca@gmail.com fb.com/bianca.brancaleone
 slideshare.com/bibia1010
  • 68. Obrigada! #Cpbr7

×