UX for developers 
Build better products
“Digite uma citação aqui.” 
–Jaime Silveira 
Who I am? 
Pedro Marques 
UI/UX Designer @ CI&T
tA 
Altamente Ácido
tA
tA O que é UX?
Digital 
“Nossa é difícil usar isso” 
E aí, o que é ux? 
“Que app lento” 
“Má quê esso?”
Quem Sou eu? 
Usuário não é burro 
Mas o que para você é obvio 
para ele pode ser complexo 
Pedro Marques 
UI/UX Designer ...
Quem Sou eu? 
O QUE É UX? 
“Nossa é difícil usar isso” 
“Que app lento” 
“Má quê esso?” 
PERFORMANCE 
Pedro Marques 
UI/UX...
DEVELOPERS DEVELOPERS DEVELOPERS 
DEVELOPERS DEVELOPERS DEVELOPERS 
DEVELOPERS DEVELOPERS DEVELOPERS 
DEVELOPERS DEVELOPER...
‣ 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 
X 
Cliente
Usuário
Cliente
Qualidade
20.000 
POR 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 carr...
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 Bolac...
50% 
É a média do tempo gasto em refação nos 
projetos de TI 
http://spectrum.ieee.org/computing/software/why-software-fai...
83% 
É a média de melhoria se 10% dos tempo do 
projeto for gasto com pesquisa e testes 
http://spectrum.ieee.org/computin...
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 Desi...
‣ 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 ...
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 ...
Boas Práticas 
‣ Melhoria continua 
‣ Feedback de erro/confirmação 
‣ Animações 
‣ Considere a conexão 
‣ Carregamento em ...
Boas Práticas 
‣ Consistência 
‣ Sempre informe cada passo do usuário 
‣ Deixe o usuário no controle 
‣ Navegue em seu pró...
PERFORMANCE 
FRONT-END
PERFORMANCE 
FRONT-END 
VELOCIDADE É 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 JavaScr...
Performance Front End 
‣ Reduzir o numero de requests HTTP 
‣ Gerenciamento de Plugins 
‣ Cache 
‣ Minimizar o HTML, CSS e...
Bookmarkability & SEO 
! 
History Navigation 
! 
UI Feedback & Transitions 
! 
Cacheable Screens
Foco
Cases 
Eu vi e vivi.
Cases Eu vi e vivi. 
OTC 2013 
Petrobras 
Páginas internas com cliques em pontos específicos para rolar o conteúdo pois 
o...
Cases Eu vi e vivi. 
OTC 2013 
Petrobras 
Páginas internas com cliques em pontos específicos para rolar o conteúdo pois 
o...
5 segundos
Cases Eu vi e vivi. 
OTC 2013 
Petrobras 
Páginas internas com cliques em pontos específicos para rolar o conteúdo pois 
o...
Crie experiências 
Não importa a tela
Crie experiências 
Não importa a tela Q&A
Valeu Cariocax 
“Digite uma citação aqui.” 
https://twitter.com/pedro_designer 
pedro@marksdesign.–Jaime Silveira 
com.br ...
Ux for Developers - Build Better Products
Ux for Developers - Build Better Products
Ux for Developers - Build Better Products
Ux for Developers - Build Better Products
Ux for Developers - Build Better Products
Ux for Developers - Build Better Products
Ux for Developers - Build Better Products
Ux for Developers - Build Better Products
Ux for Developers - Build Better Products
Ux for Developers - Build Better Products
Próximos SlideShares
Carregando em…5
×

Ux for Developers - Build Better Products

1.603 visualizações

Publicada em

Palestra ministrada no Front End Carioca sobre user experience design e desenvolvimento front end.

