46
Talita Pagani - @talitapagani

Desmistificando a IHC para programadores

Embed Size (px)

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.

Citation preview

Page 1: Desmistificando a IHC para programadores

Talita Pagani - @talitapagani

Page 2: Desmistificando a IHC para programadores

Formação

Atuação Profissional

Comunidade

Page 3: Desmistificando a IHC para programadores

• IHC = Interação Humano-Computador

• HCI = Human-Computer Interaction

• Interação Homem-Máquina

• Etc.

• Filha da Engenharia de Software

Page 4: Desmistificando a IHC para programadores

ACM SIGCHI

Page 5: Desmistificando a IHC para programadores

IHC

Psicologia Cognitiva

Neurociência

Ergonomia

Engenharia

Design

Antropologia Sociologia

Filosofia

Linguística

Inteligência Artificial

Ciência da Computação

Page 6: Desmistificando a IHC para programadores

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

Page 8: Desmistificando a IHC para programadores

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

Page 9: Desmistificando a IHC para programadores

UX não é da alçada do designer?

Page 10: Desmistificando a IHC para programadores
Page 11: Desmistificando a IHC para programadores

=

Page 12: Desmistificando a IHC para programadores

Interface é código

Page 13: Desmistificando a IHC para programadores
Page 14: Desmistificando a IHC para programadores

=

Page 15: Desmistificando a IHC para programadores

Seu usuário não pensa como você.

(SHIOTA, 2011)

Page 16: Desmistificando a IHC para programadores
Page 17: Desmistificando a IHC para programadores

Qual o botão certo do elevador?

Page 18: Desmistificando a IHC para programadores

Qual o botão certo do elevador?

Page 20: Desmistificando a IHC para programadores

*

Page 22: Desmistificando a IHC para programadores

*

Page 23: Desmistificando a IHC para programadores

How I Met Your Mother – S09E01

“Just click on Options”

http://j.mp/clickonoptions

Page 24: Desmistificando a IHC para programadores

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

5

Page 25: Desmistificando a IHC para programadores

• SCRUM

• Design Participativo (Participatory Design)

•Protótipos em papel • Simples, rápido, eficiente, indolor

• Use seus Use Cases

Page 26: Desmistificando a IHC para programadores

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

Page 27: Desmistificando a IHC para programadores

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

Page 28: Desmistificando a IHC para programadores
Page 29: Desmistificando a IHC para programadores

4

Page 30: Desmistificando a IHC para programadores

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

Page 31: Desmistificando a IHC para programadores

(

Page 32: Desmistificando a IHC para programadores

• 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

Page 33: Desmistificando a IHC para programadores

• 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

Page 34: Desmistificando a IHC para programadores

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

Page 35: Desmistificando a IHC para programadores

• Atributos “alt” e “title” para imagens

• Associando label à campos de formulário

• Destaque o campo ativo do formulário com :focus

Page 36: Desmistificando a IHC para programadores

HALP!

Page 37: Desmistificando a IHC para programadores

http://getbootstrap.com/

Page 38: Desmistificando a IHC para programadores

http://purecss.io/

Page 41: Desmistificando a IHC para programadores

!

Page 42: Desmistificando a IHC para programadores

• 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

Page 43: Desmistificando a IHC para programadores

• 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

Page 44: Desmistificando a IHC para programadores

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

Page 46: Desmistificando a IHC para programadores

?