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

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.

Radimir Bitsov

May 03, 2017
Tweet

More Decks by Radimir Bitsov

Other Decks in Programming

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