Embed Size (px)
DESCRIPTION
Palestra ministrada no Front End Carioca sobre user experience design e desenvolvimento front end.
Citation preview
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
