Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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.

Eduardo Shiota Yasuda

August 27, 2011
Tweet

More Decks by Eduardo Shiota Yasuda

Other Decks in Design

Transcript

  1. User Experience
    para Developers
    @shiota | www.eshiota.com | co[email protected] | 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 | [email protected] | Dev in Sampa 2011

    View Slide