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

1. UX for developers
Build better products

2. “Digite uma citação aqui.”
–Jaime Silveira
Who I am?
Pedro Marques
UI/UX Designer @ CI&T

3. tA
Altamente Ácido

4. tA

5. tA O que é UX?

6. Digital
“Nossa é difícil usar isso”
E aí, o que é ux?
“Que app lento”
“Má quê esso?”

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

9. 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

10. 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

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

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

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

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

15. Tá, mas e aí?

16. Usuário
X
Cliente

17. Usuário

18. Cliente

19. Qualidade

20. 20.000
POR DIA

21. :) ou ;(

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

23. Como é feito na prática?

24. 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!

25. Device Pixel Ratio
0.75
1
1.33
1.5
2
3
Low dpi
normal, mdpi
tvtdpi
hdpi
retina, xhdpi
xxhdpi
Luxo

26. Mãe

27. Alegórioco

28. De mão

29. Hot dog

30. Device Pixel Ratio
0.75
1
1.33
1.5
2
3
Low dpi
normal, mdpi
tvtdpi
hdpi
retina, xhdpi
xxhdpi
Pra quem?

31. Device Pixel Ratio
0.75
1
1.33
1.5
2
3
Low dpi
normal, mdpi
tvtdpi
hdpi
retina, xhdpi
xxhdpi
Biscoito X Bolacha

32. 50%
É a média do tempo gasto em refação nos
projetos de TI
http://spectrum.ieee.org/computing/software/why-software-fails/

33. 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/

35. Erico Fileno/Horacio Soares

36. Device Pixel Ratio
0.75
1
1.33
1.5
2
3
Low dpi
normal, mdpi
tvtdpi
hdpi
retina, xhdpi
xxhdpi
Data Driven Design

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

39. Boas Práticas

40. Boas Práticas
‣ Melhoria continua
‣ Feedback de erro/confirmação
‣ Animações
‣ Considere a conexão
‣ Carregamento em fila

41. Clicar > Digitar >
Pressionar Enter

43. Clicar > Digitar >
Pressionar Enter

45. Boas Práticas
‣ Melhoria continua
‣ Feedback de erro/confirmação
‣ Animações
‣ Considere a conexão
‣ Carregamento em fila

50. Boas Práticas
‣ Melhoria continua
‣ Feedback de erro/confirmação
‣ Animações
‣ Considere a conexão
‣ Carregamento em fila

51. 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.

52. PERFORMANCE
FRONT-END

53. PERFORMANCE
FRONT-END
VELOCIDADE É DESIGN

54. “Any sufficiently advanced
technology is indistinguishable
from magic.”
Arthur C. Clarke

55. Performance Front End
‣ Reduzir o numero de requests HTTP
‣ Otimizar Imagens
‣ Cache
‣ Minimizar o HTML, CSS e JavaScript
‣ Otimize sua Home

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

57. Bookmarkability & SEO
!
History Navigation
!
UI Feedback & Transitions
!
Cacheable Screens

58. Foco

60. Cases
Eu vi e vivi.

61. 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

62. 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

63. 5 segundos

64. 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

65. Crie experiências
Não importa a tela

66. Crie experiências
Não importa a tela Q&A

67. Valeu Cariocax
“Digite uma citação aqui.”
https://twitter.com/pedro_designer
pedro@marksdesign.–Jaime Silveira
com.br
marksdesign.com.br