Publicada em: Tecnologia
0 comentários
7 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
1.603
No SlideShare
0
A partir de incorporações
0
Número de incorporações
67
Ações
Compartilhamentos
0
Downloads
14
Comentários
0
Gostaram
7
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Ux for Developers - Build Better Products

  1. 1. UX for developers Build better products
  2. 2. “Digite uma citação aqui.” –Jaime Silveira Who I am? Pedro Marques UI/UX Designer @ CI&T
  3. 3. tA Altamente Ácido
  4. 4. tA
  5. 5. tA O que é UX?
  6. 6. Digital “Nossa é difícil usar isso” E aí, o que é ux? “Que app lento” “Má quê esso?”
  7. 7. Quem Sou eu? Usuário não é burro Mas o que para você é obvio para ele pode ser complexo Pedro Marques UI/UX Designer @ CI&T
  8. 8. Quem Sou eu? O QUE É UX? “Nossa é difícil usar isso” “Que app lento” “Má quê esso?” PERFORMANCE Pedro Marques UI/UX Designer @ CI&T
  9. 9. 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
  10. 10. ‣ Seu código guia a experiência ‣ UI != UX ‣ Bom UX gera momentos agradáveis ‣ Você dá vida ao Design
  11. 11. ‣ Seu código guia a experiência ‣ UI != UX ‣ Bom UX gera momentos agradáveis ‣ Você dá vida ao Design
  12. 12. ‣ Seu código guia a experiência ‣ UI != UX ‣ Bom UX gera momentos agradáveis ‣ Você dá vida ao Design
  13. 13. ‣ Seu código guia a experiência ‣ UI != UX ‣ Bom UX gera momentos agradáveis ‣ Você dá vida ao Design
  14. 14. Tá, mas e aí?
  15. 15. Usuário X Cliente
  16. 16. Usuário
  17. 17. Cliente
  18. 18. Qualidade
  19. 19. 20.000 POR DIA
  20. 20. :) ou ;(
  21. 21. Enchant me. Simplify my life. Make me amazing. Android Team
  22. 22. Como é feito na prática?
  23. 23. 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!
  24. 24. Device Pixel Ratio 0.75 1 1.33 1.5 2 3 Low dpi normal, mdpi tvtdpi hdpi retina, xhdpi xxhdpi Luxo
  25. 25. Mãe
  26. 26. Alegórioco
  27. 27. De mão
  28. 28. Hot dog
  29. 29. Device Pixel Ratio 0.75 1 1.33 1.5 2 3 Low dpi normal, mdpi tvtdpi hdpi retina, xhdpi xxhdpi Pra quem?
  30. 30. Device Pixel Ratio 0.75 1 1.33 1.5 2 3 Low dpi normal, mdpi tvtdpi hdpi retina, xhdpi xxhdpi Biscoito X Bolacha
  31. 31. 50% É a média do tempo gasto em refação nos projetos de TI http://spectrum.ieee.org/computing/software/why-software-fails/
  32. 32. 83% É a média de melhoria se 10% dos tempo do projeto for gasto com pesquisa e testes http://spectrum.ieee.org/computing/software/why-software-fails/
  33. 33. Erico Fileno/Horacio Soares
  34. 34. Device Pixel Ratio 0.75 1 1.33 1.5 2 3 Low dpi normal, mdpi tvtdpi hdpi retina, xhdpi xxhdpi Data Driven Design
  35. 35. ‣ Seu código guia a experiência ‣ UI != UX ‣ Bom UX gera momentos agradáveis ‣ Você dá vida ao Design
  36. 36. Boas Práticas
  37. 37. Boas Práticas ‣ Melhoria continua ‣ Feedback de erro/confirmação ‣ Animações ‣ Considere a conexão ‣ Carregamento em fila
  38. 38. Clicar > Digitar > Pressionar Enter
  39. 39. Clicar > Digitar > Pressionar Enter
  40. 40. Boas Práticas ‣ Melhoria continua ‣ Feedback de erro/confirmação ‣ Animações ‣ Considere a conexão ‣ Carregamento em fila
  41. 41. Boas Práticas ‣ Melhoria continua ‣ Feedback de erro/confirmação ‣ Animações ‣ Considere a conexão ‣ Carregamento em fila
  42. 42. 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.
  43. 43. PERFORMANCE FRONT-END
  44. 44. PERFORMANCE FRONT-END VELOCIDADE É DESIGN
  45. 45. “Any sufficiently advanced technology is indistinguishable from magic.” Arthur C. Clarke
  46. 46. Performance Front End ‣ Reduzir o numero de requests HTTP ‣ Otimizar Imagens ‣ Cache ‣ Minimizar o HTML, CSS e JavaScript ‣ Otimize sua Home
  47. 47. Performance Front End ‣ Reduzir o numero de requests HTTP ‣ Gerenciamento de Plugins ‣ Cache ‣ Minimizar o HTML, CSS e JavaScript ‣ Otimize sua Home sennajs.com
  48. 48. Bookmarkability & SEO ! History Navigation ! UI Feedback & Transitions ! Cacheable Screens
  49. 49. Foco
  50. 50. Cases Eu vi e vivi.
  51. 51. Cases Eu vi e vivi. OTC 2013 Petrobras 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
  52. 52. Cases Eu vi e vivi. OTC 2013 Petrobras 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
  53. 53. 5 segundos
  54. 54. Cases Eu vi e vivi. OTC 2013 Petrobras 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
  55. 55. Crie experiências Não importa a tela
  56. 56. Crie experiências Não importa a tela Q&A
  57. 57. Valeu Cariocax “Digite uma citação aqui.” https://twitter.com/pedro_designer pedro@marksdesign.–Jaime Silveira com.br marksdesign.com.br

×