User Experience para Developers

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.

Fa59eb5159c978e2577e65f45fa9171f?s=128

Eduardo Shiota Yasuda

August 27, 2011
Tweet

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