interface é código: aprimorando a experiência do usuário no front e no back-end

Talita Pagani | MSTECH / UFSCar | @talitapagani

▪ Performance front-end

▪ Performance back-end

▪ Validando requisitos funcionais e não funcionais com prototipação rápida

▪ Ferramentas para performance

Schedule

10/04/2014 Interface é código - Talita Pagani 2

Sobre

Formação

Atuação Profissional

Comunidade

10/04/2014 Interface é código - Talita Pagani 3

O que usabilidade e experiência do usuário têm a ver com código.

Para o usuário a interface é o sistema.

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

(SHIOTA, 2011)

Usabilidade

Eficácia

Eficiência

Engajamento

Tolerância a erros

Facilidade de

aprendizado

Satisfação de uso

(UX)

10/04/2014 Interface é código - Talita Pagani 7

• Interface parece única e profissional

Agradável

• Interface permite completar as tarefas de forma rápida e acurada

Usável

• Interface tem conteúdo correto, atualizado e compreensível

Confiável

• Interface funciona e não quebra

Funcional

Fonte: http://www.authentichtml5.com/ 10/04/2014 Interface é código - Talita Pagani 8

Qualidade em Uso

UX para desenvolvedores

Qualidade Interna

(código)

Qualidade Externa

(execução)

Qualidade em Uso

influencia influencia

depende de depende de

contextos de uso

Eficiência Produtividade Satisfação

(BEVAN, 1999)

10/04/2014 Interface é código - Talita Pagani 9

▪ Aspectos que influenciam a eficiência, eficácia e satisfação de uso:

▪ O desempenho para realizar ações;

▪ A eficiência do sistema;

▪ Tempo de resposta para ações do usuário;

▪ A resposta aos erros de uma entrada incorreta, de banco de dados, etc.

Fatores que influenciam a experiência do usuário

UX para desenvolvedores

10/04/2014 Interface é código - Talita Pagani 10

Fonte: http://pandion.pbworks.com/w/page/14026848/Sign%20In%20ui%20flow%20mockup

Autenticação, segurança, gerenciamento de sessão, gerenciamento de conexão

10/04/2014 Interface é código - Talita Pagani 11

Fonte: http://pandion.pbworks.com/w/page/14026848/Sign%20In%20ui%20flow%20mockup

Autenticação, segurança, gerenciamento de sessão, gerenciamento de conexão

10/04/2014 Interface é código - Talita Pagani 12

Fonte: http://www.cloudreviews.com/blog/web-performance-optimization-part-1

Frustração

Insatisfação

Irritação

10/04/2014 Interface é código - Talita Pagani 13

HTML, CSS e JS

▪ JavaScript: carregar no fim da página

▪ Minifique arquivos

▪ Fallback em caso de JS desabilitado no navegador do usuário

▪ HTML: planeje a estrutura, cuidado com espaços em branco (= aumento de KB)

▪ Evite o código cantina: espaguete, macarrão e lasanha

▪ CSS: simplifique seletores

▪ Minifique arquivos

O Básico

Front-end

10/04/2014 Interface é código - Talita Pagani 15

Áreas de clique adequadas CSS

Fonte: http://uxdesign.smashingmagazine.com/2008/12/15/10-useful-techniques-to-

improve-your-user-interface-designs/

10/04/2014 Interface é código - Talita Pagani 16

Diminua requisições HTTP Junção de arquivos

10/04/2014 Interface é código - Talita Pagani 17 Fonte: http://browserdiet.com/

Diminua requisições HTTP Cache de arquivos

10/04/2014 Interface é código - Talita Pagani 18 Fonte: http://browserdiet.com/

Garanta o acesso do conteúdo offline AppCache

10/04/2014 Interface é código - Talita Pagani 19 Fonte: http://dev.w3.org/html5/offline-webapps/

Diminua requisições HTTP CSS Sprites

10/04/2014 Interface é código - Talita Pagani 20

Carregamento modular de JS RequireJS

10/04/2014 Interface é código - Talita Pagani 21

Carregamento assíncrono de JS async

<script

src="example.js"></script>

<script async

src="example.js"></script>

Fonte: http://browserdiet.com/ 10/04/2014 Interface é código - Talita Pagani 22

Botões de formulário com ações/verbos Evite rótulos confusos

Fonte: http://uxdesign.smashingmagazine.com/2008/12/15/10-useful-techniques-to-

improve-your-user-interface-designs/

10/04/2014 Interface é código - Talita Pagani 23

AJAX

Validação de Formulários

