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

Além dos Milissegundos: a Psicologia da Performance

Além dos Milissegundos: a Psicologia da Performance

A noção de tempo pode ser dividida em duas formas: objetiva e subjetiva. Enquanto a noção objetiva é facilmente mensurável, a subjetiva envolve a percepção psicológica de como o tempo transcorre.

Estas noções também se aplicam à Web; compressão de imagens, caching e redução de requisições HTTP são exemplos de técnicas consagradas que impactam a performance de forma mensurável.

No entanto, os números absolutos não contam a história completa - a performance está diretamente ligada à maneira como nossos cérebros percebem o carregamento da página. APIs lentas, redirecionamentos e requisições assíncronas são alguns dos gargalos de performance negligenciados por fugirem ao nosso controle.

Nessa palestra vou falar de conceitos para aumentar a percepção de performance e técnicas que apliquei com sucesso em produtos que somam bilhões de page views mensais.

João Cunha

January 22, 2020
Tweet

More Decks by João Cunha

Other Decks in Programming

Transcript

  1. João Cunha
    @JoaoCunha
    Além dos Milissegundos: a
    Psicologia da Performance

    View Slide

  2. View Slide

  3. Cronógrafo Fases da lua
    Horário mundial Dia Calendário perpétuo
    https://www.wixonjewelers.com/product-category/fine-timepieces/patek-philippe/
    Complicações
    arte + ciência + engenharia + criatividade + regras

    View Slide

  4. Watchmaker Breaks Down Swiss vs Japanese Made Watches | WIRED
    https://www.youtube.com/watch?v=7hSZFO5QUmE

    View Slide

  5. MINUTE
    REPEATER
    - Inventado em 1676 pelo reverendo inglês Edward Barrel
    - Portado para relógio de pulso em 1992 (Philippe Dufour Grande Sonerie)
    - Primeira opção de relógio acessível para pessoas cegas

    View Slide

  6. https://en.wikipedia.org/wiki/Repeater_(horology)

    View Slide

  7. Patek Philippe Minute Repeater - https://www.youtube.com/watch?v=CZxo-fXscxg

    View Slide

  8. A. Lange & Söhne - https://www.youtube.com/watch?v=3Ttb8O2GAuw
    07:52

    View Slide

  9. 10:58

    View Slide

  10. https://www.flickr.com/photos/[email protected]/10608010365/
    KKKK TE ODEIO
    Seiko Astron - 1969
    Primeiro relógio com movimento a quartzo

    View Slide

  11. TEMPO Tempo

    View Slide

  12. Tempo Objetivo
    É o tempo mensurável
    com um relógio

    View Slide

  13. 00:00:00.250
    Um piscar de olhos

    View Slide

  14. 00:01:07.281
    Volta mais rápida no Circuito
    de Interlagos

    View Slide

  15. 00:12:51.000
    Intervalo médio entre
    gols da Alemanha no
    fatídico 7x1

    View Slide

  16. Tempo Subjetivo
    É a percepção de como
    o tempo transcorre

    View Slide

  17. Um voo de 12 horas com
    ou sem entretenimento
    de bordo

    View Slide

  18. 1 minuto dentro
    do banheiro ou 1
    minuto na fila

    View Slide

  19. (0 - 0,2s)
    Instantâneo
    Imediato (0,5 - 1s)
    Fluidez e foco (2 - 5s)
    Limiar de atenção (5 - 10s)

    View Slide

  20. O tempo é feito
    de Eventos

    View Slide

  21. O tempo persiste
    meramente como uma
    consequência de eventos
    ocorrendo dentro dele.
    Martin Heidegger - Filósofo alemão
    1889-1976

    View Slide

  22. EVENTO
    Início Fim
    }
    Espera

    View Slide

  23. Espera passiva

    View Slide

  24. É o período em que a
    pessoa não tem escolha
    ou controle sobre o
    tempo, e seu foco está
    na espera em si.

    View Slide

  25. Ressonância
    magnética

    View Slide

  26. Pessoas em espera
    passiva SUPERESTIMAM
    o tempo em cerca de 36%
    Jacob Hornik - Subjective vs. Objective Time Measures: A Note on the Perception of Time in Consumer Behavior
    https://www.jstor.org/stable/2489149?seq=1
    Richard C. Larson - Perspectives on Queues: Social Justice and the Psychology of Queueing
    https://www.jstor.org/stable/171439?seq=1

    View Slide

  27. Espera ativa

    View Slide

  28. É o período em que a
    pessoa precisa realizar
    alguma tarefa física ou
    mental enquanto espera.

    View Slide

  29. Cortar alimentos
    enquanto refoga a cebola

    View Slide

  30. A maior parte das pessoas
    NÃO PERCEBE a espera ativa
    como uma espera de fato.

    View Slide

  31. Percepção
    Psicologia & Neurociência

    View Slide

  32. A Psicofísica investiga a
    correspondência entre a
    magnitude das propriedades
    dos estímulos através dos
    instrumentos da física e do
    sistema perceptual humano.
    Psicofísica

    View Slide

  33. View Slide

  34. MÉDICO ALEMÃO
    Iniciou as pesquisas de
    percepção em 1834 com
    experimentos táteis
    usando pesos nas mãos
    Ernst Heinrich
    Weber

    View Slide


  35. Além dos Milissegundos: a Psicologia da Performance @JoaoCunha

    View Slide




  36. Além dos Milissegundos: a Psicologia da Performance @JoaoCunha

    View Slide







  37. Além dos Milissegundos: a Psicologia da Performance @JoaoCunha

    View Slide






  38. ✅ ✅




    Além dos Milissegundos: a Psicologia da Performance @JoaoCunha

    View Slide






  39. Além dos Milissegundos: a Psicologia da Performance @JoaoCunha

    View Slide












  40. Além dos Milissegundos: a Psicologia da Performance @JoaoCunha

    View Slide

  41. Aluno de Weber
    Forneceu status de ciência ao
    estudo da percepção
    Aplicou os conceitos físicos a
    experiência sensoriais
    Gustav Theodor
    Fechner
    FILÓSOFO, MATEMÁTICO E FÍSICO

    View Slide

  42. Lei de Weber-Fechner

    View Slide

  43. View Slide

  44. Limiar Diferencial
    a diferença mínima entre dois
    estímulos para que seja notada
    alguma diferença entre eles

    View Slide

  45. Magnitude aparente
    ou Fator de Pogson
    BRILHO DAS ESTRELAS

    View Slide

  46. https://en.wikipedia.org/wiki/Apparent_magnitude

    View Slide

  47. Magnitude 1
    Magnitude 2
    Magnitude 3
    Magnitude 4
    Magnitude 5
    Magnitude 6 2.5x menos brilhante
    x 2.5
    x 6.25
    x 16
    x 40
    x 100
    Antares
    Polaris
    Cor Caroli
    Alpha Cancri
    2.5x menos brilhante
    2.5x menos brilhante
    2.5x menos brilhante
    2.5x menos brilhante

    View Slide

  48. Escala
    Richter
    INTENSIDADE DE TERREMOTOS
    https://wiki.ubc.ca/Course:Math110/003/Teams/Ticino/The_Richter_Scale

    View Slide

  49. Decibél
    NÍVEL DE RUÍDO

    View Slide

  50. O tempo NÃO É
    uma exceção à Lei
    de Weber-Fechner

    View Slide

  51. 10 segundos
    8 seg 12 seg
    Mais rápido Mais devagar
    -20% +20%
    Experimentos de Psicofísica mostram que o Limiar
    Diferencial de tempo chega a ~20%
    Designing and Engineering Time: The Psychology of Time Perception in Software
    Steven C. Seow Ph.D.
    https://bit.ly/2NNPpbl
    6.4 seg
    5.1 seg 14.4 seg 17.2 seg

    View Slide

  52. O site está lento!
    Não consigo usar!

    View Slide

  53. 5s 4.5s

    View Slide

  54. Nenhuma diferença é notada

    View Slide

  55. Se usarmos o limiar
    diferencial, esse site teria
    que carregar em 4s
    (1s = 20% a menos)
    para que a diferença fosse
    notada

    View Slide

  56. Métricas de
    Tempo na Web

    View Slide

  57. FP FCP LCP TTI
    Largest Contentful
    Paint (LCP)
    A página está funcionando?
    A página é
    útil?
    A página pode
    ser usada?

    View Slide

  58. FID: First Input Delay
    O delay entre o carregamento
    de um elemento e a tentativa
    de interação com ele

    View Slide

  59. TTI
    FID
    LCP
    Largest Contentful
    Paint (LCP)

    View Slide

  60. https://infrequently.org/2017/10/can-you-afford-it-real-world-web-performance-budgets/

    View Slide

  61. Quase 15 segundos

    View Slide

  62. Início
    antecipado
    https:/
    /www.behance.net/gallery/19040507/
    Round-iPhone-app

    View Slide

  63. EVENTO
    Início Fim
    Início Antecipado

    View Slide

  64. Aeroporto de
    Houston, Texas

    View Slide

  65. Demora para pegar
    bagagens

    View Slide

  66. Contrataram mais carregadores de
    bagagem…

    View Slide

  67. A espera reduziu, mas as
    reclamações continuaram

    View Slide

  68. Portões de
    desembarque
    perto das esteiras
    de bagagem.

    View Slide

  69. Solução:
    Afastar os portões de
    desembarque

    View Slide

  70. View Slide

  71. View Slide

  72. Conclusão
    Antecipada

    View Slide

  73. EVENTO
    Início Fim
    Conclusão Antecipada

    View Slide

  74. View Slide

  75. Skeleton

    View Slide

  76. UI otimista

    View Slide

  77. UI otimista

    View Slide

  78. UI otimista

    View Slide

  79. Kokota
    https://www.iconfinder.com/iconsets/free-1
    UI otimista

    View Slide

  80. Números

    View Slide

  81. ~50% das pessoas
    esperam que uma página
    carregue em menos de 2
    segundos
    Akamai Technologies
    Consumer Web Performance Expectations Survey, 2014
    https://bit.ly/3aBz1nO
    Além dos Milissegundos: a Psicologia da Performance @JoaoCunha

    View Slide

  82. 53% das visitas são
    abandonadas se um site
    mobile leva mais de três
    segundos para carregar
    DoubleClick by Google
    Global, March 2016
    https://bit.ly/37jmJyA
    Além dos Milissegundos: a Psicologia da Performance @JoaoCunha

    View Slide

  83. ‣ Sessões 70% mais longas
    ‣ 60% mais page views por visita
    ‣ Bounce rate 35% menor
    ‣ 2x em receitas de ads no mobile
    ‣ Aumento de 25% em views de ads mobile
    DoubleClick by Google
    Global, March 2016
    https://bit.ly/37jmJyA
    Além dos Milissegundos: a Psicologia da Performance @JoaoCunha
    Load time: 5s x 19s

    View Slide

  84. Cases

    View Slide

  85. TTI diminuiu de 26 para 5.6 segundos
    Tempo no site > 5 min
    +40%
    Receita em ads
    +44%
    Ads clicados
    +50%
    Engajamento geral
    +60%

    View Slide

  86. View Slide

  87. SCORE: 59 SCORE: 96

    View Slide

  88. Crescimento de 3x em palavras-
    chave indexadas nos top 3
    resultados do Google

    View Slide

  89. Conclusão

    View Slide

  90. Performance pode
    esbarrar em limites
    técnicos ou de
    orçamento
    Além dos Milissegundos: a Psicologia da Performance @JoaoCunha

    View Slide

  91. A maioria da
    população possui
    dispositivos antigos
    Além dos Milissegundos: a Psicologia da Performance @JoaoCunha

    View Slide

  92. Além dos Milissegundos: a Psicologia da Performance @JoaoCunha
    The Cost of JavaScript - Addy Osmani, 2018
    https://medium.com/@addyosmani/the-cost-of-javascript-in-2018-7d8950fbb5d4

    View Slide

  93. É difícil melhorar o
    que você não mede
    Além dos Milissegundos: a Psicologia da Performance @JoaoCunha

    View Slide

  94. Performance
    também é
    percepção
    Além dos Milissegundos: a Psicologia da Performance @JoaoCunha

    View Slide

  95. Envolva a
    performance nas
    decisões
    Além dos Milissegundos: a Psicologia da Performance @JoaoCunha

    View Slide

  96. Labor Illusion
    Harvard Business Review
    https://hbr.org/2011/05/think-customers-hate-waiting-not-so-fast
    Mais rápido é sempre melhor?

    View Slide

  97. https:/
    /www.smashingmagazine.com/2015/09/why-performance-matters-the-perception-of-time/
    Denys Mishunov - @mishunov
    Why perceived
    performance matters

    View Slide

  98. bit.ly/dicas-performance

    View Slide

  99. [email protected]
    @joaocunha
    @joaocunha86
    @joaocunhanet

    View Slide