User Experience para Developers

7,790 views

Published on

Os desenvolvedores estão constantemente tendo novas idéias, e hoje em dia é cada vez mais viável colocá-las em prática. Mas não adianta desenvolver um serviço 100% funcional se sua interface não conseguir se comunicar com o usuário. É necessário solucionar sua necessidade não só por funcionalidade, mas também pela sensação de segurança, pelo conforto, e por satisfação pessoal.

Nesta apresentação, foram dadas dicas e estratégias de como parar de desenvolver produtos centrados apenas em máquinas, e começar a desenvolver também centrados no usuário.

Published in: Design, Technology, Business
3 Comments
59 Likes
Statistics
Notes
No Downloads
Views
Total views
7,790
On SlideShare
0
From Embeds
0
Number of Embeds
1,476
Actions
Shares
0
Downloads
175
Comments
3
Likes
59
Embeds 0
No embeds

No notes for slide

User Experience para Developers

  1. 1. User Experience para Developers @shiota | www.eshiota.com | contato@eshiota.com
  2. 2. 1Entendendo o problema: UX vs. Devs
  3. 3. Quero fazer meu site que vai revolucionar a Interwebz!
  4. 4. O Produto
  5. 5. Ergonomia Valores de Negócio Estratégia de Conteúdo Design VisualDesign de Interação Arquitetura da Informação Quality Assurance Desenvolvimento de Back-end Arquitetura de Software Desenvolvimento de Front-end Infraestrutura
  6. 6. User Experience?
  7. 7. Ergonomia Valores de Negócio Estratégia de Conteúdo Design VisualDesign de Interação Arquitetura da Informação Quality Assurance Desenvolvimento de Back-end Arquitetura de Software Desenvolvimento de Front-end Infraestrutura
  8. 8. Developers?
  9. 9. Mais ou menos Ergonomia Valores de Negócio Estratégia de Conteúdo Design Visual Design de Interação Arquitetura da Informação Quality Assurance Desenvolvimento de Back-end Arquitetura de Software Desenvolvimento de Front-end Infraestrutura De vez em quando
  10. 10. #comofas/
  11. 11. Golden Rule para devs
  12. 12. O usuário NÃO é burro.VOCÊ que é convencido demais. #prontofalei
  13. 13. Keep hearing “nobody reads themanual”... people would RTFM if theFM was a treat, not a chore (andtreated users time as HIGHLY valued). — Kathy Sierra
  14. 14. 2Entendendo o usuário: Maslow
  15. 15. Maslow vs. Produto Visual/Emoção/ Realização Conforto/Desejo Estima AI/CustomizaçãoRelacionamento AI/Features Testes/Performance/ Segurança AI Testes/Fisiologia Funcionalidade
  16. 16. 2.aEntendendo o usuário: Fisiologia » Funcionalidade
  17. 17. Fisiologia » Testes/FuncionalidadeO produto precisa funcionarÉ simples: se o produto não funciona, o usuáriovai embora.
  18. 18. Fisiologia » Testes/Funcionalidade[Vídeo] Bad: A loja da Vivo simplesmente não funciona fora do IE. Nada é clicável.
  19. 19. Fisiologia » Testes/Funcionalidade[Vídeo] Bad: Ao clicar no input field, a página magica-bizarramente dá um refresh.
  20. 20. Fisiologia » Testes/Funcionalidade Unit tests, continuous integration, basic stuff Teste nos browsers e devices do público-alvo Eat your own food: use o produto, convide pessoas para testar Não confie no código, abra a página (lembre- se: não seja convencido)
  21. 21. 2.bEntendendo o usuário:Segurança » Testes/Performance
  22. 22. Segurança » Testes/PerformanceO usuário precisa se sentirseguro e confiante“Estou fazendo a coisa certa? Será que foi? Seráde deu erro? Será que isso funciona mesmo?Será que vão invadir minha conta? Será? Será?”
  23. 23. Segurança » Testes/Performance[Vídeo] Good: As mensagens de feedback do Twitter dão segurança ao usuário.
  24. 24. Segurança » Testes/PerformanceBad: Funcionamento duvidoso e erros gramaticais geram insegurança pelo usuário.
  25. 25. Segurança » Testes/Performance[Vídeo] Bad: Muitos spinners, muito AJAX, alto risco de quebrar o funcionamento.
  26. 26. Segurança » Testes/PerformanceBad: Cadastro que pedem dados sensíveis logo de início geram desconfiança.
  27. 27. Segurança » Testes/PerformanceBad: Opções fora da lógica tradicional geram confusão e erros.
  28. 28. Segurança » Testes/Performance Páginas rápidas: otimize na infra, no front e no back Feedback: spinners e loadings nos AJAX (mas não exagere) Feedback: o usuário deve saber o que deu certo e o que deu errado Revise o conteúdo e o layout: gramática e harmonia aumentam a confiança
  29. 29. Segurança » Testes/Performance Don’t be evil: não peça dados sensíveis se não forem necessários Previna erros: quanto menor a chance de erros, maior a confiança
  30. 30. 2.cEntendendo o usuário:Relacionamento » AI/Features
  31. 31. Relacionamento » AI/FeaturesO usuário quer secomunicar, usar, relacionarAs features e as informações devem serrelevantes, fáceis de achar e de usar.“O que eu ganho com isso?”
  32. 32. Relacionamento » AI/Features[Vídeo] Bad: O extrato do TAM Fidelidade é feito em outro site, com cadastro e interfaceseparados.
  33. 33. Relacionamento » AI/Features[Vídeo] Bad: Um ponto de interrupção no flow pode fazer com que o usuário desista da ação.
  34. 34. Relacionamento » AI/FeaturesGood: Logo de início o usuário sabe do que se trata, o que vai ganhar e quanto custa.
  35. 35. Relacionamento » AI/FeaturesGood: A página de cadastro deixa claro as principais dúvidas — quando, como, o que ocorreno final e se é possível cancelar.
  36. 36. Relacionamento » AI/Features Pergunte ao usuário o que ele quer Não apenas pergunte: observe o usuário Navegação consistente e bem estruturada Padrões de interface: botões são botões, links são links Estratégia de conteúdo: a mensagem deve ser clara, consistente. Invista em copywriting.
  37. 37. Relacionamento » AI/Features Transparência: seja claro e honesto sobre o que o usuário vai ganhar/perder Facilite: use tutoriais, screencasts ou passo-a- passo Proporcione uma experiência fluida Evite pontos de dúvida ou falha: o usuário facilmente desiste da ação
  38. 38. 2.dEntendendo o usuário: Estima » AI/Customização
  39. 39. Estima » AI/CustomizaçãoO usuário quer ter controlee ser bem tratadoÉ como em um restaurante: você quer ser bematendido e quer poder pedir seu prato semsalsinha.
  40. 40. Estima » AI/CustomizaçãoBad: Erro nada amigável e agressivo pode assustar o usuário.
  41. 41. Estima » AI/Customização[Vídeo] Good: O Twitter usa mensagens amigáveis e humanas.
  42. 42. Estima » AI/CustomizaçãoGood: O Wordpress oferece muitos controles para customização dos posts.
  43. 43. Estima » AI/CustomizaçãoGood: O Google Plus permite controle total sobre quem vai poder ler o post.
  44. 44. Estima » AI/CustomizaçãoGood: O Facebook tem um controle granular sobre quem vê o quê.
  45. 45. Estima » AI/Customização Não seja técnico ou agressivo nos erros: o usuário não tem culpa Liberdade: ofereça controles, customizações, opções de privacidade e notificação O usuário quer cumprir tarefas o mais rápido possível: otimize o flow No front-end: tabindex, autofocus, autocomplete, AJAX checks Responsive design: layouts que se adaptam ao contexto
  46. 46. 2.eEntendendo o usuário: Realização » Visual/Emoção/ Conforto/Desejo
  47. 47. Realização » Visual/Emoção/Conforto/DesejoO usuário quer se sentirsatisfeito, felizTempo é valioso e irreversível. Não gaste otempo do usuário sem que no final ele se sintarealizado com o que fez.
  48. 48. Realização » Visual/Emoção/Conforto/Desejo 12px/14pxBad: O texto no terra.com.br possui corpo e entrelinha pequenos, dificultando a leitura emtelas pequenas ou resoluções de dpi alto.
  49. 49. Realização » Visual/Emoção/Conforto/Desejo 15px/21pxGood: O G1 utiliza um corpo maior e entrelinha proporcional de 1.4em, proporcionando boalegibilidade e maior conforto.
  50. 50. Realização » Visual/Emoção/Conforto/Desejo 15px/21pxEste é o mesmo texto do terra.com.br, com o corpo e entrelinha do G1.
  51. 51. Realização » Visual/Emoção/Conforto/Desejo 12px/14pxComparando, antes era assim: bem menos legível.
  52. 52. Realização » Visual/Emoção/Conforto/Desejo[Vídeo] Good: O Google Plus é exemplo de animações sutis e naturais que contribuem para aexperiência do usuário.
  53. 53. Realização » Visual/Emoção/Conforto/DesejoGood: O app do Highrise oferece um jogo da velha para distrair enquanto o banco de dados ébaixado.
  54. 54. Realização » Visual/Emoção/Conforto/Desejo Legibilidade: give typography some love Eye candy: o visual deve complementar a experiência Design de interação: efeitos e transições melhoram a experiência Seja amigável: os usuários tendem a voltar Pequenas recompensas, easter eggs
  55. 55. 3Colocando na prática: #comofas/
  56. 56. 3.aColocando na prática: Soluções prontas
  57. 57. Soluções prontasBootstrap, from Twitterhttp://twitter.github.com/bootstrap/
  58. 58. Soluções prontasjQuery Mobilehttp://www.jquerymobile.com
  59. 59. Soluções prontasHTML 5 Boilerplatehttp://html5boilerplate.com/
  60. 60. 3.bColocando na prática: Ferramentas
  61. 61. FerramentasSpin.jshttp://fgnass.github.com/spin.js/
  62. 62. FerramentasGoogle Web Fontshttp://www.google.com/webfonts
  63. 63. FerramentasTypekithttp://typekit.com/
  64. 64. FerramentasCSS 3 Button Generatorhttp://css3buttongenerator.com/
  65. 65. FerramentasAdobe Kulerhttp://kuler.adobe.com/
  66. 66. Soluções prontasSubtle Patternshttp://www.subtlepatterns.com
  67. 67. Soluções prontasSilverbackhttp://www.silverbackapp.com
  68. 68. 3.bColocando na prática: Referências
  69. 69. ReferênciasJavaScript: The Good Parts
  70. 70. ReferênciasEloquent JavaScript
  71. 71. ReferênciasHardboiled Web Design
  72. 72. ReferênciasHTML 5 for Web Designers
  73. 73. ReferênciasResponsive Web Design
  74. 74. ReferênciasO Design do Dia a Dia
  75. 75. ReferênciasUniversal Principles of Design
  76. 76. ReferênciasJakob Nielsenhttp://useit.com
  77. 77. ReferênciasUI Patternshttp://ui-patterns.com/
  78. 78. ReferênciasA List Aparthttp://alistapart.com
  79. 79. ReferênciasCSS Trickshttp://css-tricks.com/
  80. 80. ReferênciasSmashing Magazinehttp://smashingmagazine.com
  81. 81. 3.cColocando na prática: Inspirações
  82. 82. InspiraçõesLittle Big Detailshttp://littlebigdetails.com/
  83. 83. InspiraçõesDribbblehttp://www.dribbble.com
  84. 84. InspiraçõesHouse of Buttonshttp://houseofbuttons.tumblr.com/
  85. 85. 4Resumindo....(se você dormiu, a hora é agora)
  86. 86. O usuário NÃO é burro.
  87. 87. Entenda o usuário Visual/Emoção/ Realização Conforto/Desejo Estima AI/CustomizaçãoRelacionamento AI/Features Testes/Performance/ Segurança AI Testes/Fisiologia Funcionalidade
  88. 88. Use. Observe.Pergunte. Teste.Melhore. Repita.
  89. 89. Obrigado!@shiota | www.eshiota.com | contato@eshiota.com

×