Interface é código: aprimorando a experiência do usuário no front e no back-end

996 visualizações

Publicada em

Palestra realizada no The Developer's Conference (TDC) em 24 de julho de 2015. Nessa palestra, será abordado como o desenvolvedor/analista/engenheiro pode melhorar a experiência do usuário (UX) para aplicações web com boas práticas de JavaScript, tratamento, prevenção e recuperação de erros, configurações de cache e otimização de requisições HTTP com exemplos de sites de diferentes portes. Grande parte dos tópicos abordados se relacionam com a performance front-end e back-end contextualizados sob o impacto sobre a experiência de uso. Também será mostrado como validar e testar rapidamente requisitos funcionais e não funcionais com prototipagem rápida e quais ferramentas podem ser utilizadas para analisar e verificar diversos pontos do seu site.

Publicada em: Internet
0 comentários
9 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
996
No SlideShare
0
A partir de incorporações
0
Número de incorporações
78
Ações
Compartilhamentos
0
Downloads
20
Comentários
0
Gostaram
9
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Interface é código: aprimorando a experiência do usuário no front e no back-end

  1. 1. Globalcode – Open4education Trilha – Web Interface é código Aprimorando a UX no front e no back-end Talita Pagani Consultora independente em UX | Mestranda em Computação @ UFSCar
  2. 2. Globalcode – Open4education Apresentação Bacharel e mestranda em Computação Professora universitária Palestrante em eventos de desenvolvimento web 10 de XP em TI Web designer, front e back-end developer, tester, assistente de GP e analista de requisitos Eventualmente escreve em alguns blogs
  3. 3. Globalcode – Open4education UX É COISA DE DESENVOLVEDOR(A)?
  4. 4. Globalcode – Open4education “UX é um termo usado frequentemente para sintetizar toda a experiência com um produto de software. A UX de um aplicativo é maior que a soma de suas partes.” (Lowdermilk, 2013)
  5. 5. Globalcode – Open4education Mitos e equívocos UX ≠ UI UX ᑐ UI
  6. 6. Globalcode – Open4education “A experiência do usuário deve ser entendida como o ciclo de relacionamento de um cliente com a marca, ou seja, precisamos entender todos os pontos de interação que esse usuário terá [...]” (Agni, 2014)
  7. 7. Globalcode – Open4education Mitos e equívocos UX Designer cuida de tudo relacionado à experiência do usuário O trabalho o UX Designer acaba quando inicia o desenvolvimento Desenvolvedores “só” programam
  8. 8. Globalcode – Open4education Mitos e equívocos UX é interface então é responsabilidade dos designers Se o usuário errou a culpa é dele “A gente sabe o que é melhor para o usuário” “Mas tá funcionando, olha aqui”
  9. 9. Globalcode – Open4education Mitos e equívocos Atender os requisitos funcionais não significa que a sua aplicação tem qualidade e que supre as necessidades dos usuários Exemplo: projeto cadeira A cadeira deve conter Quatro pernas Assento Encosto
  10. 10. Globalcode – Open4education Expectativa Realidade
  11. 11. Globalcode – Open4education UX é uma soma de fatores Fluxo fácil de compreender Visual agradável Textos claros e concisos Boa usabilidade Páginas leves de carregar Site que funciona em qualquer plataforma ou dispositivo (TEIXEIRA, 2015)
  12. 12. Globalcode – Open4education “Quando se trata de usabilidade, um detalhe pode afetar a experiência do usuário. Toda a equipe tem que trabalhar em sintonia e cooperativamente para que a experiência do usuário seja abordada corretamente em todos os aspectos.” http://tableless.com.br/a-usabilidade-deve-ser-pensada-por-todos/
  13. 13. Globalcode – Open4education UX Designers + Devs = Toda interação é tratada no código Performance matters Vamos trabalhar juntos? Toda a equipe participando em todas as fases do projeto Designers e Programadores colaborando na coleta de requisitos UX Designers colaborando na implementação Programadores colaborando na concepção de interface e no design da interação
  14. 14. Globalcode – Open4education Camadas da qualidade De Uso Externa Interna Qualidade de código (front e back-end) Eficiência Qualidade em execução (tudo funciona e não quebra) - Produtividade Boa experiência para o usuário Satisfação de uso Com base em Bevan (1999)
  15. 15. Globalcode – Open4education Significa que... “Se o usuário clica em um botão que não funciona, isso causará um problema na experiência do usuário. De forma similar, se o usuário clica em um botão que não funciona da forma que ele espera que funcione, isso também causará um problema na experiência do usuário.” http://arquiteturadeinformacao.com/user-experience/otimizando-a-experiencia-do-usuario- na-etapa-de-quality-assurance-qa
  16. 16. Globalcode – Open4education Fatores de impacto Desempenho Resposta às requisições Tratamento e prevenção de erro Banco de dados Bugs Segurança
  17. 17. Globalcode – Open4education Fatores de impacto Para cada segundo de atraso no carregamento 7% menos conversões 11% menos visualizações de página 16% de decréscimo em satisfação do usuário Fonte: http://www.cloudreviews.com/blog/web-performance-optimization-part-1
  18. 18. Globalcode – Open4education UX NO FRONT-END
  19. 19. Globalcode – Open4education CSS Áreas de clique adequadas Fonte: http://uxdesign.smashingmagazine.com/2008/12/15/10-useful-techniques-to- improve-your-user-interface-designs/
  20. 20. Globalcode – Open4education Diminua requisições HTTP Junção de arquivos Fonte: http://browserdiet.com/
  21. 21. Globalcode – Open4education Diminua requisições HTTP Cache de arquivos no .htaccess Fonte: http://browserdiet.com/
  22. 22. Globalcode – Open4education Diminua requisições HTTP CSS Sprites
  23. 23. Globalcode – Open4education AppCache Garanta o acesso offline Fonte: http://dev.w3.org/html5/offline-webapps/
  24. 24. Globalcode – Open4education Carregamento modular de JS Carregue os scripts sob demanda
  25. 25. Globalcode – Open4education Carregamento modular de JS Carregue assincronamente o JS <script src="example.js"></script> <script async src="example.js"></script> Fonte: http://browserdiet.com/
  26. 26. Globalcode – Open4education Validação de formulários Validade em tempo real os inputs
  27. 27. Globalcode – Open4education AJAX Cuidado com o carregamento infinito Único conteúdo totalmente carregado
  28. 28. Globalcode – Open4education Mensagens de erro Ajude os usuários a se recuperar dos erros
  29. 29. Globalcode – Open4education Bugs Teste seu código
  30. 30. Globalcode – Open4education UX NO BACK-END
  31. 31. Globalcode – Open4education Tratamento de erros Evite erros genéricos
  32. 32. Globalcode – Open4education Timeout Defina tempo de requisições ao servidor e ao banco de dados
  33. 33. Globalcode – Open4education Timeout Aqui, a própria página de erro de timeout “ensina” o desenvolvedor de como ele poderia consertar o erro
  34. 34. Globalcode – Open4education Redirecionamentos Faça 301/302 Redirect de forma correta
  35. 35. Globalcode – Open4education URLs Friendly URL e URLs consistentes
  36. 36. Globalcode – Open4education PENSANDO EM UX (COM ARTEFATOS DE DEVS)
  37. 37. Globalcode – Open4education Prototipação rápida https://www.youtube.com/watch?v=GrV2SZuRPv0
  38. 38. Globalcode – Open4education User Stories https://twitter.com/GoatUserStories/status/585570199883112449 Como um [ator] eu quero/preciso de/devo/gostaria de [ação] para [funcionalidade]. Como um vendedor responsável pelo setor de livros eu quero procurar por livros filtrando por nome para que seja possível verificar se o livro X está disponível para pronta entrega.
  39. 39. Globalcode – Open4education Interface Design Patterns http://ui-patterns.com/
  40. 40. Globalcode – Open4education TOOLS
  41. 41. Globalcode – Open4education Browser Diet – http://www.browserdiet.com
  42. 42. Globalcode – Open4education YSlow – http://yslow.org/
  43. 43. Globalcode – Open4education Web Page Test – http://www.webpagetest.org/
  44. 44. Globalcode – Open4education HTTP Archive – http://httparchive.org/
  45. 45. Globalcode – Open4education Google Page Speed – https://developers.google.com/speed/pagespeed/insights/
  46. 46. Globalcode – Open4education “O poder é de vocês!”
  47. 47. Globalcode – Open4education Este assunto continua na próxima palestra: “Otimizando a performance do front- end em uma aplicação real”
  48. 48. Globalcode – Open4education Referências Lowdermilk, T. Design Centrado no Usuário. O’Reilly Media, 2013. Agni, E. UX no E-commerce: mapeando a jornada do consumidor. 2013. Disponível em: http://www.uxdesign.blog.br/user-experience/ Teixeira, F. UX para GPs #2 – o que faz um UX designer. Disponível em: http://arquiteturadeinformacao.com/user-experience/ux-para-gps-2-o-que-faz-um-ux-designer/ BEVAN, N. Quality in Use: Meeting User Needs for Quality. In: Journal of System and Software, 1999. Head, C. The Rise of Customer Expectations - UX - User Experience (4/6). Disponível em: https://www.linkedin.com/pulse/20140709083014-64515439-the-rise-of-customer-expectations- user-experience-4-6 Quesenbery, W. What Does Usability Mean: Looking Beyond ‘Ease of Use’. Disponível em: http://www.wqusability.com/articles/more-than-ease-of-use.html Fadeyev, D. Smashsing Magazine. 2008. 10 Useful Techniques To Improve Your User Interface Designs. Disponível em: http://uxdesign.smashingmagazine.com/2008/12/15/10-useful- techniques-to-improve-your-user-interface-designs/
  49. 49. Globalcode – Open4education OBRIGADA! facebook.com/talitapagani twitter.com/talitapagani br.linkedin.com/in/talitapagani github.com/talitapagani slideshare.net/talitapagani talita.cpb@gmail.com

×