Ux for Developers - Build Better Products

UX for developersBuild better products

–Jaime Silveira

“Digite uma citação aqui.”

Who I am?

Pedro MarquesUI/UX Designer @ CI&T

tA

Altamente Ácido

tA

tAO que é UX?

E aí, o que é ux?

Digital

“Nossa é difícil usar isso”

“Que app lento”

“Má quê esso?”

Quem Sou eu?

Pedro MarquesUI/UX Designer @ CI&T

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

Quem Sou eu?

Pedro MarquesUI/UX Designer @ CI&T

O QUE É UX?

“Nossa é difícil usar isso”

“Que app lento”

“Má quê esso?”

PERFORMANCE

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

‣ Seu código guia a experiência

‣ UI != UX

‣ Bom UX gera momentos agradáveis

‣ Você dá vida ao Design

‣ Seu código guia a experiência

‣ UI != UX

‣ Bom UX gera momentos agradáveis

‣ Você dá vida ao Design

‣ Seu código guia a experiência

‣ UI != UX

‣ Bom UX gera momentos agradáveis

‣ Você dá vida ao Design

‣ Seu código guia a experiência

‣ UI != UX

‣ Bom UX gera momentos agradáveis

‣ Você dá vida ao Design

Tá, mas e aí?

Usuário

Cliente

X

Usuário

Cliente

Qualidade

20.000POR DIA

:) ou ;(

Enchant me.

Simplify my life.

Make me amazing.

Android Team

Como é feito na prática?

Device Pixel Ratio

0.75 1

1.33 1.5

2 3

Low dpi normal, mdpi tvtdpi hdpi retina, xhdpi xxhdpi

Eu quero um carro!

Device Pixel Ratio

0.75 1

1.33 1.5

2 3

Low dpi normal, mdpi tvtdpi hdpi retina, xhdpi xxhdpi

Luxo

Mãe

Alegórioco

De mão

Hot dog

Device Pixel Ratio

0.75 1

1.33 1.5

2 3

Low dpi normal, mdpi tvtdpi hdpi retina, xhdpi xxhdpi

Pra quem?

Device Pixel Ratio

0.75 1

1.33 1.5

2 3

Low dpi normal, mdpi tvtdpi hdpi retina, xhdpi xxhdpi

Biscoito X Bolacha

É a média do tempo gasto em refação nos projetos de TI

50%http://spectrum.ieee.org/computing/software/why-software-fails/

É a média de melhoria se 10% dos tempo do projeto for gasto com pesquisa e testes

83%http://spectrum.ieee.org/computing/software/why-software-fails/

Erico Fileno/Horacio Soares

Device Pixel Ratio

0.75 1

1.33 1.5

2 3

Low dpi normal, mdpi tvtdpi hdpi retina, xhdpi xxhdpi

Data Driven Design

‣ Seu código guia a experiência

‣ UI != UX

‣ Bom UX gera momentos agradáveis

‣ Você dá vida ao Design

Boas Práticas

Boas Práticas

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

Clicar > Digitar > Pressionar Enter

Clicar > Digitar > Pressionar Enter

Boas Práticas

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

Boas Práticas

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

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.

PERFORMANCEFRONT-END

PERFORMANCEFRONT-ENDVELOCIDADE É DESIGN

“Any sufficiently advanced technology is indistinguishable

from magic.”

Arthur C. Clarke

Performance Front End

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

Performance Front End

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

sennajs.com

Bookmarkability & SEO !

History Navigation !

UI Feedback & Transitions !

Cacheable Screens

Foco

CasesEu vi e vivi.

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

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

5 segundos

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

Crie experiênciasNão importa a tela

Crie experiênciasNão importa a telaQ&A

–Jaime Silveira

“Digite uma citação aqui.”

Valeu Cariocax

https://twitter.com/pedro_designer

marksdesign.com.brpedro@marksdesign.com.br