Palestra realizada no The Developer's Conference (TDC) em 24 de julho de 2015. Nessa palestra, será 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. Grande parte dos tópicos abordados se relacionam com a performance front-end e back-end contextualizados sob o impacto sobre a experiência de uso. Também será 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. Globalcode – Open4education
Trilha – Web
Interface é código
Aprimorando a UX no front e no back-end
Talita Pagani
Consultora independente em UX | Mestranda em Computação @ UFSCar
2. Globalcode – Open4education
Apresentação
Bacharel e mestranda em
Computação
Professora universitária
Palestrante em eventos de
desenvolvimento web
10 de XP em TI
Web designer, front e back-end
developer, tester, assistente de
GP e analista de requisitos
Eventualmente escreve em
alguns blogs
4. Globalcode – Open4education
“UX é um termo usado
frequentemente para
sintetizar toda a
experiência com um
produto de software. A UX
de um aplicativo é maior
que a soma de suas partes.”
(Lowdermilk, 2013)
6. Globalcode – Open4education
“A experiência do usuário
deve ser entendida como o
ciclo de relacionamento de
um cliente com a marca, ou
seja, precisamos entender
todos os pontos de
interação que esse
usuário terá [...]”
(Agni, 2014)
7. Globalcode – Open4education
Mitos e equívocos
UX Designer cuida de tudo relacionado à
experiência do usuário
O trabalho o UX Designer acaba quando
inicia o desenvolvimento
Desenvolvedores “só” programam
8. Globalcode – Open4education
Mitos e equívocos
UX é interface então é responsabilidade dos
designers
Se o usuário errou a culpa é dele
“A gente sabe o que é melhor para o
usuário”
“Mas tá funcionando, olha aqui”
9. Globalcode – Open4education
Mitos e equívocos
Atender os requisitos funcionais não significa que
a sua aplicação tem qualidade e que supre as
necessidades dos usuários
Exemplo: projeto cadeira
A cadeira deve conter
Quatro pernas
Assento
Encosto
11. Globalcode – Open4education
UX é uma soma de fatores
Fluxo fácil de compreender
Visual agradável
Textos claros e concisos
Boa usabilidade
Páginas leves de carregar
Site que funciona em qualquer plataforma ou
dispositivo
(TEIXEIRA, 2015)
12. Globalcode – Open4education
“Quando se trata de usabilidade, um
detalhe pode afetar a experiência do
usuário. Toda a equipe tem que trabalhar
em sintonia e cooperativamente para que
a experiência do usuário seja abordada
corretamente em todos os aspectos.”
http://tableless.com.br/a-usabilidade-deve-ser-pensada-por-todos/
13. Globalcode – Open4education
UX Designers + Devs =
Toda interação é tratada no código
Performance matters
Vamos trabalhar 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
14. Globalcode – Open4education
Camadas da qualidade
De Uso
Externa
Interna
Qualidade de código
(front e back-end)
Eficiência
Qualidade em execução
(tudo funciona e não
quebra) - Produtividade
Boa experiência para o usuário
Satisfação de uso
Com base em Bevan (1999)
15. Globalcode – Open4education
Significa que...
“Se o usuário clica em um botão que não
funciona, isso causará um problema na
experiência do usuário.
De forma similar, se o usuário clica em um botão
que não funciona da forma que ele espera que
funcione, isso também causará um problema na
experiência do usuário.”
http://arquiteturadeinformacao.com/user-experience/otimizando-a-experiencia-do-usuario-
na-etapa-de-quality-assurance-qa
16. Globalcode – Open4education
Fatores de impacto
Desempenho Resposta às
requisições
Tratamento e
prevenção de erro
Banco de dados Bugs Segurança
17. Globalcode – Open4education
Fatores de impacto
Para cada
segundo de
atraso no
carregamento
7% menos
conversões
11% menos
visualizações
de página
16% de
decréscimo
em satisfação
do usuário
Fonte: http://www.cloudreviews.com/blog/web-performance-optimization-part-1
38. Globalcode – Open4education
User Stories
https://twitter.com/GoatUserStories/status/585570199883112449
Como um [ator] eu
quero/preciso
de/devo/gostaria de
[ação] para
[funcionalidade].
Como um vendedor
responsável pelo setor
de livros eu quero
procurar por livros
filtrando por nome para
que seja possível
verificar se o livro X está
disponível para pronta
entrega.
47. Globalcode – Open4education
Este assunto continua na próxima palestra:
“Otimizando a
performance do front-
end em uma aplicação
real”
48. Globalcode – Open4education
Referências
Lowdermilk, T. Design Centrado no Usuário. O’Reilly Media, 2013.
Agni, E. UX no E-commerce: mapeando a jornada do consumidor. 2013. Disponível em:
http://www.uxdesign.blog.br/user-experience/
Teixeira, F. UX para GPs #2 – o que faz um UX designer. Disponível em:
http://arquiteturadeinformacao.com/user-experience/ux-para-gps-2-o-que-faz-um-ux-designer/
BEVAN, N. Quality in Use: Meeting User Needs for Quality. In: Journal of System and Software,
1999.
Head, C. The Rise of Customer Expectations - UX - User Experience (4/6). Disponível em:
https://www.linkedin.com/pulse/20140709083014-64515439-the-rise-of-customer-expectations-
user-experience-4-6
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
Fadeyev, D. Smashsing 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/