Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

User Experience para Developers

7,960 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

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

×