Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

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

1 177 vues

Publié le

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.

Publié dans : Internet
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici

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

×