• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Interface é código: aprimorando a experiência do usuário no front e no back-end
 

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

on

  • 1,037 views

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

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.

Statistics

Views

Total Views
1,037
Views on SlideShare
1,035
Embed Views
2

Actions

Likes
8
Downloads
26
Comments
0

2 Embeds 2

https://www.linkedin.com 1
http://www.linkedin.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Interface é código: aprimorando a experiência do usuário no front e no back-end Interface é código: aprimorando a experiência do usuário no front e no back-end Presentation 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/2014Interface é código - Talita Pagani 2
    • Sobre Formação Atuação Profissional Comunidade 10/04/2014Interface é 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/2014Interface é 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/2014Interface é 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/2014Interface é 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/2014Interface é 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/2014Interface é 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/2014Interface é código - Talita Pagani 12
    • 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
    • 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/2014Interface é 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/2014Interface é código - Talita Pagani 16
    • Diminua requisições HTTP Junção de arquivos 10/04/2014Interface é código - Talita Pagani 17Fonte: http://browserdiet.com/
    • Diminua requisições HTTP Cache de arquivos 10/04/2014Interface é código - Talita Pagani 18Fonte: http://browserdiet.com/
    • Garanta o acesso do conteúdo offline AppCache 10/04/2014Interface é código - Talita Pagani 19Fonte: http://dev.w3.org/html5/offline-webapps/
    • Diminua requisições HTTP CSS Sprites 10/04/2014Interface é código - Talita Pagani 20
    • Carregamento modular de JS RequireJS 10/04/2014Interface é 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/2014Interface é 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/2014Interface é código - Talita Pagani 23
    • AJAX Validação de Formulários 10/04/2014Interface é código - Talita Pagani 24
    • Não aplique AJAX em tudo Carregamento infinito 10/04/2014Interface é 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/2014Interface é código - Talita Pagani 26
    • Teste seu código Bugs == baixa UX 10/04/2014Interface é 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/2014Interface é 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/2014Interface é 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/2014Interface é 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/2014Interface é 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/2014Interface é 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/2014Interface é 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/2014Interface é 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/2014Interface é 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/2014Interface é 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/2014Interface é código - Talita Pagani 40
    • Desenhando o protótipo Fonte: http://www.flickr.com/photos/21218849@N03/with/390 2255728/
    • Desenhando o protótipo Fonte: http://www.flickr.com/photos/21218849@N03/with/3902255 728/
    • Simulando as interações da interface Fonte: http://www.flickr.com/photos/21218849@N03/with/390225 5728/
    • 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
    • 10/04/2014Interface é código - Talita Pagani 45
    • Browser Diet – http://www.browserdiet.com 10/04/2014Interface é código - Talita Pagani 47
    • 10/04/2014Interface é código - Talita Pagani 48 YSlow – http://yslow.org/
    • 10/04/2014Interface é código - Talita Pagani 49 Web Page Test – http://www.webpagetest.org/
    • 10/04/2014Interface é código - Talita Pagani 50 HTTP Archive – http://httparchive.org/
    • 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
    • Facilidade de uso Complexidade de implementação 10/04/2014Interface é 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/2014Interface é 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/2014Interface é 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/2014Interface é 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/2014Interface é 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/2014Interface é 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/2014Interface é 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_.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
    • @talitapagani | talita.cpb@gmail.com