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
   

   View Slide

2. Entendendo o problema:
   1
   UX vs. Devs
   

   View Slide

3. Quero fazer meu site que
   vai revolucionar a
   Interwebz!
   

   View Slide

4. O Produto
   

   View Slide

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
   

   View Slide

6. User Experience?
   

   View Slide

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
   

   View Slide

8. Developers?
   

   View Slide

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
   

   View Slide

10. #comofas/
    

    View Slide

11. Golden Rule
    para devs
    

    View Slide

12. O usuário NÃO é burro.
    VOCÊ que é convencido demais.
    #prontofalei
    

    View Slide

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
    

    View Slide

14. Entendendo o usuário:
    2
    Maslow
    

    View Slide

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
    

    View Slide

16. Entendendo o usuário:
    2.a
    Fisiologia » Funcionalidade
    

    View Slide

17. O produto precisa funcionar
    É simples: se o produto não funciona, o usuário
    vai embora.
    Fisiologia » Testes/Funcionalidade
    

    View Slide

18. Fisiologia » Testes/Funcionalidade
    [Vídeo] Bad: A loja da Vivo simplesmente não funciona fora do IE. Nada é clicável.
    

    View Slide

19. Fisiologia » Testes/Funcionalidade
    [Vídeo] Bad: Ao clicar no input field, a página magica-bizarramente dá um refresh.
    

    View Slide

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)
    

    View Slide

21. Entendendo o usuário:
    2.b
    Segurança » Testes/Performance
    

    View Slide

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á?”
    

    View Slide

23. Segurança » Testes/Performance
    [Vídeo] Good: As mensagens de feedback do Twitter dão segurança ao usuário.
    

    View Slide

24. Segurança » Testes/Performance
    Bad: Funcionamento duvidoso e erros gramaticais geram insegurança pelo usuário.
    

    View Slide

25. Segurança » Testes/Performance
    [Vídeo] Bad: Muitos spinners, muito AJAX, alto risco de quebrar o funcionamento.
    

    View Slide

26. Segurança » Testes/Performance
    Bad: Cadastro que pedem dados sensíveis logo de início geram desconfiança.
    

    View Slide

27. Segurança » Testes/Performance
    Bad: Opções fora da lógica tradicional geram confusão e erros.
    

    View Slide

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
    

    View Slide

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
    

    View Slide

30. Entendendo o usuário:
    2.c
    Relacionamento » AI/Features
    

    View Slide

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?”
    

    View Slide

32. Relacionamento » AI/Features
    [Vídeo] Bad: O extrato do TAM Fidelidade é feito em outro site, com cadastro e interface
    separados.
    

    View Slide

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.
    

    View Slide

34. Relacionamento » AI/Features
    Good: Logo de início o usuário sabe do que se trata, o que vai ganhar e quanto custa.
    

    View Slide

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.
    

    View Slide

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
    

    View Slide

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
    

    View Slide

38. Entendendo o usuário:
    2.d
    Estima » AI/Customização
    

    View Slide

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.
    

    View Slide

40. Estima » AI/Customização
    Bad: Erro nada amigável e agressivo pode assustar o usuário.
    

    View Slide

41. Estima » AI/Customização
    [Vídeo] Good: O Twitter usa mensagens amigáveis e humanas.
    

    View Slide

42. Estima » AI/Customização
    Good: O Wordpress oferece muitos controles para customização dos posts.
    

    View Slide

43. Estima » AI/Customização
    Good: O Google Plus permite controle total sobre quem vai poder ler o post.
    

    View Slide

44. Estima » AI/Customização
    Good: O Facebook tem um controle granular sobre quem vê o quê.
    

    View Slide

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
    

    View Slide

46. Entendendo o usuário:
    2.e
    Realização » Visual/Emoção/
    Conforto/Desejo
    

    View Slide

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.
    

    View Slide

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.
    

    View Slide

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.
    

    View Slide

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.
    

    View Slide

51. Realização » Visual/Emoção/Conforto/Desejo
    12px/14px
    Comparando, antes era assim: bem menos legível.
    

    View Slide

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.
    

    View Slide

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.
    

    View Slide

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
    

    View Slide

55. Colocando na prática:
    3
    #comofas/
    

    View Slide

56. Colocando na prática:
    3.a
    Soluções prontas
    

    View Slide

57. Soluções prontas
    Bootstrap, from Twitter
    http://twitter.github.com/bootstrap/
    

    View Slide

58. Soluções prontas
    jQuery Mobile
    http://www.jquerymobile.com
    

    View Slide

59. Colocando na prática:
    3.b
    Ferramentas
    

    View Slide

60. Ferramentas
    Spin.js
    http://fgnass.github.com/spin.js/
    

    View Slide

61. Ferramentas
    Google Web Fonts
    http://www.google.com/webfonts
    

    View Slide

62. Ferramentas
    Typekit
    http://typekit.com/
    

    View Slide

63. Ferramentas
    CSS 3 Button Generator
    http://css3buttongenerator.com/
    

    View Slide

64. Ferramentas
    Adobe Kuler
    http://kuler.adobe.com/
    

    View Slide

65. Colocando na prática:
    3.b
    Referências
    

    View Slide

66. Referências
    JavaScript: The Good Parts
    

    View Slide

67. Referências
    Eloquent JavaScript
    

    View Slide

68. Referências
    Hardboiled Web Design
    

    View Slide

69. Referências
    HTML 5 for Web Designers
    

    View Slide

70. Referências
    Responsive Web Design
    

    View Slide

71. Referências
    O Design do Dia a Dia
    

    View Slide

72. Referências
    Universal Principles of Design
    

    View Slide

73. Referências
    Dive into HTML 5
    http://diveintohtml5.org/
    

    View Slide

74. Referências
    Jakob Nielsen
    http://useit.com
    

    View Slide

75. Referências
    CSS Tricks
    http://css-tricks.com/
    

    View Slide

76. Referências
    Smashing Magazine
    http://smashingmagazine.com
    

    View Slide

77. Colocando na prática:
    3.c
    Inspirações
    

    View Slide

78. Inspirações
    Little Big Details
    http://littlebigdetails.com/
    

    View Slide

79. Inspirações
    Dribbble
    http://www.dribbble.com
    

    View Slide

80. Estude, estude,
    estude, pratique,
    pratique, pratique
    

    View Slide

81. Pergunte, teste,
    refine, rinse,
    repeat
    

    View Slide

82. Obrigado!
    @shiota | www.eshiota.com | contato@eshiota.com | Dev in Sampa 2011
    

    View Slide