Transferir como PDF, PPTX
Carregado porMelina Alves
Campus Party_Design do dia a dia #Cpbr7
O documento discute os princípios e práticas do design de experiência do usuário (UX Design) a partir da perspectiva da arquitetura da informação e da interação humano-computador. Apresenta os benefícios do UX Design para a criação de produtos e sistemas digitais intuitivos e centrados no usuário. Também resume os princípios-chave da usabilidade segundo Jakob Nielsen e conceitos como affordance e feedback segundo Donald Norman.
![[Palestra UNICAP] UX Design - Projetando Soluções e Experiências](https://cdn.slidesharecdn.com/ss_thumbnails/palestrauxunicap-140909213939-phpapp02-thumbnail.jpg?width=640&height=640&fit=bounds)
Campus Party_Design do dia a dia #Cpbr7
- 1. DESIGN DO DIAA DIA Arquitetura de Informação e User Experience #Cpbr7 2014 !1
- 2. Melina Alves Bianca Brancaleone Ex-UXLíder da Insula e NeogamaBBH, iThink, Razorfish. Ex-Atrativa Games, Virgula, MMCafé, iG, iThink, Webgoal.
- 3.
- 9. + 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
- 10.
- 11. As pessoas gostamisso? 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? …
- 12. 2006 October 10th, 2006by 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/
- 13. 2008 by DAN SAFFER Correlaçãodas á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/
- 14. 2008 by DAN SAFFER Correlaçãodas á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/
- 15. 2009|2013 by DAN SAFFER (redesignedby 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
- 16. BENEFÍCIOS DE USEREXPERIENCE 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
- 17.
- 18. UX + COMPORTAMENTO APRENDIZADO/ COMPORTAMENTO “Comportamentalismo: Psicologia.” “Froid: ! RELAÇÃOSÓ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” ! ! ! ! !
- 19.
- 20.
- 21.
- 22.
- 23.
- 24.
- 25.
- 26.
- 27. Melina Alves PUC-RS -2012 #Cpbr - 2014 "27
- 28. Melina Alves PUC-RS -2012 #Cpbr - 2014 "28
- 29. Melina Alves PUC-RS -2012 #Cpbr - 2014 "29
- 30. Melina Alves PUC-RS -2012 #Cpbr - 2014 "30
- 31. Melina Alves PUC-RS -2012 #Cpbr - 2014 "31
- 32. Melina Alves PUC-RS -2012 #Cpbr - 2014 "32
- 33. Melina Alves PUC-RS -2012 #Cpbr - 2014 "33
- 34. Melina Alves PUC-RS -2012 #Cpbr - 2014 "34
- 35. Melina Alves PUC-RS -2012 #Cpbr - 2014 "35
- 36. Melina Alves PUC-RS -2012 #Cpbr - 2014 "36
- 37. Melina Alves PUC-RS -2012 #Cpbr - 2014 "37
- 38. Melina Alves PUC-RS -2012 #Cpbr - 2014 "38
- 39. Melina Alves PUC-RS -2012 #Cpbr - 2014 "39
- 40. Melina Alves PUC-RS -2012 #Cpbr - 2014 "40
- 41. Melina Alves PUC-RS -2012 #Cpbr - 2014 "41
- 42. Melina Alves PUC-RS -2012 #Cpbr - 2014 "42
- 43. Melina Alves PUC-RS -2012 #Cpbr - 2014 "43
- 44. “experiência do usuárioestá cada vez mais próxima da imersão entre soluções digitais e reais” Melina Alves PUC-RS - 2012 #Cpbr - 2014 "44
- 45. Melina Alves PUC-RS -2012 #Cpbr - 2014 "45
- 46. HISTÓRIAS (informações que aspessoas 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
- 47. USER EXPERIENCE DESIGN pontode vista da Arquitetura da Informação
- 48. Arquitetura da Informação Ostrê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
- 49.
- 50. Diagrama da Experiênciado 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
- 51. 10 Heurítiscas deNielsen by JAKOB NIELSEN 1995 http://www.nngroup.com/articles/ten-usability-heuristics
- 52. 1 - Visibilidadedo 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.
- 53. 2 - Combinaçãoentre 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.
- 54. 3 - Controledo 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.
- 55. 4 - Consistênciae 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.
- 56. 5 - Prevençãode 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
- 57. 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.
- 58. 7 - Flexibilidadee 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.
- 59. 8 - Estéticae 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.
- 60. 9 - Ajudeo 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.
- 61. 10 - Ajudae 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.
- 62. usabilitygeek.com USER EXPERIENCE DESIGN pontode vista Humano _ IHC
- 63. Donald Norman “Um métodoimportante 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.”
- 64. Out of thebox from Vitamins play
- 65. Convidando a experimentação “Em cadaestado 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.”
- 66. Affordance “Propiciação real é fornecidapelo teclado (apertar de teclas), pelo mouse (clique), pelo monitor touchscreen (apontar) e etc.”
- 67. Affordance para Designde 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.”
- 68. 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
- 69. Resumão 1 - Darsempre 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).
- 70.
- 71. REFERÊNCIAS E INSPIRAÇÕES ! Propiciaçãoe 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
- 72.
- 73.