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

The Human Aspect of Performance

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?

Philip Tellis

May 22, 2019
Tweet

More Decks by Philip Tellis

Other Decks in Technology

Transcript

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

    View full-size slide

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

    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  6. 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 full-size slide

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

    View full-size slide

  8. 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 full-size slide

  9. 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 full-size slide

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

    View full-size slide

  11. 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 full-size slide

  12. Accessibility
    Can your users easily access your site?

    View full-size slide

  13. 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 full-size slide

  14. 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 full-size slide

  15. ...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 full-size slide

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

    View full-size slide

  17. 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 full-size slide

  18. 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 full-size slide

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

    View full-size slide

  20. ● 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 full-size slide

  21. 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 full-size slide

  22. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  30. 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 full-size slide

  31. 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 full-size slide

  32. 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 full-size slide

  33. 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 full-size slide

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

    View full-size slide

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

    View full-size slide


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

    View full-size slide

  37. 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 full-size slide

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

    View full-size slide

  39. 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 full-size slide