Word camp

Ux designfor developers
Pedro Marques
UI/UX Designer @ CI&T
@pedro_designer | pedro@marksdesign.com.br
sábado, 17 de maio de 14

QUEM SOU EU?
Front End Developer
Metido a redator
Usuário
Jamal

tA
Altamente Ácido

FREELAS <3

O QUE É UX?
“Nossa é difícil usar isso”
“Que app lento”
“Má quê esso?”

O QUE É UX?
“Nossa é difícil usar isso”
“Que app lento”
“Má quê esso?”
“Que portal lerdo”

Usuário não é burro
Mas o que para você é obvio
para ele pode ser complexo

O QUE É UX?
Arquitetura
Design de interação
Design Visual

O QUE É UX?
Arquitetura
Design de interação
Design Visual
PERFORMANCE

DEVELOPERS DEVELOPERS DEVELOPERS

‣ Seu código guia a experiência
‣ UI != UX
‣ Bom UX gera momentos agradáveis
‣ Você dá vida ao Design

Mas e na prática?
Como isso afeta o usuário?

Vamos criar um caso
Um portal de conteúdo

#partiu Dev In Company na Plan B Comunicação! o/

30 notícias
2 acessos ao dia
30 dias/mês
365 dias/mês

Pessoas
Emoções

Pessoas
Emoções
Experiências

20.000
POR DIA

:) ou ;(

Enchant me.
Simplify my life.
Make me amazing.
Android Team

Boas Práticas

Boas Práticas
‣ Melhoria continua
‣ Feedback de erro/conﬁrmação
‣ Animações
‣ Considere a conexão
‣ Carregamento em ﬁla

Boas Práticas
‣ Consistência
‣ Sempre informe cada passo do usuário
‣ Deixe o usuário no controle
‣ Navegue em seu próprio site
‣ Não conﬁe no seu código.

PERFORMANCE
FRONT-END

PERFORMANCE
FRONT-END
VELOCIDADE É DESIGN

“Any suﬃciently advanced
technology is indistinguishable
from magic.”
Arthur C. Clarke

Performance Front End
‣ Reduzir o numero de requests HTTP
‣ Gerenciamento de Plugins
‣ Cache
‣ Minimizar o HTML, CSS e JavaScript
‣ Otimize sua Home

Lean UX
Metodologia ágil de UX
Conceito > Protótipo > Validação Interna > Teste externo > Aprender
com o comportamento > Repetir o processo

Lean UX Metodologia ágil de UX
•Enquadre uma visão do problema com toda a equipe.
•Compartilhe sua ideias o quanto antes com a sua equipe;
•Crie o MVP
•Incorpore a voz do cliente durante todo o ciclo do projeto;
•Misture o Lean UX com as Sprints do Scrum

Cases
Eu vi e vivi.

Cases Eu vi e vivi.
OTC 2013
Petrobras
Páginas internas com cliques em pontos especíﬁcos para rolar o conteúdo
pois o projeto era responsivo e seria exibido em painéis touch no evento.
Animações de infográﬁcos que ajudam também no tempo de carregamento da
página

#euindico
http://littlebigdetails.com/
http://houseofbuttons.tumblr.com/
https://developer.yahoo.com/yslow/
https://developers.google.com/speed/pagespeed/
insights/

Obrigado!
Você é o representante do seu sonho
Pedro Marques
@pedro_designer | pedro@marksdesign.com.br

Word camp

Recomendados

Recomendados

Mais conteúdo relacionado

Destaque

Destaque (19)

Word camp