Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

Performance is Usability Our Journey Today... ★ How is your site perceived? ★ How do we measure emotion? with JavaScript ★ Frustration Index

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

Perception How do users feel when using your site?

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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%

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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.

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

Correlating Rage & Frustration

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

Thank You!

Slide 27

Slide 27 text

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