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.

1. Talita Pagani - @talitapagani

2. Formação
Atuação Profissional
Comunidade

3. • IHC = Interação Humano-Computador
• HCI = Human-Computer Interaction
• Interação Homem-Máquina
• Etc.
• Filha da Engenharia de Software

4. “
ACM SIGCHI
”

5. Psicologia
Cognitiva
Ciência da
Computação
Neurociência
Inteligência
Artificial
Ergonomia
IHC
Linguística
Engenharia
Filosofia
Design
Sociologia
Antropologia

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. https://interaction-design.org/members/imagelibrary/zoom.html?g=L21lbWJlcnMvaW1hZ2VsaWJyYXJ5L2ltYWdlcy9VWEludHJvaW1hZ2UuanBn

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. UX não é da alçada do designer?

11. =

12. Interface é código

14. =

15. Seu usuário não pensa como você.
(SHIOTA, 2011)

17. Qual o botão certo do elevador?

18. Qual o botão certo do elevador?

19. http://impossibleobjects.com/coffeepot-for-masochists.html

20. *

21. • ISO/IEC 9126

22. *

23. How I Met Your Mother – S09E01
“Just click on Options”
http://j.mp/clickonoptions

24. 5
QUE TRAZEM O DEVELOPER MAIS PRÓXIMO DO
USUÁRIO

25. • SCRUM
• Design Participativo (Participatory Design)
• Protótipos em papel
• Simples, rápido, eficiente, indolor
• Use seus Use Cases

26. •
Fonte: http://www.flickr.com/photos/21218849@N03/with/3902255728/

27. •
Fonte: http://www.flickr.com/photos/21218849@N03/with/3902255728/

29. 4

30. • 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?

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 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

34. • 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)

35. • Atributos “alt” e “title” para imagens
• Associando label à campos de formulário
• Destaque o campo ativo do formulário com
:focus

36. HALP!

37. http://getbootstrap.com/

38. http://purecss.io/

39. http://designmodo.com/demo/flat-ui/

40. http://ui-patterns.com/

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. ?