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.

1. Talita Pagani | MSTECH / UFSCar | @talitapagani

2. ▪ Performance front-end
▪ Performance back-end
▪ Validando requisitos funcionais e não
funcionais com prototipação rápida
▪ Ferramentas para performance
Schedule
10/04/2014Interface é código - Talita Pagani 2

3. Sobre
Formação
Atuação Profissional
Comunidade
10/04/2014Interface é código - Talita Pagani 3

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

5. Para o usuário a interface é o sistema.

6. Seu usuário não pensa como você.
(SHIOTA, 2011)

7. Usabilidade
Eficácia
Eficiência
Engajamento
Tolerância a
erros
Facilidade
de
aprendizado
Satisfação
de uso
(UX)
10/04/2014Interface é código - Talita Pagani 7

8. • 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/2014Interface é código - Talita Pagani 8

9. 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/2014Interface é código - Talita Pagani 9

10. ▪ 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/2014Interface é código - Talita Pagani 10

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/2014Interface é código - Talita Pagani 11

12. 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/2014Interface é código - Talita Pagani 12

13. Fonte: http://www.cloudreviews.com/blog/web-performance-optimization-part-1
Frustração
Insatisfação
Irritação
10/04/2014Interface é código - Talita Pagani 13

14. HTML, CSS e JS

15. ▪ 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/2014Interface é código - Talita Pagani 15

16. Áreas de clique
adequadas
CSS
Fonte: http://uxdesign.smashingmagazine.com/2008/12/15/10-useful-techniques-to-
improve-your-user-interface-designs/
10/04/2014Interface é código - Talita Pagani 16

17. Diminua requisições
HTTP
Junção de arquivos
10/04/2014Interface é código - Talita Pagani 17Fonte: http://browserdiet.com/

18. Diminua requisições
HTTP
Cache de arquivos
10/04/2014Interface é código - Talita Pagani 18Fonte: http://browserdiet.com/

19. Garanta o acesso do
conteúdo offline
AppCache
10/04/2014Interface é código - Talita Pagani 19Fonte: http://dev.w3.org/html5/offline-webapps/

20. Diminua requisições
HTTP
CSS Sprites
10/04/2014Interface é código - Talita Pagani 20

21. Carregamento
modular de JS
RequireJS
10/04/2014Interface é código - Talita Pagani 21

22. Carregamento
assíncrono de JS
async
<script
src="example.js"></script>
<script async
src="example.js"></script>
Fonte: http://browserdiet.com/ 10/04/2014Interface é código - Talita Pagani 22

23. 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/2014Interface é código - Talita Pagani 23

24. AJAX
Validação de
Formulários
10/04/2014Interface é código - Talita Pagani 24

25. Não aplique AJAX em
tudo
Carregamento infinito
10/04/2014Interface é código - Talita Pagani 25

26. 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/2014Interface é código - Talita Pagani 26

27. Teste seu código
Bugs == baixa UX
10/04/2014Interface é código - Talita Pagani 27

28. ▪ 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/2014Interface é código - Talita Pagani 28

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

30. 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/2014Interface é código - Talita Pagani 30

31. 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/2014Interface é código - Talita Pagani 31

32. Timeout
Aqui, a própria página de
erro de timeout “ensina”
o desenvolvedor de
como ele poderia
consertar o erro.
10/04/2014Interface é código - Talita Pagani 32

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

34. 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/2014Interface é código - Talita Pagani 34

35. Validando requisitos e coletando problemas de usabilidade

36. ▪ 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/2014Interface é código - Talita Pagani 36

37. ▪ 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/2014Interface é código - Talita Pagani 37

38. ▪ 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/2014Interface é código - Talita Pagani 38

39. ▪ 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/2014Interface é código - Talita Pagani 39

40. ▪ 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/2014Interface é código - Talita Pagani 40

41. Desenhando o
protótipo
Fonte:
http://www.flickr.com/photos/21218849@N03/with/390
2255728/

42. Desenhando o
protótipo
Fonte:
http://www.flickr.com/photos/21218849@N03/with/3902255
728/

43. Simulando as
interações da
interface
Fonte:
http://www.flickr.com/photos/21218849@N03/with/390225
5728/

44. 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/2014Interface é código - Talita Pagani 44

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

47. Browser Diet – http://www.browserdiet.com
10/04/2014Interface é código - Talita Pagani 47

48. 10/04/2014Interface é código - Talita Pagani 48
YSlow – http://yslow.org/

49. 10/04/2014Interface é código - Talita Pagani 49
Web Page Test – http://www.webpagetest.org/

50. 10/04/2014Interface é código - Talita Pagani 50
HTTP Archive – http://httparchive.org/

51. Novas APIs do W3C
10/04/2014Interface é código - Talita Pagani 51Fonte: https://dvcs.w3.org/hg/webperf/raw-
file/tip/specs/NavigationTiming/Overview.html

53. Facilidade de uso
Complexidade
de
implementação
10/04/2014Interface é código - Talita Pagani 53

54. ▪ 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/2014Interface é código - Talita Pagani 54

55. ▪ 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/2014Interface é código - Talita Pagani 55

56. ▪ 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/2014Interface é código - Talita Pagani 56

57. ▪ 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/2014Interface é código - Talita Pagani 57

58. ▪ 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/2014Interface é código - Talita Pagani 58

59. ▪ 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/2014Interface é código - Talita Pagani 59

60. ▪ 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_.pd
f
▪ 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/2014Interface é código - Talita Pagani 60

61. @talitapagani | talita.cpb@gmail.com