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

Understanding Emotion for Happy Users

Philip Tellis
November 18, 2020

Understanding Emotion for Happy Users

Blog Post: https://tech.bluesmoon.info/2020/11/understanding-emotion-for-happy-users.html

There is little doubt that closely watched metrics tend to improve over time while metrics that are either uninteresting, or hard to collect tend to get ignored, and often get worse.

Web developers and operations professionals have many tools available to understand and improve the overall performance and health of their websites. Tools that tell us how fast our site is, what the bounce, or conversion rate is, whether any links resulted in a 404, and more. All these tools focus on making development more efficient and reducing errors.

When we focus only on improving raw numbers, we forget that there’s a human on the other end who can become frustrated with an overall bad experience and not just the numbers we’re looking at.

In this talk we will look at how to collect, analyse, and act on a few metrics that tell us more about how our user feels when using the site. We can trend how these metrics change over a user’s browsing experience, and we can improve over time the metric that really matters: user happiness.

Some of the metrics we’ll look at are:
* Rage clicks, missed clicks, and dead clicks
* Cursor thrashing
* LD50 (median lethal dose)

We’ll try and correlate these metrics with things that are easy to improve developmentally, like smoothness, jank, visible transitions, and more.

At the end of this talk you will understand which metrics are useful to measure, how to measure them, and how to tie them in to your development goals.

Philip Tellis

November 18, 2020
Tweet

More Decks by Philip Tellis

Other Decks in Technology

Transcript

  1. Understanding Emotion
    for Happy Users
    How does your site make your users feel?
    Blog Post: https://tech.bluesmoon.info/2020/11/understanding-emotion-for-happy-users.html

    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
    Our Journey Today...
    ★ How is your site perceived?
    ★ How do we measure emotion?
    with JavaScript
    ★ Frustration Index

    View full-size slide

  4. Rage Against The Machine
    ● 36% of Americans with computer issues reported that they had
    screamed, yelled, cursed, or physically assaulted their computers
    ● 40% of Brits reported that they had become physically violent
    toward their computers
    ● https://youtu.be/Lkei8SYU0bc

    View full-size slide

  5. Perception
    How do users feel when using your site?

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

  8. Perception
    ● Perceptual Dissonance
    Unexpected outcomes of common actions
    ● Survivorship Bias
    We only measure users who can reach our
    site. Very slow is better than unreachable.
    ● Negativity Bias
    Bad experiences must be balanced with
    more intense good experiences
    Boston Shipyard Artist’s Community

    View full-size slide

  9. Acknowledging when you didn’t meet the
    user’s expectations can alleviate negative
    perceptions.
    Practice Active Listening
    https://affect.media.mit.edu/pdfs/02.klein-moon-picard.pdf
    https://uxdesign.cc/the-fastest-way-to-pinpoint-frustrating-user-experiences-1f8b95bc94aa
    https://doi.org/10.1016/j.ijhcs.2004.01.002
    https://www.sciencedirect.com/science/article/abs/pii/S1071581904000060?via%3Dihub

    View full-size slide

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

    View full-size slide

  11. ● Ask the user
    ● Affective Computing
    ● Business Metrics
    ● Behavioural Metrics
    ● Frustration Index
    Methods of measuring Emotion
    (with JavaScript)

    View full-size slide

  12. Perceived UX Quality By Wikipedia
    with improved performance
    Increased Satisfaction
    Analyzing Wikipedia Users’ Perceived Quality Of Experience: A Large-Scale Study — Salutari et al, 2020
    https://twitter.com/WikiResearch/status/1241026254058532865
    https://www.mediawiki.org/wiki/Wikimedia_Performance_Team/Perceived_Performance

    View full-size slide

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

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

  15. Users who are confused or lost on your
    site may hit the back button to get back to
    a safe anchor point.
    Backtracking

    View full-size slide

  16. https://addyosmani.com/blog/usability/
    LOADING A WEBPAGE

    View full-size slide

  17. 0.3% 9% 57%
    WHEN DO USERS INTERACT WITH A SITE?

    View full-size slide

  18. Temporal Distribution of RAGE
    The horizontal axis on this chart is time as a relative percent of the full page load time. -50 indicates half of the page load time while +50 is 1.5x the page
    load time. The vertical axis indicates intensity of rage while point radius indicates probability of rage clicks at that time point. The coloured bars indicate
    25th to 75th percentile ranges for the particular timer relative to full page load with the line going through indicating the median.

    View full-size slide

  19. Frustration Index
    https://www.frustrationindex.com/

    View full-size slide

  20. Correlating Rage & Frustration

    View full-size slide

  21. LD
    50
    The Median Lethal Dose of your page or site indicates
    the point at which 50% of users decide to leave!
    https://en.wikipedia.org/wiki/Median_lethal_dose
    https://www.slideshare.net/buddybrewer/tying-web-performance-data-to-human-behavior

    View full-size slide

  22. Correlating Frustration & BUSINESS
    ρ
    t
    =-0.49
    ρ
    b
    =0.65
    LD
    50
    =22

    View full-size slide

  23. Patience is also a cultural thing
    People from different parts of the
    world have a different threshold
    for frustration.
    LD
    25
    Frustration Index

    View full-size slide

  24. So how fast should our site be? How
    do we set our performance budget?

    View full-size slide

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

    View full-size slide

  26. 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
    ● Frustration Index
    ● 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
    ● Wikipedia Paper on User Satisfaction v/s Performance
    ● Strengthening the Link between Site Speed and Business
    Outcomes
    ● Web page usability matters

    View full-size slide