The Human Aspect of Performance

The performance of a website affects the users of that website in ways that are hard to measure. The lack of responsiveness, lag, jank, and UI lock ups can cause perceptual dissonance that break the user’s flow of thought. A page not responding in the way the user expects, or as fast as the user expects it to, can result in frustration and anger.

From a business point of view, frustrated and angry users are unlikely to convert, and buy items from the site.

Apart from the psychological and emotional effects of bad performance, the factors that result in bad performance can also make sites expensive to use. How much bandwidth does your site require to be downloaded? How much does that bandwidth cost in different parts of the world? How expensive is your site in terms of battery usage?

Transcript

1. The Human Aspect of
   Performance
   How does performance scale from frustration to delight?
   

   View Slide

2. Philip Tellis
   Principal RUM Distiller @ Akamai
   Author of the OpenSource boomerang RUM
   library
   twitter:@bluesmoon ⦿ github:@bluesmoon
   speakerdeck:@bluesmoon
   

   View Slide

3. Performance is
   Usability
   Happy Users are good for Business
   ● Is your site hurting your users?
   ● How fast should your site be?
   ● Is adding a new feature worth
   the performance cost?
   ● Is improving performance worth
   the development cost?
   

   View Slide

4. https://www.flickr.com/photos/avissena/7568524544 https://www.flickr.com/photos/belljar/5354878
   Delight
   Rage
   Users
   

   View Slide

5. View Slide

6. Factors Leading to Frustration or Rage
   ● Wondering if anything is happening
   ● Lack of responsiveness to interactions
   ● Interaction Jank
   ● Unreliable or unexpected responses
   

   View Slide

7. A 500ms connection speed delay resulted in
   up to a 26% increase in peak frustration
   and up to an 8% decrease in engagement.
   Tammy Everts – The impact of network speed on emotional engagement
   

   View Slide

8. Perceptual
   Dissonance
   A violation of the brain’s Predictive Coding
   

   View Slide

9. Expectation vs Reality
   ● Smooth scrolling/animations
   ● Clicking a link should make
   something happen
   ● Click again with hope
   ● Phone battery will last several
   hours
   ● Jank or UI lockup
   ● Dead or Missed Clicks are
   frustrating
   ● !!! Rage clicking !!!
   ● Here’s a beautiful CPU intensive
   animation that runs even when not
   visible on screen
   

   View Slide

10. The average rise in mobile users' heart rates caused
    by delayed web pages — equivalent to the anxiety
    of watching a horror movie alone.
    Ericsson ConsumerLab neuro research 2015
    38%
    

    View Slide

11. And then there’s
    Negativity Bias
    Bad Experiences must be balanced with more intense
    Good Experiences
    https://en.wikipedia.org/wiki/Negativity_bias
    

    View Slide

12. Active Listening Can Help
    We can alleviate negative emotions simply by
    acknowledging that we’ve failed to meet the user’s
    expectations.
    https://uxdesign.cc/the-fastest-way-to-pinpoint-frustrating-user-experiences-1f8b95bc94aa
    https://doi.org/10.1016/j.ijhcs.2004.01.002
    

    View Slide

13. Accessibility
    Can your users easily access your site?
    

    View Slide

14. How much does it cost to use your site?
    ● Data charges can make a site
    expensive to visit
    ● Each GB of data transfer utilizes
    1.6KWh of energy on the client
    ● Heavy use of CPU can increase
    runtime costs
    https://whatdoesmysitecost.com — Tim Kadlec https://aceee.org/files/proceedings/2012/data/papers/0193-000409.pdf
    

    View Slide

15. A Faster Site might appear slower in
    aggregate
    Very slow is sometimes better than not available at all!
    https://blog.chriszacharias.com/page-weight-matters
    

    View Slide

16. ...And it’s not just the slowest Users
    It's amazing how inconsistent cell networks can be, even in one of the most
    densely populated areas of the US.
    Max: 3 seconds (!!!!!)
    Median: 150ms
    Min: 100ms
    Katie Hempenius
    @katiehempenius
    13 Sep 2018
    

    View Slide

17. High Packet Loss can lead to
    JavaScript, CSS and Images not
    Loading
    

    View Slide

18. Anyone need to Plug In?
    ● 28% perf degradation in
    Battery Saver mode
    ● 75% increase in Long Task
    time on lower powered
    devices
    ● Frame rate reduced from
    16fps to 10fps
    Apollo Sauroctonus / Praxiteles / Le Louvre
    

    View Slide

19. Device Capabilities
    ● The average selling price of mobile
    devices in the largest markets is $150
    ● Even in the US, it’s around $340
    ● The average consumer isn’t using the
    latest iPhone, Pixel or Galaxy
    ● Test on lower end devices like the Alcatel
    Go Phone
    Art at Davis Square by skunkadelia
    

    View Slide

20. Measuring Emotion...
    How do we measure emotion from JavaScript?
    

    View Slide

21. ● Ask the user
    ● Bounce / Conversion Rate /
    LD
    50
    ● Rage Clicks / Cursor Thrashing
    / Wild Mouse
    ● Facial analysis
    ● Wireless Brain Interface
    Methods of measuring Emotion
    (with JavaScript)
    

    View Slide

