Ux for Developers - Build Better Products

1.625 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.625
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

×