10/04/2014 Interface é código - Talita Pagani 24

Não aplique AJAX em tudo Carregamento infinito

10/04/2014 Interface é código - Talita Pagani 25

Tratamento e prevenção de erros Boas mensagens de erro

Fontes: http://badmsg.tumblr.com/, http://miscellaneousprogtips.blogspot.com.br/2012/12/error-messages-

on-web-forms.html 10/04/2014 Interface é código - Talita Pagani 26

Teste seu código

Bugs == baixa UX

10/04/2014 Interface é código - Talita Pagani 27

▪ Atributos “alt” e “title” para imagens

▪ Associe label à campos de formulário

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

CSS: Outras soluções

Front-end

10/04/2014 Interface é código - Talita Pagani 28

Requisições, Tratamento de Erros e Tempo de Carregamento

Tratamento de erros

Evite erros genéricos.

Apresente ao usuário qual o problema e ajude-o a se recuperar do erro.

Fonte: http://www.symantec.com/

10/04/2014 Interface é código - Talita Pagani 30

Timeout

Carregamento infinito sem tratamento adequado causa uma frustração também infinita no seu usuário.

Defina tempo de requisições ao servidor e ao banco de dados.

Avise seus usuários de forma instrutiva em caso de erro de timeout.

Tempo total de espera: 2 horas.

10/04/2014 Interface é código - Talita Pagani 31

Timeout

Aqui, a própria página de erro de timeout “ensina” o desenvolvedor de como ele poderia consertar o erro.

10/04/2014 Interface é código - Talita Pagani 32

301/302 Redirect

Problema: página foi redirecionada de URL e usuário não consegue mais acessá-la

Solução: prover redirecionamento 301 ou 302. Sempre para a página correta, nunca para a Home.

Fonte: http://moz.com/blog/save-your-website-with-redirects

Friendly URL e URLs consistentes

Friendly URLs devem ser consistente com o conteúdo apresentado, não devem ser apenas de fácil memorização.

10/04/2014 Interface é código - Talita Pagani 34

Validando requisitos e coletando problemas de usabilidade

▪ O que é “Prototipação”?

▪ Projeto rápido da interface e das funcionalidades

▪ Engenharia de Software

▪ Representação dos requisitos

▪ Interação Humano-Computador

▪ Modelo de Interação entre usuário final e sistema

▪ Foco: avaliar resultados obtidos com o protótipo

Conceito

Prototipação

(Brown, 1996; Pressman, 2007; Spinelli; Rei, 2011)

10/04/2014 Interface é código - Talita Pagani 36

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

Porque prototipar e testar?

Prototipação

10/04/2014 Interface é código - Talita Pagani 37

▪ Uma das formas mais utilizadas de prototipação rápida

▪ Simples confecção, fácil execução

▪ Economia de tempo e dinheiro

▪ Rápida incorporação de feedback no momento de produção

▪ Facilita a comunicação

▪ Dentro da equipe de desenvolvimento

▪ Entre a equipe de desenvolvimento e os clientes

A prototipação em papel

Prototipação

10/04/2014 Interface é código - Talita Pagani 38

▪ Vantagens

▪ Lápis e papel são baratos

▪ Não requerem especialistas ou programadores

▪ Pode-se rapidamente descobrir qual parte da interface trabalha bem e quais dão problemas

▪ Modificações imediatas durante o teste

▪ Permite realização de vários testes de usabilidade ▪ Não há demora para receber feedback do usuário

▪ Refinação mais rápida

▪ Interações reais do usuário

A prototipação em papel

Prototipação

10/04/2014 Interface é código - Talita Pagani 39

▪ Desvantagens

▪ Performance, manipulação física e operação

▪ São melhor identificadas por protótipos de alta fidelidade

▪ Serão sempre limitados

▪ Pessoas podem se sentir mais confortáveis com protótipos no computador

A prototipação em papel

Prototipação

10/04/2014 Interface é código - Talita Pagani 40

Desenhando o protótipo

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

Desenhando o protótipo

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

Simulando as interações da interface

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

Elucida requisitos

Melhora a qualidade da especificação

Permite identificar características desejáveis da interface

Imprecisão sobre o tempo do projeto

Omissão de comentários

Nem todo requisito pode ser prototipado

Vantagens e Desvantagens

Prototipação

10/04/2014 Interface é código - Talita Pagani 44

10/04/2014 Interface é código - Talita Pagani 45

Browser Diet – http://www.browserdiet.com

10/04/2014 Interface é código - Talita Pagani 47

