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

What you see is faster than what you get - ways...

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. Lewis Carroll, Alice in Wonderland “Alice: How long is forever?

    
 White Rabbit: Sometimes, just one second.”
  2. We know the importance of measuring page load time Our

    performance budgets are primarily based on it.
  3. Steps in the right direction It’s important to consider TTI,

    first contentful paint, above the fold time
  4. 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%
  5. 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%
  6. May affect users purchase intent source radware.com/mobile-eeg2013 500 ms delay

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

    reduced the measured emotional aspect of purchase intent and brand functionality
  8. 0.1s < < 1s < 3s < 8s Users’ expectation

    to get a feedback from a given action.
  9. Providing joy at 60 fps ⬇ 16ms smooth experience at

    60 fps ⬇ 100ms not perfect for animation, still good for feedback
  10. 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
  11. 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
  12. 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%
  13. Launch screen source iOS Human Interface Guidelines Apple introduced skeleton

    screens in their interface guidelines as launch screens.
  14. 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.”
  15. Skeleton screen in action It feels that the application on

    the left loads content faster! source tandemseven
  16. Avoid them as a single indicator! Yes, we all love

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