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
   

   View Slide

2. Radimir Bitsov
   Front-end developer who ❤ performance, accessibility,
   and interface animation.
   

   View Slide

3. @radibit
   GitHub · Twitter · CodePen
   

   View Slide

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

   White Rabbit: Sometimes, just
   one second.”
   

   View Slide

5. Time is an objective quantity
   We can measure it very precisely.
   

   View Slide

6. source Humans Since 1982
   

   View Slide

7. We know the importance of
   measuring page load time
   Our performance budgets are primarily based on it.
   

   View Slide

8. However, time
   perception is subjective
   

   View Slide

9. The Kappa effect
   500km / 3h
   

   800km / 3h
   

   View Slide

10. Steps in the right direction
    It’s important to consider TTI, first contentful paint,
    above the fold time
    

    View Slide

11. Measure web performance
    WebPagetest
    Browser developer tools
    Lighthouse
    Find even more on perf-tooling.today
    

    View Slide

12. How fast users think your app is?
    It’s all about the experience.
    

    View Slide

13. Make your users happy
    

    View Slide

14. Why perceived performance matters?
    Make your users happy
    

    View Slide

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

    View Slide

16. How humans sense time?
    Why perceived performance matters?
    Which techniques can speed up perception?
    Make your users happy
    

    View Slide

17. Why perceived
    performance matters
    photo by pixabay.com
    

    View Slide

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%
    

    View Slide

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%
    

    View Slide

20. May affect users purchase intent
    source radware.com/mobile-eeg2013
    500 ms delay resulted in ⬆ 26% in users’
    frustration, ⬇ 8% engagement
    

    View Slide

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
    

    View Slide

22. Ilya Grigorik
    “Perceived performance =
    f(Expected Performance, UX,
    Actual Performance)”
    

    View Slide

23. Think like your users
    

    View Slide

24. How people perceive time
    photo by sciencenews.org
    

    View Slide

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

    View Slide

26. Our brains manipulate the
    perceived duration all the time
    

    View Slide

27. Chronostatis
    

    View Slide

28. What we know about perceived
    duration and web performance
    

    View Slide

29. Time durations
    Instant
    Immediate
    User Flow
    Attention Span
    0s 2s 4s 6s 8s
    source
    

    View Slide

30. 0.1s < < 1s < 3s < 8s
    Users’ expectation to get a feedback from a given
    action.
    

    View Slide

31. Providing joy at 60 fps
    source Allen Pike, former software engineer @ Apple
    

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

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
    

    View Slide

36. Just noticeable
    difference
    Weber–Fechner law
    

    View Slide

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%
    

    View Slide

38. Aim for 30%, go beyond
    the threshold ⚡
    

    View Slide

39. Speed up perception
    

    View Slide

40. Favorite perceived perf techniques
    

    View Slide

41. Optimistic updates
    

    View Slide

42. Background operations
    Instagram starts
    uploading a picture as
    soon as users choose the
    one they want to share.
    

    View Slide

43. Background operations
    Register the like action,
    though the feed is still
    loading.
    

    View Slide

44. Skeleton screens
    

    View Slide

45. Launch screen
    source iOS Human Interface Guidelines
    Apple introduced
    skeleton screens in
    their interface
    guidelines as launch
    screens.
    

    View Slide

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

    View Slide

47. Skeleton screen in
    action
    It feels that the
    application on the left
    loads content faster!
    source tandemseven
    

    View Slide

48. Progressive image
    loading
    

    View Slide

49. source csswizardry
    

    View Slide

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

    View Slide

51. Using linear-gradient
    

    View Slide

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

    View Slide

53. source
    

    View Slide

54. What about spinners
    and loaders?
    

    View Slide

55. source
    

    View Slide

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.
    

    View Slide

57. Interface animation
    

    View Slide

58. Motion
    Animations can affect
    the perception of time
    and duration for your
    website’s visitors.
    

    View Slide

59. Moving objects
    source Val Head
    

    View Slide

60. Content shifting UX
    source Sarah Drasner
    

    View Slide

61. Animation is a powerful technique!
    Performance and functionality however should always
    be the goal over anything else.
    

    View Slide

62. Don’t forget to
    stay :active
    

    View Slide

63. Active state
    

    View Slide

64. Avoid active state with transition!
    

    View Slide

65. Be smart about
    perceived performance
    

    View Slide

66. View Slide

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

    View Slide

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

    View Slide

69. Thank you!
    @radibit
    Slides
    

    View Slide