46
Ux design for developers Pedro Marques UI/UX Designer @ CI&T @pedro_designer | [email protected] sábado, 17 de maio de 14

Word camp

Embed Size (px)

DESCRIPTION

 

Citation preview

Page 1: Word camp

Ux designfor developers

Pedro MarquesUI/UX Designer @ CI&T@pedro_designer | [email protected]

sábado, 17 de maio de 14

Page 2: Word camp

QUEM SOU EU?UI/UX Designer @ CI&TFront End DeveloperMetido a redatorUsuárioJamal

sábado, 17 de maio de 14

Page 3: Word camp

tA

Altamente Ácido

sábado, 17 de maio de 14

Page 4: Word camp

tA

sábado, 17 de maio de 14

Page 5: Word camp

FREELAS <3

sábado, 17 de maio de 14

Page 6: Word camp

O QUE É UX?

“Nossa é difícil usar isso”

“Que app lento”

“Má quê esso?”

sábado, 17 de maio de 14

Page 7: Word camp

O QUE É UX?

“Nossa é difícil usar isso”

“Que app lento”

“Má quê esso?”

“Que portal lerdo”

sábado, 17 de maio de 14

Page 8: Word camp

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

sábado, 17 de maio de 14

Page 9: Word camp

O QUE É UX?

Arquitetura

Design de interação

Design Visual

sábado, 17 de maio de 14

Page 10: Word camp

O QUE É UX?

Arquitetura

Design de interação

Design Visual

PERFORMANCE

sábado, 17 de maio de 14

Page 11: Word camp

DEVELOPERS DEVELOPERS DEVELOPERS DEVELOPERS DEVELOPERS DEVELOPERS DEVELOPERS DEVELOPERS DEVELOPERS DEVELOPERS DEVELOPERS DEVELOPERS DEVELOPERS DEVELOPERS DEVELOPERS DEVELOPERS DEVELOPERS DEVELOPERS DEVELOPERS DEVELOPERS DEVELOPERS DEVELOPERS DEVELOPERS DEVELOPERS DEVELOPERS DEVELOPERS DEVELOPERS

sábado, 17 de maio de 14

Page 12: Word camp

‣ Seu código guia a experiência

‣ UI != UX

‣ Bom UX gera momentos agradáveis

‣ Você dá vida ao Design

sábado, 17 de maio de 14

Page 13: Word camp

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

sábado, 17 de maio de 14

Page 14: Word camp

Vamos criar um casoUm portal de conteúdo

sábado, 17 de maio de 14

Page 15: Word camp

sábado, 17 de maio de 14

Page 16: Word camp

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

sábado, 17 de maio de 14

Page 17: Word camp

30 notícias

2 acessos ao dia

30 dias/mês

365 dias/mês

sábado, 17 de maio de 14

Page 18: Word camp

PessoasEmoções

sábado, 17 de maio de 14

Page 19: Word camp

PessoasEmoções

Experiências

sábado, 17 de maio de 14

Page 20: Word camp

20.000POR DIA

sábado, 17 de maio de 14

Page 21: Word camp

:) ou ;(

sábado, 17 de maio de 14

Page 22: Word camp

Enchant me.

Simplify my life.

Make me amazing.

Android Team

sábado, 17 de maio de 14

Page 23: Word camp

Boas Práticas

sábado, 17 de maio de 14

Page 24: Word camp

Boas Práticas

‣ Melhoria continua‣ Feedback de erro/confirmação‣ Animações‣ Considere a conexão‣ Carregamento em fila

sábado, 17 de maio de 14

Page 25: Word camp

sábado, 17 de maio de 14

Page 26: Word camp

sábado, 17 de maio de 14

Page 27: Word camp

sábado, 17 de maio de 14

Page 28: Word camp

sábado, 17 de maio de 14

Page 29: Word camp

Boas Práticas

‣ Melhoria continua‣ Feedback de erro/confirmação‣ Animações‣ Considere a conexão‣ Carregamento em fila

sábado, 17 de maio de 14

Page 30: Word camp

sábado, 17 de maio de 14

Page 31: Word camp

sábado, 17 de maio de 14

Page 32: Word camp

sábado, 17 de maio de 14

Page 33: Word camp

sábado, 17 de maio de 14

Page 34: Word camp

Boas Práticas

‣ Melhoria continua‣ Feedback de erro/confirmação‣ Animações‣ Considere a conexão‣ Carregamento em fila

sábado, 17 de maio de 14

Page 35: Word camp

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 confie no seu código.

sábado, 17 de maio de 14

Page 36: Word camp

PERFORMANCEFRONT-END

sábado, 17 de maio de 14

Page 37: Word camp

PERFORMANCEFRONT-ENDVELOCIDADE É DESIGN

sábado, 17 de maio de 14

Page 38: Word camp

“Any sufficiently advanced technology is indistinguishable

from magic.”

Arthur C. Clarke

sábado, 17 de maio de 14

Page 39: Word camp

Performance Front End

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

sábado, 17 de maio de 14

Page 40: Word camp

Lean UXMetodologia ágil de UX

Conceito > Protótipo > Validação Interna > Teste externo > Aprender com o comportamento > Repetir o processo

sábado, 17 de maio de 14

Page 41: Word camp

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

sábado, 17 de maio de 14

Page 42: Word camp

CasesEu vi e vivi.

sábado, 17 de maio de 14

Page 43: Word camp

Cases Eu vi e vivi.

OTC 2013Petrobras

Páginas internas com cliques em pontos específicos para rolar o conteúdo pois o projeto era responsivo e seria exibido em painéis touch no evento.

Animações de infográficos que ajudam também no tempo de carregamento da página

sábado, 17 de maio de 14

Page 45: Word camp

Q&A

sábado, 17 de maio de 14

Page 46: Word camp

Obrigado!Você é o representante do seu sonho

Pedro MarquesUI/UX Designer @ CI&T@pedro_designer | [email protected]

sábado, 17 de maio de 14