Desmistificando a IHC para programadores

1,043 views
885 views

Published on

O que é essa tal de Experiência de Usuário (ou UX)? UX não é da alçada do designer? Eu sou desenvolvedor de software, qual a minha contribuição e o meu papel para a usabilidade dos sistemas que desenvolvo? Estas são perguntas muito frequentes no universo do desenvolvimento de software e, nesta palestra, será abordado como o desenvolvedor/analista/engenheiro tem um papel importante na garantia da experiência de uso e usabilidade e que, sim, UX também envolve o código e até mesmo a metodologia de desenvolvimento que você utiliza.

Published in: Technology

Desmistificando a IHC para programadores

  1. 1. Talita Pagani - @talitapagani
  2. 2. Formação Atuação Profissional Comunidade
  3. 3. • IHC = Interação Humano-Computador • HCI = Human-Computer Interaction • Interação Homem-Máquina • Etc. • Filha da Engenharia de Software
  4. 4. “ ACM SIGCHI ”
  5. 5. Psicologia Cognitiva Ciência da Computação Neurociência Inteligência Artificial Ergonomia IHC Linguística Engenharia Filosofia Design Sociologia Antropologia
  6. 6. • User Experience = Experiência do Usuário • A neta da Engenharia de Software e uma das filhas da IHC "a person's perceptions and responses that result from the use or anticipated use of a product, system or service" (ISO 9241-210)
  7. 7. https://interaction-design.org/members/imagelibrary/zoom.html?g=L21lbWJlcnMvaW1hZ2VsaWJyYXJ5L2ltYWdlcy9VWEludHJvaW1hZ2UuanBn
  8. 8. Experiência do Usuário •O meu sentimento geral sobre o sistema é bom Design de Interação •A aparência do sistema me proporciona uma interação agradável Usabilidade •Eu consigo usar as funcionalidades de modo fácil Utilidade Developers estão aqui • O sistema é útil e atende às minhas necessidades Designers às vezes estão aqui
  9. 9. UX não é da alçada do designer?
  10. 10. =
  11. 11. Interface é código
  12. 12. =
  13. 13. Seu usuário não pensa como você. (SHIOTA, 2011)
  14. 14. Qual o botão certo do elevador?
  15. 15. Qual o botão certo do elevador?
  16. 16. http://impossibleobjects.com/coffeepot-for-masochists.html
  17. 17. *
  18. 18. • ISO/IEC 9126
  19. 19. *
  20. 20. How I Met Your Mother – S09E01 “Just click on Options” http://j.mp/clickonoptions
  21. 21. 5 QUE TRAZEM O DEVELOPER MAIS PRÓXIMO DO USUÁRIO
  22. 22. • SCRUM • Design Participativo (Participatory Design) • Protótipos em papel • Simples, rápido, eficiente, indolor • Use seus Use Cases
  23. 23. • Fonte: http://www.flickr.com/photos/21218849@N03/with/3902255728/
  24. 24. • Fonte: http://www.flickr.com/photos/21218849@N03/with/3902255728/
  25. 25. 4
  26. 26. • Seu site/aplicação demora para carregar? • Os campos de formulário são de fácil identificação? • Os botões de ação contém rótulos adequado às ações que representam? • Os botões possuem destaques distintos que não induzem ao erro? • As mensagens de erro ajudam o usuário a solucionar o problema? • Mais importante: está tudo funcionando?
  27. 27. (
  28. 28. • Interação é tratada no código • • • • Tratamento de erros Controles de formulários Comportamentos HTML/CSS/JS • Protótipos • Durante a implementação, aparecem questões funcionais de facilidade de uso que não foram previstas nos wireframes, storyboards e diagramas de fluxo de interação
  29. 29. • Campo de formulário sem validação • Erro ou exceção sem tratamento (try...catch básico, galere) • Cadastro que não informa se a operação “salvar” foi bem sucedida • Campos sem valores default
  30. 30. • Facilitando a leitura com line-height • Utilize margins e paddings para distinguir itens • O logo deve ser clicável • Textos que não são links não devem ser sublinhados (evitar)
  31. 31. • Atributos “alt” e “title” para imagens • Associando label à campos de formulário • Destaque o campo ativo do formulário com :focus
  32. 32. HALP!
  33. 33. http://getbootstrap.com/
  34. 34. http://purecss.io/
  35. 35. http://designmodo.com/demo/flat-ui/
  36. 36. http://ui-patterns.com/
  37. 37. !
  38. 38. • Multidisciplinar • Interface é código • Interface e UX bem sucedida = evolução tecnológica • Interação satisfatória = software/aplicação de qualidade • Quando se trata de usabilidade e UX, um detalhe pode comprometer a experiência do usuário
  39. 39. • ROCHA, H. V.; BARANAUSKAS, M. C. C. Design e avaliação de interfaces humano-computador. Campinas, SP: UNICAMP-IC-NIED, 244 p., 2003. • SHIOTA, E. S. User Experience para Developers. In: FrontIn Sampa, São Paulo, 2011. http://www.slideshare.net/eshiota/user-experience-para-developers-dev-in-sampa-2011 • http://uxmag.com/articles/user-experience-for-developers • http://developerexperience.org/ • http://www.disambiguity.com/what-is-a-ux-developer/ • http://commondatastorage.googleapis.com/io-2013/presentations/1252_UX_design_for_developers.EXT_.pdf • http://pt.wikipedia.org/wiki/ISO/IEC_9126
  40. 40. • http://tableless.com.br/a-usabilidade-deve-serpensada-por-todos/#.UnJ_O_msim4 • http://tableless.com.br/usabilidade-paradesenvolvedores-front-end/#.UnJ_Rfmsim4 • http://www.usereffect.com/topic/25-point-websiteusability-checklist • https://interaction-design.org/
  41. 41. Obrigada! twitter.com/talitapagani | facebook.com/talitapagani | github.com/talitapagani
  42. 42. ?

×