10/04/2014 Interface é código - Talita Pagani 48

YSlow – http://yslow.org/

10/04/2014 Interface é código - Talita Pagani 49

Web Page Test – http://www.webpagetest.org/

10/04/2014 Interface é código - Talita Pagani 50

HTTP Archive – http://httparchive.org/

Novas APIs do W3C

10/04/2014 Interface é código - Talita Pagani 51 Fonte: https://dvcs.w3.org/hg/webperf/raw-

file/tip/specs/NavigationTiming/Overview.html

Facilidade de uso

Complexidade

de

implementação

10/04/2014 Interface é código - Talita Pagani 53

▪ Menos treinamentos;

▪ Menos chamados no suporte da empresa ou do produto;

▪ Credibilidade do seu usuário e do seu cliente;

▪ Melhor aceitação do seu produto;

▪ Usabilidade de código: menor custo de manutenção.

O que ganhamos com isso?

Finalizando

10/04/2014 Interface é código - Talita Pagani 54

▪ Toda interação é tratada no código

▪ Performance matters

▪ Todos trabalhando juntos:

▪ Toda a equipe participando em todas as fases do projeto

▪ Designers e Programadores colaborando na coleta de requisitos

▪ UX Designers colaborando na implementação

▪ Programadores colaborando na concepção de interface e no design da interação

Pensamentos finais

Finalizando

10/04/2014 Interface é código - Talita Pagani 55

▪ RequireJS. Disponível em: http://requirejs.org/docs/api.html

▪ NOUPE. 2012. Get Your Form On: Modern Web Forms Tutorials. Disponível em: http://www.noupe.com/design/get-your-form-on-modern-web-forms-tutorials.html

▪ DeveloperJI. 2013. Aprenda a crear formularios profesionales con HTML5 y CSS. Disponível em: http://www.developerji.com/Post/Aprenda-a-crear-formularios-profesionales-con-HTML5-y-CSS-/2108#sthash.Z6cSn3Qg.dpuf

▪ EIS, D. Tableless. 2011. Performance do seu CSS. Disponível em: http://tableless.com.br/melhorando-performance-css/

Referências

10/04/2014 Interface é código - Talita Pagani 56

▪ MOZILLA DEVELOPER NETWORK. Writing efficient CSS. Disponível em: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Writing_efficient_CSS

▪ DUQUENOY, J. Tuts+. 2012. CSS Sprite Sheets: Best Practices, Tools and Helpful Applications. Disponível em: http://webdesign.tutsplus.com/articles/css-sprite-sheets-best-practices-tools-and-helpful-applications--webdesign-8340

▪ BROWN, J. “Methodologies for the Creation of Interactive Software”. Relatório Técnico. Mai. 1996.

▪ PRESSMAN, R. “Software Engineering: A Practitioner's Approach”. New York: McGraw-Hill, Inc., 2007.

Referências

10/04/2014 Interface é código - Talita Pagani 57

▪ QUESENBERY, W. What Does Usability Mean: Looking Beyond ‘Ease of Use’. Disponível em: http://www.wqusability.com/articles/more-than-ease-of-use.html

▪ MICROSOFT. Usability in Software Design. Disponível em: http://msdn.microsoft.com/en-us/library/ms997577.aspx

▪ FADEYEV, D. Smashing Magazine. 2008. 10 Useful Techniques To Improve Your User Interface Designs. Disponível em: http://uxdesign.smashingmagazine.com/2008/12/15/10-useful-techniques-to-improve-your-user-interface-designs/

Referências

10/04/2014 Interface é código - Talita Pagani 58

▪ Spinelli, T.; Rei, R. “Design de Interação – além do lápis e papel”. Campus Party (Palestra), 2011.

▪ 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

▪ ROCHA, H. V.; BARANAUSKAS, M. C. C. Design e avaliação de interfaces humano-computador. Campinas, SP: UNICAMP-IC-NIED, 244 p., 2003.

▪ BEVAN, N. Quality in Use: Meeting User Needs for Quality. In: Journal of System and Software, v. 49, 1999, p. 89-96.

Referências

10/04/2014 Interface é código - Talita Pagani 59

▪ 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://tableless.com.br/a-usabilidade-deve-ser-pensada-por-todos/#.UnJ_O_msim4

▪ http://tableless.com.br/usabilidade-para-desenvolvedores-front-end/#.UnJ_Rfmsim4

Outras indicações

10/04/2014 Interface é código - Talita Pagani 60

@talitapagani | talita.cpb@gmail.com