desmistificando a ihc para programadores
DESCRIPTION
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.TRANSCRIPT
Talita Pagani - @talitapagani
Formação
Atuação Profissional
Comunidade
• IHC = Interação Humano-Computador
• HCI = Human-Computer Interaction
• Interação Homem-Máquina
• Etc.
• Filha da Engenharia de Software
”
“
ACM SIGCHI
IHC
Psicologia Cognitiva
Neurociência
Ergonomia
Engenharia
Design
Antropologia Sociologia
Filosofia
Linguística
Inteligência Artificial
Ciência da Computação
• 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)
http
s://interactio
n-d
esign.o
rg/mem
bers/im
agelibrary/zo
om
.htm
l?g=L21
lbW
JlcnM
vaW1
hZ2
VsaW
JyYXJ5
L2ltYW
dlcy9
VW
Elud
HJvaW
1h
Z2U
uan
Bn
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 • O sistema é útil e atende às
minhas necessidades Developers estão aqui
Designers às vezes estão aqui
UX não é da alçada do designer?
=
Interface é código
=
Seu usuário não pensa como você.
(SHIOTA, 2011)
Qual o botão certo do elevador?
Qual o botão certo do elevador?
http://impossibleobjects.com/coffeepot-for-masochists.html
*
• ISO/IEC 9126
*
How I Met Your Mother – S09E01
“Just click on Options”
http://j.mp/clickonoptions
QUE TRAZEM O DEVELOPER MAIS PRÓXIMO DO USUÁRIO
5
• SCRUM
• Design Participativo (Participatory Design)
•Protótipos em papel • Simples, rápido, eficiente, indolor
• Use seus Use Cases
• Fonte: http://www.flickr.com/photos/21218849@N03/with/3902255728/
• Fonte: http://www.flickr.com/photos/21218849@N03/with/3902255728/
4
• 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?
(
• 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
• 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
• 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)
• Atributos “alt” e “title” para imagens
• Associando label à campos de formulário
• Destaque o campo ativo do formulário com :focus
HALP!
http://getbootstrap.com/
http://purecss.io/
http://designmodo.com/demo/flat-ui/
!
• 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
• 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
• http://tableless.com.br/a-usabilidade-deve-ser-pensada-por-todos/#.UnJ_O_msim4
• http://tableless.com.br/usabilidade-para-desenvolvedores-front-end/#.UnJ_Rfmsim4
• http://www.usereffect.com/topic/25-point-website-usability-checklist
• https://interaction-design.org/
Obrigada! twitter.com/talitapagani | facebook.com/talitapagani | github.com/talitapagani
?