User Experience para Developers

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.

Transcript

1. User Experience para Developers @shiota | www.eshiota.com | contato@eshiota.com | Dev in Sampa 2011
2. Entendendo o problema: 1 UX vs. Devs
3. Quero fazer meu site que vai revolucionar a Interwebz!
4. O Produto
5. Arquitetura da Informação Design Visual Ergonomia Design de Interação Estratégia de Conteúdo Valores de Negócio Arquitetura de Software Desenvolvimento de Front-end Desenvolvimento de Back-end Infraestrutura Quality Assurance
6. User Experience?
7. Arquitetura da Informação Design Visual Ergonomia Design de Interação Estratégia de Conteúdo Valores de Negócio Arquitetura de Software Desenvolvimento de Front-end Desenvolvimento de Back-end Infraestrutura Quality Assurance
8. Developers?
9. Arquitetura da Informação Design Visual Ergonomia Design de Interação Estratégia de Conteúdo Valores de Negócio Arquitetura de Software Desenvolvimento de Front-end Desenvolvimento de Back-end Infraestrutura Quality Assurance Mais ou menos 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. Entendendo o usuário: 2 Maslow
15. Fisiologia Segurança Relacionamento Estima Realização Testes/ Funcionalidade Testes/Performance/ AI AI/Features AI/Customização Visual/Emoção/ Conforto/Desejo Maslow vs. Produto
16. Entendendo o usuário: 2.a Fisiologia » Funcionalidade
17. O produto precisa funcionar É simples: se o produto não funciona, o usuário vai embora. Fisiologia » Testes/Funcionalidade
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 (lembre-se: não seja convencido)
21. Entendendo o usuário: 2.b 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. Páginas rápidas: otimize na infra, no front e no back Feedback: spinners e loadings nos AJAX 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 Segurança » Testes/Performance
29. 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 Segurança » Testes/Performance
30. Entendendo o usuário: 2.c 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. 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. Relacionamento » AI/Features
37. 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 Relacionamento » AI/Features
38. Entendendo o usuário: 2.d 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. 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 Estima » AI/Customização
46. Entendendo o usuário: 2.e 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. 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 Realização » Visual/Emoção/Conforto/Desejo
55. Colocando na prática: 3 #comofas/
56. Colocando na prática: 3.a Soluções prontas
57. Soluções prontas Bootstrap, from Twitter http://twitter.github.com/bootstrap/
58. Soluções prontas jQuery Mobile http://www.jquerymobile.com
59. Colocando na prática: 3.b Ferramentas
60. Ferramentas Spin.js http://fgnass.github.com/spin.js/
61. Ferramentas Google Web Fonts http://www.google.com/webfonts
62. Ferramentas Typekit http://typekit.com/
63. Ferramentas CSS 3 Button Generator http://css3buttongenerator.com/
64. Ferramentas Adobe Kuler http://kuler.adobe.com/
65. Colocando na prática: 3.b Referências
66. Referências JavaScript: The Good Parts
67. Referências Eloquent JavaScript
68. Referências Hardboiled Web Design
69. Referências HTML 5 for Web Designers
70. Referências Responsive Web Design
71. Referências O Design do Dia a Dia
72. Referências Universal Principles of Design
73. Referências Dive into HTML 5 http://diveintohtml5.org/
74. Referências Jakob Nielsen http://useit.com
75. Referências CSS Tricks http://css-tricks.com/
76. Referências Smashing Magazine http://smashingmagazine.com
77. Colocando na prática: 3.c Inspirações
78. Inspirações Little Big Details http://littlebigdetails.com/
79. Inspirações Dribbble http://www.dribbble.com
80. Estude, estude, estude, pratique, pratique, pratique
81. Pergunte, teste, refine, rinse, repeat
82. Obrigado! @shiota | www.eshiota.com | contato@eshiota.com | Dev in Sampa 2011