UX no front e back-end

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

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

UX É COISA DE
DESENVOLVEDOR(A)?

“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)

Mitos e equívocos
UX ≠ UI
UX ᑐ UI

“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)

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

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”

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

Expectativa Realidade

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)

“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/

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

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)

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

Fatores de impacto
Desempenho Resposta às
requisições
Tratamento e
prevenção de erro
Banco de dados Bugs Segurança

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

UX NO FRONT-END

CSS
Áreas de clique adequadas
Fonte: http://uxdesign.smashingmagazine.com/2008/12/15/10-useful-techniques-to-
improve-your-user-interface-designs/

Diminua requisições HTTP
Junção de arquivos
Fonte: http://browserdiet.com/

Cache de arquivos no .htaccess

CSS Sprites

AppCache
Garanta o acesso offline
Fonte: http://dev.w3.org/html5/offline-webapps/

Carregamento modular de JS
Carregue os scripts sob demanda

Carregamento modular de JS
Carregue assincronamente o JS
<script
src="example.js"></script>
<script async
src="example.js"></script>

Validação de formulários
Validade em tempo real os inputs

AJAX
Cuidado com o carregamento infinito
Único conteúdo totalmente carregado

Mensagens de erro
Ajude os usuários a se recuperar dos
erros

Bugs
Teste seu código

UX NO BACK-END

Tratamento de erros
Evite erros genéricos

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

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

Redirecionamentos
Faça 301/302 Redirect de forma correta

URLs
Friendly URL e URLs consistentes

PENSANDO EM UX (COM
ARTEFATOS DE DEVS)

Prototipação rápida
https://www.youtube.com/watch?v=GrV2SZuRPv0

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.

Interface Design Patterns
http://ui-patterns.com/

TOOLS

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

YSlow – http://yslow.org/

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

HTTP Archive – http://httparchive.org/

Google Page Speed – https://developers.google.com/speed/pagespeed/insights/

“O poder é de vocês!”

Este assunto continua na próxima palestra:
“Otimizando a
performance do front-
end em uma aplicação
real”

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/

OBRIGADA!
facebook.com/talitapagani
twitter.com/talitapagani
br.linkedin.com/in/talitapagani
github.com/talitapagani
slideshare.net/talitapagani
talita.cpb@gmail.com

UX no front e back-end

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Destaque

Destaque (20)

Semelhante a UX no front e back-end

Semelhante a UX no front e back-end (20)

Mais de Talita Pagani

Mais de Talita Pagani (20)

UX no front e back-end