interface é código: aprimorando a experiência do usuário no front e no back-end
DESCRIPTION
Sendo desenvolvedor de software, qual a minha contribuição e o meu papel para a usabilidade dos sistemas que desenvolvo? Acredite, muita coisa que prejudica a usabilidade não está no design do seu sistema, mas no código dele. Nessa palestra, é abordado como o desenvolvedor/analista/engenheiro pode melhorar a experiência do usuário (UX) para aplicações web – com boas práticas de JavaScript, tratamento, prevenção e recuperação de erros, configurações de cache e otimização de requisições HTTP com exemplos de sites de diferentes portes. Também é mostrado como validar e testar rapidamente requisitos funcionais e não funcionais com prototipagem rápida e quais ferramentas podem ser utilizadas para analisar e verificar diversos pontos do seu site.TRANSCRIPT
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 | [email protected]
