User Experience para Developers
59 gostaram3,814 visualizações
O documento discute a importância da experiência do usuário (UX) para desenvolvedores. Ele explica como entender as necessidades dos usuários segundo a pirâmide de Maslow e como projetar produtos que atendam suas necessidades de funcionalidade, segurança e realização. O documento também fornece ferramentas, soluções prontas e referências para ajudar desenvolvedores a melhorarem a UX.
![Fisiologia » Testes/Funcionalidade
[Vídeo] Bad: A loja da Vivo simplesmente não funciona fora do IE. Nada é clicável.](https://image.slidesharecdn.com/devinsampa2011-uxparadevelopers-110827143518-phpapp01/85/User-Experience-para-Developers-18-320.jpg)
![Fisiologia » Testes/Funcionalidade
[Vídeo] Bad: Ao clicar no input field, a página magica-bizarramente dá um refresh.](https://image.slidesharecdn.com/devinsampa2011-uxparadevelopers-110827143518-phpapp01/85/User-Experience-para-Developers-19-320.jpg)
![Segurança » Testes/Performance
[Vídeo] Good: As mensagens de feedback do Twitter dão segurança ao usuário.](https://image.slidesharecdn.com/devinsampa2011-uxparadevelopers-110827143518-phpapp01/85/User-Experience-para-Developers-23-320.jpg)
![Segurança » Testes/Performance
[Vídeo] Bad: Muitos spinners, muito AJAX, alto risco de quebrar o funcionamento.](https://image.slidesharecdn.com/devinsampa2011-uxparadevelopers-110827143518-phpapp01/85/User-Experience-para-Developers-25-320.jpg)
![Relacionamento » AI/Features
[Vídeo] Bad: O extrato do TAM Fidelidade é feito em outro site, com cadastro e interface
separados.](https://image.slidesharecdn.com/devinsampa2011-uxparadevelopers-110827143518-phpapp01/85/User-Experience-para-Developers-32-320.jpg)
![Relacionamento » AI/Features
[Vídeo] Bad: Um ponto de interrupção no flow pode fazer com que o usuário desista da ação.](https://image.slidesharecdn.com/devinsampa2011-uxparadevelopers-110827143518-phpapp01/85/User-Experience-para-Developers-33-320.jpg)
![Estima » AI/Customização
[Vídeo] Good: O Twitter usa mensagens amigáveis e humanas.](https://image.slidesharecdn.com/devinsampa2011-uxparadevelopers-110827143518-phpapp01/85/User-Experience-para-Developers-41-320.jpg)
![Realização » Visual/Emoção/Conforto/Desejo
[Vídeo] Good: O Google Plus é exemplo de animações sutis e naturais que contribuem para a
experiência do usuário.](https://image.slidesharecdn.com/devinsampa2011-uxparadevelopers-110827143518-phpapp01/85/User-Experience-para-Developers-52-320.jpg)
User Experience para Developers
- 1. User Experience para Developers @shiota | www.eshiota.com | contato@eshiota.com
- 2. 1 Entendendo o problema: UX vs. Devs
- 3. Quero fazer meu site que vai revolucionar a Interwebz!
- 4. O Produto
- 5. 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
- 7. 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
- 8. Developers?
- 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. #comofas/
- 11. Golden Rule para devs
- 12. O usuário NÃO é burro. VOCÊ que é convencido demais. #prontofalei
- 13. Keep hearing “nobody reads the manual”... people would RTFM if the FM was a treat, not a chore (and treated user's time as HIGHLY valued). — Kathy Sierra
- 14. 2 Entendendo o usuário: Maslow
- 15. Maslow vs. Produto Visual/Emoção/ Realização Conforto/Desejo Estima AI/Customização Relacionamento AI/Features Testes/Performance/ Segurança AI Testes/ Fisiologia Funcionalidade
- 16. 2.a Entendendo o usuário: Fisiologia » Funcionalidade
- 17. Fisiologia » Testes/Funcionalidade O produto precisa funcionar É simples: se o produto não funciona, o usuário vai embora.
- 18. Fisiologia » Testes/Funcionalidade [Vídeo] Bad: A loja da Vivo simplesmente não funciona fora do IE. Nada é clicável.
- 19. Fisiologia » Testes/Funcionalidade [Vídeo] Bad: Ao clicar no input field, a página magica-bizarramente dá um refresh.
- 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. 2.b Entendendo o usuário: Segurança » Testes/Performance
- 22. Segurança » Testes/Performance O usuário precisa se sentir seguro 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. Segurança » Testes/Performance [Vídeo] Good: As mensagens de feedback do Twitter dão segurança ao usuário.
- 24. Segurança » Testes/Performance Bad: Funcionamento duvidoso e erros gramaticais geram insegurança pelo usuário.
- 25. Segurança » Testes/Performance [Vídeo] Bad: Muitos spinners, muito AJAX, alto risco de quebrar o funcionamento.
- 26. Segurança » Testes/Performance Bad: Cadastro que pedem dados sensíveis logo de início geram desconfiança.
- 27. Segurança » Testes/Performance Bad: Opções fora da lógica tradicional geram confusão e erros.
- 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. 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. 2.c Entendendo o usuário: Relacionamento » AI/Features
- 31. Relacionamento » AI/Features O usuário quer se comunicar, usar, relacionar As features e as informações devem ser relevantes, fáceis de achar e de usar. “O que eu ganho com isso?”
- 32. Relacionamento » AI/Features [Vídeo] Bad: O extrato do TAM Fidelidade é feito em outro site, com cadastro e interface separados.
- 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. Relacionamento » AI/Features Good: Logo de início o usuário sabe do que se trata, o que vai ganhar e quanto custa.
- 35. Relacionamento » AI/Features Good: A página de cadastro deixa claro as principais dúvidas — quando, como, o que ocorre no final e se é possível cancelar.
- 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. 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. 2.d Entendendo o usuário: Estima » AI/Customização
- 39. Estima » AI/Customização O usuário quer ter controle e ser bem tratado É como em um restaurante: você quer ser bem atendido e quer poder pedir seu prato sem salsinha.
- 40. Estima » AI/Customização Bad: Erro nada amigável e agressivo pode assustar o usuário.
- 41. Estima » AI/Customização [Vídeo] Good: O Twitter usa mensagens amigáveis e humanas.
- 42. Estima » AI/Customização Good: O Wordpress oferece muitos controles para customização dos posts.
- 43. Estima » AI/Customização Good: O Google Plus permite controle total sobre quem vai poder ler o post.
- 44. Estima » AI/Customização Good: O Facebook tem um controle granular sobre quem vê o quê.
- 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. 2.e Entendendo o usuário: Realização » Visual/Emoção/ Conforto/Desejo
- 47. Realização » Visual/Emoção/Conforto/Desejo O usuário quer se sentir satisfeito, feliz Tempo é valioso e irreversível. Não gaste o tempo do usuário sem que no final ele se sinta realizado com o que fez.
- 48. Realização » Visual/Emoção/Conforto/Desejo 12px/14px Bad: O texto no terra.com.br possui corpo e entrelinha pequenos, dificultando a leitura em telas pequenas ou resoluções de dpi alto.
- 49. Realização » Visual/Emoção/Conforto/Desejo 15px/21px Good: O G1 utiliza um corpo maior e entrelinha proporcional de 1.4em, proporcionando boa legibilidade e maior conforto.
- 50. Realização » Visual/Emoção/Conforto/Desejo 15px/21px Este é o mesmo texto do terra.com.br, com o corpo e entrelinha do G1.
- 51. Realização » Visual/Emoção/Conforto/Desejo 12px/14px Comparando, antes era assim: bem menos legível.
- 52. Realização » Visual/Emoção/Conforto/Desejo [Vídeo] Good: O Google Plus é exemplo de animações sutis e naturais que contribuem para a experiência do usuário.
- 53. Realização » Visual/Emoção/Conforto/Desejo Good: O app do Highrise oferece um jogo da velha para distrair enquanto o banco de dados é baixado.
- 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. 3 Colocando na prática: #comofas/
- 56. 3.a Colocando na prática: Soluções prontas
- 57. Soluções prontas Bootstrap, from Twitter http://twitter.github.com/bootstrap/
- 59. Soluções prontas HTML 5 Boilerplate http://html5boilerplate.com/
- 60. 3.b Colocando na prática: Ferramentas
- 64. Ferramentas CSS 3 Button Generator http://css3buttongenerator.com/
- 68. 3.b Colocando na prática: Referências
- 69. Referências JavaScript: The Good Parts
- 72. Referências HTML 5 for Web Designers
- 74. Referências O Design do Dia a Dia
- 75. Referências Universal Principles of Design
- 81. 3.c Colocando na prática: Inspirações
- 85. 4 Resumindo.... (se você dormiu, a hora é agora)
- 86. O usuário NÃO é burro.
- 87. Entenda o usuário Visual/Emoção/ Realização Conforto/Desejo Estima AI/Customização Relacionamento AI/Features Testes/Performance/ Segurança AI Testes/ Fisiologia Funcionalidade
- 88. Use. Observe. Pergunte. Teste. Melhore. Repita.
- 89. Obrigado! @shiota | www.eshiota.com | contato@eshiota.com