Baixado 44 vezes
Carregado porTalita Pagani
Desmistificando a IHC para programadores
O documento aborda a interação humano-computador, enfatizando a importância da experiência do usuário e da usabilidade no design de interfaces. Apresenta conceitos essenciais, práticas recomendadas e a necessidade de colaboração entre desenvolvedores e designers para garantir sistemas eficazes e agradáveis para os usuários. Além disso, destaca a multidisciplinaridade do campo e a relevância de pequenos detalhes na experiência global do usuário.
Mais conteúdo relacionado
Semelhante a Desmistificando a IHC para programadores
Desmistificando a IHC para programadores
- 1. Talita Pagani -@talitapagani
- 2.
- 3. • IHC =Interação Humano-Computador • HCI = Human-Computer Interaction • Interação Homem-Máquina • Etc. • Filha da Engenharia de Software
- 4.
- 5.
- 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.
- 8. Experiência do Usuário •O meusentimento 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. UX não éda alçada do designer?
- 11.
- 12.
- 14.
- 15. Seu usuário nãopensa como você. (SHIOTA, 2011)
- 17. Qual o botãocerto do elevador?
- 18. Qual o botãocerto do elevador?
- 19.
- 20.
- 21.
- 22.
- 23. How I MetYour Mother – S09E01 “Just click on Options” http://j.mp/clickonoptions
- 24. 5 QUE TRAZEM ODEVELOPER MAIS PRÓXIMO DO USUÁRIO
- 25. • SCRUM • DesignParticipativo (Participatory Design) • Protótipos em papel • Simples, rápido, eficiente, indolor • Use seus Use Cases
- 26.
- 27.
- 29.
- 30. • Seu site/aplicaçãodemora 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?
- 31.
- 32. • 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
- 33. • Campo deformulá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
- 34. • Facilitando aleitura 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)
- 35. • Atributos “alt”e “title” para imagens • Associando label à campos de formulário • Destaque o campo ativo do formulário com :focus
- 36.
- 37.
- 38.
- 39.
- 40.
- 41.
- 42. • 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
- 43. • 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
- 44. • 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/
- 45. Obrigada! twitter.com/talitapagani | facebook.com/talitapagani| github.com/talitapagani
- 46.