What you see is faster than what you get - ways to speed up perception

What you see is faster than what you get - ways to speed up perception

How do people perceive time? Why is it important to achieve better performance perception in comparison to the actual expectation? How can we be good to our users, and care more about their experience? This talk focuses on these questions by providing insights, practical techniques, and an overview of the experiential aspect of web performance.

2ac0603f272f18d3eef87e65f5ecdc90?s=128

Radimir Bitsov

May 03, 2017
Tweet

Transcript

  1. What you see is faster than what you get! Ways

    to speed up perception
  2. Radimir Bitsov Front-end developer who ❤ performance, accessibility, and interface

    animation.
  3. @radibit GitHub · Twitter · CodePen

  4. Lewis Carroll, Alice in Wonderland “Alice: How long is forever?

    
 White Rabbit: Sometimes, just one second.”
  5. Time is an objective quantity We can measure it very

    precisely.
  6. source Humans Since 1982

  7. We know the importance of measuring page load time Our

    performance budgets are primarily based on it.
  8. However, time perception is subjective

  9. The Kappa effect 500km / 3h 
 800km / 3h

  10. Steps in the right direction It’s important to consider TTI,

    first contentful paint, above the fold time
  11. Measure web performance WebPagetest Browser developer tools Lighthouse Find even

    more on perf-tooling.today
  12. How fast users think your app is? It’s all about

    the experience.
  13. Make your users happy

  14. Why perceived performance matters? Make your users happy

  15. How humans sense time? Why perceived performance matters? Make your

    users happy
  16. How humans sense time? Why perceived performance matters? Which techniques

    can speed up perception? Make your users happy
  17. Why perceived performance matters photo by pixabay.com

  18. source pwastats.com Influences the perception of your brand Twitter Lite

    is interactive in less than 5s over 3G on most devices, with average load time reduced by over 30%
  19. Influences the perception of your brand source pwastats.com housing.com increased

    conversions by 38% and sped up page load by 30%, while also lowering their bounce rate by 40%
  20. May affect users purchase intent source radware.com/mobile-eeg2013 500 ms delay

    resulted in ⬆ 26% in users’ frustration, ⬇ 8% engagement
  21. May affect users purchase intent source radware.com/mobile-eeg2013 Slow websites dramatically

    reduced the measured emotional aspect of purchase intent and brand functionality
  22. Ilya Grigorik “Perceived performance = f(Expected Performance, UX, Actual Performance)”

  23. Think like your users

  24. How people perceive time photo by sciencenews.org

  25. The internal clock model Start End Source Other stimulus Pacemaker

    Accumulator Decision taking
  26. Our brains manipulate the perceived duration all the time

  27. Chronostatis

  28. What we know about perceived duration and web performance

  29. Time durations Instant Immediate User Flow Attention Span 0s 2s

    4s 6s 8s source
  30. 0.1s < < 1s < 3s < 8s Users’ expectation

    to get a feedback from a given action.
  31. Providing joy at 60 fps source Allen Pike, former software

    engineer @ Apple
  32. Providing joy at 60 fps ⬇ 16ms smooth experience at

    60 fps
  33. Providing joy at 60 fps ⬇ 16ms smooth experience at

    60 fps ⬇ 100ms not perfect for animation, still good for feedback
  34. Providing joy at 60 fps ⬇ 16ms smooth experience at

    60 fps ⬇ 100ms not perfect for animation, still good for feedback ⬇ 1000ms users sense the delay, not frustrated if there is a visual feedback
  35. Providing joy at 60 fps ⬇ 16ms smooth experience at

    60 fps ⬇ 100ms not perfect for animation, still good for feedback ⬇ 1000ms users sense the delay, not frustrated if there is a visual feedback ⬆ 1000ms joy is lost, users are loosing their feeling of task flow
  36. Just noticeable difference Weber–Fechner law

  37. The 20% rule source Designing and Engineering Time, Steven C.

    Seow In order for users to see any difference, it has to be changed by a minimum of 20%
  38. Aim for 30%, go beyond the threshold ⚡

  39. Speed up perception

  40. Favorite perceived perf techniques

  41. Optimistic updates

  42. Background operations Instagram starts uploading a picture as soon as

    users choose the one they want to share.
  43. Background operations Register the like action, though the feed is

    still loading.
  44. Skeleton screens

  45. Launch screen source iOS Human Interface Guidelines Apple introduced skeleton

    screens in their interface guidelines as launch screens.
  46. First screen source iOS Human Interface Guidelines “It’s solely intended

    to enhance the perception of your app as quick to launch and immediately ready for use.”
  47. Skeleton screen in action It feels that the application on

    the left loads content faster! source tandemseven
  48. Progressive image loading

  49. source csswizardry

  50. Automatically get the relevant colors color-extractor get-image-colors postcss-resemble-image

  51. Using linear-gradient

  52. Progress indicators It’s our chance to give users certainty!

  53. source

  54. What about spinners and loaders?

  55. source

  56. Avoid them as a single indicator! Yes, we all love

    creating them! However, they draw attention to the fact that the user is waiting.
  57. Interface animation

  58. Motion Animations can affect the perception of time and duration

    for your website’s visitors.
  59. Moving objects source Val Head

  60. Content shifting UX source Sarah Drasner

  61. Animation is a powerful technique! Performance and functionality however should

    always be the goal over anything else.
  62. Don’t forget to stay :active

  63. Active state

  64. Avoid active state with transition!

  65. Be smart about perceived performance

  66. None
  67. Make your site feel fast That’s what really matters!

  68. Care more about your users It’s all about them!

  69. Thank you! @radibit Slides