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

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

Globalcode – Open4education

UX É COISA DE

DESENVOLVEDOR(A)?

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)

Globalcode – Open4education

Mitos e equívocos

UX ≠ UI

UX ᑐ UI

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)

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

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”

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

Globalcode – Open4education

Expectativa Realidade

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)

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/

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

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)

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

Globalcode – Open4education

Fatores de impacto

Desempenho Resposta às

requisições

Tratamento e

prevenção de erro

Banco de dados Bugs Segurança

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

Globalcode – Open4education

UX NO FRONT-END

Globalcode – Open4education

CSS

Áreas de clique adequadas

Fonte: http://uxdesign.smashingmagazine.com/2008/12/15/10-useful-techniques-to-

improve-your-user-interface-designs/

Globalcode – Open4education

Diminua requisições HTTP

Junção de arquivos

Fonte: http://browserdiet.com/

Globalcode – Open4education

Diminua requisições HTTP

Cache de arquivos no .htaccess

Fonte: http://browserdiet.com/

Globalcode – Open4education

Diminua requisições HTTP

CSS Sprites

Globalcode – Open4education

AppCache

Garanta o acesso offline

Fonte: http://dev.w3.org/html5/offline-webapps/

Globalcode – Open4education

Carregamento modular de JS

Carregue os scripts sob demanda

Globalcode – Open4education

Carregamento modular de JS

Carregue assincronamente o JS

<script

src="example.js"></script>

<script async

src="example.js"></script>

Fonte: http://browserdiet.com/

Globalcode – Open4education

Validação de formulários

Validade em tempo real os inputs

Globalcode – Open4education

AJAX

Cuidado com o carregamento infinito

Único conteúdo totalmente carregado

Globalcode – Open4education

Mensagens de erro

Ajude os usuários a se recuperar dos

erros

Globalcode – Open4education

Bugs

Teste seu código

Globalcode – Open4education

UX NO BACK-END

Globalcode – Open4education

Tratamento de erros

Evite erros genéricos

Globalcode – Open4education

Timeout

Defina tempo de requisições ao

servidor e ao banco de dados

Globalcode – Open4education

Timeout

Aqui, a própria página de erro de timeout “ensina” o

desenvolvedor de como ele poderia consertar o erro

Globalcode – Open4education

Redirecionamentos

Faça 301/302 Redirect de forma correta

Globalcode – Open4education

URLs

Friendly URL e URLs consistentes

Globalcode – Open4education

PENSANDO EM UX (COM

ARTEFATOS DE DEVS)

Globalcode – Open4education

Prototipação rápida

https://www.youtube.com/watch?v=GrV2SZuRPv0

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.

Globalcode – Open4education

Interface Design Patterns

http://ui-patterns.com/

Globalcode – Open4education

TOOLS

Globalcode – Open4education

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

Globalcode – Open4education

YSlow – http://yslow.org/

Globalcode – Open4education

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

Globalcode – Open4education

HTTP Archive – http://httparchive.org/

Globalcode – Open4education

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

Globalcode – Open4education

“O poder é de vocês!”

Globalcode – Open4education

Este assunto continua na próxima palestra:

“Otimizando a

performance do front-

end em uma aplicação

real”

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/

Globalcode – Open4education

OBRIGADA! facebook.com/talitapagani

twitter.com/talitapagani

br.linkedin.com/in/talitapagani

github.com/talitapagani

slideshare.net/talitapagani

talita.cpb@gmail.com