User Experience de ponta a ponta

2.651 visualizações

Publicada em

Ao deixar o seu tablet na horizonal, aquele app mostra uma solução bem bacana de navegação. E aquele site, que permite drag and drop? Bem legal de usar! Como criar uma interface apaixonante, então? Os aplicativos mais legais do seu celular não possuem navegação “clássica”, tela a tela. Além de definir a estrutura das informações, nosso papel é cada vez mais co-criativo e, para que tudo funcione, nossa interação com visual designers e developers é essencial para garantir que os produtos sejam mais que funcionais.

Publicada em: Design

User Experience de ponta a ponta

  1. 1. user experienceDe pontaa ponta Dia Mundial da Arquitetura de Informação 11/02/2012 Juliana Gaiba
  2. 2. Agenda• Apresentação• UX: antes, agora e depois• Nosso problema• Um ponto de vista
  3. 3. Oi,• Trabalho na “grande área de UX” há ~8 anos• Sou formada em design, mas comecei trabalhando comusabilidade• Já fui agência, cliente e consultoria• Continuo aprendendo• E me apaixonando pelo que faço 
  4. 4. Cristina, 27 anos. Viciada no Antonio, 57 anos. Fica o dia Facebook. Apesar da todo comprando peças de bikepãodurice, comprou um iPhone no eBay, pagando com Paypal e não desgruda dele. Paola, 55 anos. Fã do Dance Central, no Kinect. Adora Katylene.com
  5. 5. Hoje eu trabalho na Telefonica | Vivo. Não, eu não souatendente de telemarketing. E eu não tenho nada a ver com oSpeedy –não me xinguem.A área de UX da TEF tem hoje 7 meses. E nosso desafio, claro, éfazer coisas legais. Lançar produtos que as pessoas curtam.E isso é difícil pra caramba.
  6. 6. Pamela Mead │ The Magic Number │ © Telefónica I+D, 2011
  7. 7. A área
  8. 8. Como a áreaera no“passado”...
  9. 9. aço wireframe, aplico testede usabilidade, crio matriz deconteúdo, faço vocabuláriocontrolado, modero cardsorting, monto protótipo empapel, crio animações nopower point, arraso nospainéis dinâmicos do axure
  10. 10. Como éagora?
  11. 11. Amadurece ndo• Antes, eramos todos iguais e tentávamos fazer tudo.• Como qualquer coisa que é muito nova, estamos amadurecendo, nos profissionalizando e especializando – apesar da área naturalmente generalista.• De uma forma bem simplista, hoje posso falar que os meus colegas de profissão se dividiram em “categorias”.
  12. 12. Arquiteto deinformação• Organiza conteúdo. Define vocabulário controlado, dicionário de sinônimos, busca, metadados etc.
  13. 13. Pesquisador• Estuda o comportamento do usuário. Conduz pesquisas em laboratório, faz shadowing, diários de uso etc. http://www.u-sentric.com/modulefiles/pages/421_1246010512_stationair-usability-lab.jpg
  14. 14. Designer deinteração• Define interações. Cria a navegação do site, definindo o que acontece em cada tela. http://media.smashingmagazine.com/wp-content/uploads/2011/12/IMG_1392.jpg
  15. 15. Gerente deUX• Coordena. Lidera AIs, pesquisadores e designers de interação. Orienta e aprova as entregas. http://www.stevepratt.com/wp-content/uploads/2008/11/leaderpegs.jpg
  16. 16. Desgarradosda UX.br• Visual Designer: geralmente está na equipe de criação, na agência. É difícil encontrar nas consultorias.• Redator: apesar de importante, nunca é exclusivo para UX. Geralmente fica na publicidade.• Prototyper: cria as animações e transições. Bem raro. http://www.userfocus.co.uk/articles/how-to-design-like-Leonardo-da-Vinci.html
  17. 17. Somosmultidisciplinares http://www.slideshare.net/upasaopaulo/perfil-do-profissional-de-ux-no-brasil
  18. 18. E continuamos“tudistas” http://www.slideshare.net/upasaopaulo/perfil-do-profissional-de-ux-no-brasil
  19. 19. O trabalho
  20. 20. Como otrabalho era no“passado”...
  21. 21. Arquiteto-Aprovou o escopo e oconteúdo com o cliente.- Definiu a estrutura.- Aprovou a estrutura com ocliente.
  22. 22. Criação- O cliente achou a primeira proposta careta e pediu uma coisa maisdiferente e ousada.- Entre 21 idas e vindas, chegaram nessa versão. O wireframe caiuno esquecimento.
  23. 23. Desenvolvi-mento- Implementou o que deu pra fazer.-O prazo estourou e tiveram 1semana pra desenvolver tudo.- A navegação mudou, não deutempo de seguir.- Wireframe? Tinha isso?!- Não vai dar tempo de fazer essasanimações todas no código, vamosbotar um flash.- Vai demorar uns 68 segundos praabrir o site, beleza?- Ninguém teve tempo de testar.
  24. 24. Como éagora?
  25. 25. A maioria doslugares (agência, cliente e continuaconsultoria)assim
  26. 26. Ainda“compartimentamos”a criação Putz, a equipe de UX tá lotada. Precisamos arranjar um fornecedor de wireframes.
  27. 27. O princípio da fábrica de alfinete foi o de que a divisãodo trabalho pode aumentar a produtividade nasorganizações
  28. 28. Aumenta a produtividade, mas não é nada inovador e criativo...
  29. 29. Nossa áreaamadurece, masseguimos a mesmaestrutura detrabalho de antes
  30. 30. Apesar disso, ascoisas quegostamos de usarevoluem
  31. 31. EVOLUEM RÁPIDO
  32. 32. Há alguns anos as coisas não são mais tela a tela
  33. 33. Nem acontecem numa tela só
  34. 34. Designer deinteração• Define interações. Cria a navegação do site, definindo o que acontece em cada tela. http://media.smashingmagazine.com/wp-content/uploads/2011/12/IMG_1392.jpg
  35. 35. Continuamosusando as mesmasferramentas
  36. 36. http://www.slideshare.net/upasaopaulo/perfil-do-profissional-de-ux-no-brasil
  37. 37. Vamos queimar os wireframes!
  38. 38. O trabalho não começa (e nem deveria acabar) no wireframe
  39. 39. Um ponto devista
  40. 40. Sobre oprojeto
  41. 41. Tenha osobjetivos claros.Antes de começar a pensar na tela:Conheça as necessidades do seuusuário, mesmo que sejapesquisando mais sobre ele noGoogle. Conheça a suaconcorrência! Tente elaborar ummodelo de negócios “express”, é umexcelente exercício. Saiba quais sãoas possibilidades técnicas da(s)plataforma(s) que você estáprojetando.
  42. 42. http://www.businessmodelgeneration.com/canvas
  43. 43. Identifique oque deve serincrível. E sejaincrível nisso.Identifique a tela principal –acredite,na maioria das vezes não é a home.Ela tem que ser melhor do que todosos seus concorrentes. Tente envolvera equipe toda nesse processo:desenvolvedores, stakeholders,gerentes: todos devem contribuir.Chegue em dois ou três caminhosdiferentes e depois evolua.
  44. 44. a b c Timeline Timeline TimelineFacebook Gowalla Path
  45. 45. Reconheçapadrões,compare,adapte
  46. 46. Conceito 1 Conceito 2 Conceito 3
  47. 47. "Good artists copy, great artists steal."
  48. 48. Edite. Corte.Diminua.Valide.Faça planos de lançamento. Foqueno que realmente importa.Pareto is king.
  49. 49. Mas eu só quero pagar uma conta!
  50. 50. Sobre otrabalho
  51. 51. Tente nãocomprometerseu tempo comdocumentaçõescomplexas.Sabe aquele documento complicado,cheio de detalhes e legendas? Poisé, (quase) ninguém vai ler aquilo.E, mesmo se ler, não vai sairexatamente o que você quer. Gasteseu tempo orientando e validando.
  52. 52. Desenhe,desenhe,desenhe,desenhe.Antes de partir para o wireframe,desenhe com o time todo. Junteideias, referências, tudo o quepuder. Exemplifique!
  53. 53. Seja visual.Exemplifique.Pesquise umpainel dereferências.Participe do processo de criaçãocomo um todo. Comunique-sevisualmente: nada pior que tentarexplicar uma imagem com milpalavras. Use referências,contribua.
  54. 54. Seja ainda maisvisual.Pesquise!Não se limite ao seu “nicho”.Dificilmente dá pra contar com ummotion designer. Leve contribuiçõesde animações e transições de tela:esses também são elementos chaveda experiência, principalmentemobile.
  55. 55. Experimente.Tem algum serviço novo?Cadastre-se.Baixe todos os aplicativos de graça –e os pagos, se forem muito legais.Use o celular velho da sua vó.
  56. 56. Não seja umcompletoleigo emprogramaçãoNão é pra ser mais umdesenvolvedor, mas saberentender o que eles dizem éfundamental.
  57. 57. Teste (menoscom a suamãe, que écoruja).Testar nem sempre é complicadoe caro. Nielsen já dizia: com 5usuários dá pra produzir bonsresultados. Aliando isso a índicescomo Net Promoter Score, suaanálise fica ainda mais rica.
  58. 58. Tenha sempreem mente
  59. 59. Você estádisputandopor tempo.Seja obssessivo com velocidade.
  60. 60. ser ) er s ase ck in m t on /U Us en li s oC c ti lick es/ ue em Qu c t isfa et ven ery t in yC eri fin cre Tim Sat Dis Qu An Re Re (in 50ms - - - - - - 200ms - - - -0.3% -0.4% 500 500ms - -0.6% -1.2% -1.0% -0.9% 12001000ms -0.7% -0.9% -2.8% -1.9% -1.6% 19002000ms -1.8% -2.1% -4.3% -4.4% -3.8% 3100 • 0.1s é o tempo máximo para dar a percepção de “instantaneidade”. • Conforme o tempo de carregamento aumenta, os usuários vão deixando de usar o serviço. • Quanto mais o sistema demora para responder, maior o impacto na atenção do usuário –ele também demora para responder. • O usuário aprende rápido que o sistema está mais lento, mas demora para retomar a percepção de rapidez. http://velocityconf.com/velocity2009/public/schedule/detail/8523
  61. 61. A interaçãodeve fluir, semengasgos.Faça com que o usuário percorrafluxos de maneira fluida e aexperiência trará felicidade.
  62. 62. Mire algoviciante, comoum jogoOk, gamification é buzzword, masde site de banco a fazendinha,sua interface tem que “prender” ousuário e dar a experiência queele precisa: lúdica ou informativa.
  63. 63. https://www.mint.com/how-it-works/budgeting/
  64. 64. Semprereduza oesforçoSe pergunte: o que o usuário vaiganhar em troca? Vale a pena?
  65. 65. Pense nomodelomentalNem sempre o usuário vainavegar usando a forma maislógica. http://www.cred.columbia.edu/guide/images/illo_mental_model.gif
  66. 66. Sobreatitude
  67. 67. Acostume-se:você vai ser ochato. Masnunca o c*ga-regra.Você vai colaborar com otrabalho dos outros.
  68. 68. A primeirasolução nuncaé a melhorsolução.Seja incansável. Respire o seuproduto.
  69. 69. A inspiraçãopode vir deumacalculadoraAcredite.
  70. 70. Envolva odesenvolvedor.Ele é geek echeio dereferências.Tenha um advogado ao seu lado,não um crítico.
  71. 71. Divirta-se!
  72. 72. Briefing UX: AI / DI Criação Desenvolvimento Look and Briefing Conteúdo feel Implementação Uxs + Devs + Usuários
  73. 73. Perguntas?Obrigada!@gaibagaiba.mejuliana@gaiba.me

×