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

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

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?

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

No content

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

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

Perceptual Dissonance A violation of the brain’s Predictive Coding

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

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%

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

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

Accessibility Can your users easily access your site?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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?

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.

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

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)

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

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

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

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

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

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

Thank You!