Embed Size (px)
Citation preview
The Human Aspect of Performance
How does performance scale from frustration to delight?
Philip TellisPrincipal 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
RageUse
rs
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-1f8b95bc94aahttps://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: 150msMin: 100ms
Katie Hempenius@katiehempenius13 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 /
LD50
● 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.htmlhttps://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 UserWe 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
LD50The 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!
