Desmistificando a IHC para programadores

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/

http://ui-patterns.com/

!

• 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

?