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.

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
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