22. Rage Clicks occur when users rapid-fire click
    (or tap) on your site or app.
    Rage clicking is the digital equivalent of
    cursing to release frustration.
    https://www.fullstory.com/resources/guide-to-understanding-frustrating-user-experiences-online/
    https://www.psychologytoday.com/us/blog/hide-and-seek/201205/hell-yes-the-7-best-reasons-swearing
    Rage Clicks
    

    View Slide

23. People who are angry are more likely to use the mouse in
    a jerky and sudden, but surprisingly slow fashion.
    People who feel frustrated, confused or sad are less
    precise in their mouse movements and move it at
    different speeds.
    https://www.telegraph.co.uk/technology/news/12050481/Websites-could-read-emotions-by-seeing-how-fast-you-move-your-mouse.html
    https://conversionxl.com/blog/user-frustration/
    https://www.academia.edu/3085041/Patterns_of_cursor_movement_for_different_devices
    Cursor Thrashing/Wild Mouse
    

    View Slide

24. https://webgazer.cs.brown.edu/
    Facial Analysis Mind Reading
    https://www.emotiv.com/
    We do NOT do either of these
    

    View Slide

25. Ask the User
    We do NOT do this either
    ● Selection Bias
    ● Hawthorne Effect
    ● Intrusive action (boomerang is
    passive)
    

    View Slide

26. How fast should
    you be?
    Meeting users’ needs & expectations
    

    View Slide

27. User expectations are relative
    Make constant
    improvements relative
    to past performance
    Make yourself faster
    than your competitors
    

    View Slide

28. https://developer.akamai.com/akamai-mpulse/crux-benchmarking
    

    View Slide

29. LD
    50
    The Median Lethal Dose of your page or site indicates
    the point at which 50% of users decide to leave!
    

    View Slide

30. Patience is also a cultural thing
    We found that users from
    different parts of the world
    have a different threshold
    for performance.
    

    View Slide

31. Rank pages by their impact on conversions
    ● What’s the correlation between
    various timers and potential
    for conversion?
    ● What about error rate, Rage
    Clicks, Cursor Thrashing or
    Wild Mouse?
    

    View Slide

32. 1.3×
    We don’t know why, but users expect your page to be
    interactive at around 1.2-1.5× the visually ready time.
    

    View Slide

33. Rage Clicks depend on Latency of Page Usability
    ● Interacting with a page before onload
    OR interactive is the most common
    cause of Rage Clicks
    ● Some Rage Clicks happen after the
    page is usable, possibly due to
    JavaScript errors or CPU intensive
    tasks; they could also be false
    positives.
    ● In over 30% of cases, a page is
    interactive after onload fires, and in
    15% of cases, users try interacting
    between onload and interactive.
    Data collected and analysed with boomerang and Akamai mPulse
    

    View Slide

34. Data collected and analysed with boomerang and Akamai mPulse
    Rage Clicking is fairly consistent if first Interaction is
    before the page becomes Interactive
    Steady drop off if first Interaction is after the
    page becomes Interactive
    Rage Clicks are most likely if first Interaction is just
    before onload, possibly because DOM Ready event
    handlers are hogging CPU.
    (This is true even if the page becomes Interactive
    before onload)
    

    View Slide

35. Rage Clicks as a Function of First Interaction & Visually REady
    Data collected and analysed with boomerang and Akamai mPulse
    

    View Slide

36. How fast is too fast?
    Is there a limit to how fast you should be?
    

    View Slide

37. 
    Assuming that making performance improvements is
    cheap… but that isn’t entirely true.
    

    View Slide

38. You can sometimes hit diminishing returns
    https://developer.akamai.com/blog/2018/11/20/next-step-web-performance-roi-calculations-what-if-analysis-v3
    

    View Slide

39. A better question...
    Will adding a new feature delight
    or frustrate the user?
    

    View Slide

40. References
    ● Computer Rage on Wikipedia
    ● The Psychology of Computer Rage
    ● A third of Americans confess to verbal or physical
    abuse of their computers
    ● Computer Rage affects more than half of Britons
    ● Social and Psychological Influences on Computer
    User Frustration
    ● The impact of network speed on emotional
    engagement
    ● Ericsson ConsumerLab neuro research 2015
    ● Negativity Bias on Wikipedia
    ● The fastest way to pinpoint frustrating user
    experiences
    ● The 7 best reasons for swearing
    ● Emotional Design
    ● https://whatdoesmysitecost.com
    ● The Ethics of Web Performance
    ● The Megawatts behind Your Megabytes: Going from
    Data-Center to Desktop
    ● Page Weight Matters
    ● Improving UX through Front End Performance
    ● Guide to understanding frustrating user experiences
    online
    ● Toward a more civilized design: studying the effects of
    computers that apologize
    ● Websites could read emotions by seeing how fast you
    move your mouse
    ● Your users are frustrated
    ● Patterns of cursor movement for different devices
    ● Akamai mPulse CrUX Benchmarking
    

    View Slide

41. Thank You!
    

    View Slide