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.

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/7589250@N08/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. joao@joaocunha.net
    @joaocunha
    @joaocunha86
    @joaocunhanet
    

    View Slide