Upgrade to Pro — share decks privately, control downloads, hide ads and more …

I Can't believe it's not native

278d0b5b8f680ac2a39bb3d8a6e21be3?s=47 Wellington Mitrut
December 18, 2017

I Can't believe it's not native

Com o advento dos PWA crescendo e a ideia deles substituírem as aplicações nativas em nossos celulares, fica a pergunta: Como atingir esta singularidade, a ponto de não diferenciar mais o que é uma aplicação em linguagem nativa (Swift, Kotlin, C#...) de uma aplicação web? Esta palestra visa mostrar conceitos que em aplicações web fazem elas não perderem em nada em performance, experiência e otimizações para plataformas moveis como já é feito pelo twitter, tinder, pinterest, the Guadian e flipkart.

278d0b5b8f680ac2a39bb3d8a6e21be3?s=128

Wellington Mitrut

December 18, 2017
Tweet

More Decks by Wellington Mitrut

Other Decks in Design

Transcript

  1. None
  2. I can’t believe it’s not ‘Native’ UX with Progressive Web

    Apps @wmitrut Wellington Mitrut
  3. Wellington Mitrut UI Engineer Co-Organizador @ GDG Cascavel Instrutor @

    Blogueiro e Podcaster Figurante na série Vikings Open Culture Cerveja Gatos
  4. Princípios gerais de UX Nosso foco hoje UX para web

    & mobile
  5. +5B Dispositivos conectados The Verge - http://bit.ly/2y7zbiA

  6. +2B Dispositivos conectados The Verge - http://bit.ly/2y7zbiA

  7. Por que a web ainda não tem uma experiência legal

    no mobile?
  8. 90’s and early 00’s web dev

  9. 90’s and early 00’s web dev Millenials, esse é o

    McGyver
  10. 3 Pontos críticos que causam essa sensação.

  11. Sites não são reativos

  12. Sites não tem comportamento previsível

  13. O usuário não está no controle da situação

  14. O que então pode ser feito para melhorar a experiência

    da web no mobile?
  15. None
  16. None
  17. Progressive Web Apps Experiências na web de alta performance.

  18. Os PWAs são um conjunto de técnicas para desenvolver aplicações

    web, adicionando progressivamente funcionalidades que antes só eram possíveis em apps nativos.
  19. 3 Princípios críticos para uma boa UX com PWAs.

  20. REATIVIDADE PREVISIBILDADE USUÁRIO NO CONTROLE

  21. REATIVIDADE PREVISIBILDADE USUÁRIO NO CONTROLE

  22. REATIVIDADE A percepção humana de tempo é fluida, e pode

    ser manipulada de maneira proposital e produtiva. Chris Harrison, Zhiquan Yeo, Scott E. Hudson
  23. Transição bloqueada aguardando pela request REATIVIDADE

  24. Skeleton screen / placeholder REATIVIDADE

  25. REATIVIDADE

  26. Sem feedback de toque REATIVIDADE

  27. REATIVIDADE

  28. Com feedback de toque REATIVIDADE

  29. Com feedback de toque REATIVIDADE

  30. REATIVIDADE

  31. REATIVIDADE Scroll bugado.

  32. REATIVIDADE Use listas virtualizadas para melhor performance

  33. REATIVIDADE Use UIs nativas na Web

  34. Polymer Ionic Material Components React Material UI REATIVIDADE

  35. DEVO diferenciar a minha UI/UX de acordo com o OS?

    REATIVIDADE
  36. DEVE REATIVIDADE

  37. DEVE ...É indicado REATIVIDADE

  38. CARGA COGNITIVA REATIVIDADE

  39. webapp.barcelona.cat REATIVIDADE

  40. IONIC 3+ muda a UI/UX de acordo com o OS

    sem precisar de qualquer outra implementação REATIVIDADE
  41. Performance de Carregamento Antes Depois Sessões abandonadas Site da OLX

    REATIVIDADE PRPL pattern Service worker caching Server side rendering
  42. Push critical resources. Render initial route. Pre-cache. Lazy-load. REATIVIDADE

  43. USE fontes NATIVAS, o que não for nativo, usar SVG

    REATIVIDADE
  44. None
  45. None
  46. None
  47. REATIVIDADE PageSpeed Insights WebPagetest Lighthouse

  48. REATIVIDADE PREVISIBILIDADE USUÁRIO NO CONTROLE

  49. Gestures previsíveis não acontecem PREVISIBILIDADE

  50. Gestures previsíveis PREVISIBILIDADE

  51. Gestures confusos (não ta trocando de tab) PREVISIBILIDADE

  52. Gestures claros PREVISIBILIDADE

  53. Navegação simplificada PREVISIBILIDADE

  54. Blue Flash PREVISIBILIDADE

  55. Sem Blue Flash PREVISIBILIDADE

  56. REATIVIDADE PREDITIBILIDADE USUÁRIO NO CONTROLE

  57. Conteúdo ‘pulando’ na tela, carregamento instável USUÁRIO NO CONTROLE

  58. Carregamento estável Tamanho de imagens e elementos pré-especificados USUÁRIO NO

    CONTROLE
  59. USUÁRIO NO CONTROLE Permissão na hora que carrega a página

  60. Permissões com contexto USUÁRIO NO CONTROLE

  61. As conversões aumentaram em 76% alibaba.com As sessões tiveram um

    aumento de 100% forbes.com Os pageviews cresceram 170% twitter.com PWA Stats - http://bit.ly/2w3LxKM
  62. Outras dicas importantes

  63. Login automático com smart-lock

  64. Payment request API

  65. Cache offline com service-workers

  66. Push Notifications

  67. ~215 APIs

  68. SEMPRE que possível teste em dispositivos reais.

  69. INSPIRE-SE na UI/UX de aplicativos ‘nativos’.

  70. Obrigado @wmitrut Wellington Mitrut