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. 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
  2. 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
  3. 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
  4. 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
  5. O produto precisa funcionar É simples: se o produto não

    funciona, o usuário vai embora. Fisiologia » Testes/Funcionalidade
  6. 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)
  7. 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á?”
  8. 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
  9. 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
  10. 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?”
  11. Relacionamento » AI/Features [Vídeo] Bad: O extrato do TAM Fidelidade

    é feito em outro site, com cadastro e interface separados.
  12. Relacionamento » AI/Features [Vídeo] Bad: Um ponto de interrupção no

    flow pode fazer com que o usuário desista da ação.
  13. Relacionamento » AI/Features Good: Logo de início o usuário sabe

    do que se trata, o que vai ganhar e quanto custa.
  14. 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.
  15. 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
  16. 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
  17. 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.
  18. 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
  19. 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.
  20. 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.
  21. 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.
  22. 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.
  23. 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.
  24. 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