Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
A #UX tale:
DevOps guide
to empathy
Tammy Everts
Toronto Web Performance Meetup
March 2017
@tameverts
performancebeacon.com
WPOstats.com
soasta.io/timeismoneybook
“Oh… pity the hyper-impatient web
generation. Such busy lives with so many
important things to do — like post the latest
d...
Perception vs. reality
The average web user believes they waste
two days a year waiting for pages to load.
Source: Stoyan Stefanov, The Psychology of Speed
“Phone rage”: How people react to slow mobile sites
Tealeaf/Harris Interactive, 2011
http://www.webperformancetoday.com/2012/01/05/colonoscopies-cold-water-and-pain-
how-our-memory-works-and-how-this-relates...
“The real thing we are after is
to create a user experience that people
love and they feel is fast… and so we
might be fro...
Why are we
so impatient?
Source: Jakob Nielsen
“We want you to be able to flick from
one page to another as quickly as you
can flick a page on a book. So we’re
really ai...
How do we measure
frustration and
engagement?
https://www.slideshare.net/nicjansma/measuring-continuity
“Web stress”
When apps or sites are slow,
we have to concentrate
up to 50% harder to stay on task.
CA Technologies, 2011
Radware, 2013
Radware, 2013
fast
slow
Radware, 2013
Are we measuring
the right stuff?
https://www.slideshare.net/nicjansma/measuring-continuity
https://www.slideshare.net/nicjansma/measuring-continuity
26
First Paint is not equal to Start Render!
Chrome – “First Paint” True Start Render
27
User Timing Interface
Allows developers to measure performance of
their applications through high-precision
timestamps
...
28
How long does it
take to display the
main product
image on my site?
29
Record when an image loads
<img src=“image1.gif” onload=“performance.mark(‘image1’)”>
For more interesting examples:
Me...
30
http://soasta.io/perftimings
Cheating perception
“Time is measured objectively
but perceived subjectively,
and experiences can
be engineered to improve
perceived performan...
Progress indicators
34
35
A progress indicator on a page that
loads in <5 seconds will make that
page feel slower.
Best case: 10+ seconds
36
Progress bars that offer the illusion of a
left-moving ripple can improve
perceived wait time by up to 10%.
37
Progress bars that pulse, and that
increase pulsation frequency as the
bar progresses, are perceived as being
faster.
38
Progress bars that speed up are
considered more satisfying by users.*
*Think back to that colonoscopy research
39
But…
use them sparingly
Image rendering
42
43
HTTP Archive, February 2017
44
When do we start to interact with a page?
Radware, Progressive JPEGs: Good or Evil?
45
Radware, Progressive JPEGs: Good or Evil?
46
“When, as with the Progressive JPEG
method, image rendition is a two-stage
process in which an initially coarse image
s...
47
48
http://www.oreilly.com/pub/e/3425
Make the
perceived value
of your content
worth the wait
http://www.webperformancetoday.com/2012/01/05/colonoscopies-cold-water-and-pain-
how-our-memory-works-and-how-this-relates...
One last thought
65% of seniors use the internet.
Users aged 65 and older
are 43% slower at using websites
than users aged 21-55.
https://w...
Between the ages of 25 and 60,
our ability to use the web
declines by 0.8% a year.
https://www.nngroup.com/articles/usabil...
Vision
Dexterity
Working memory
Thanks!
@tameverts
performancebeacon.com
WPOstats.com
A UX tale: DevOps guide to empathy
A UX tale: DevOps guide to empathy
A UX tale: DevOps guide to empathy
A UX tale: DevOps guide to empathy
Upcoming SlideShare
Loading in …5
×

A UX tale: DevOps guide to empathy

484 views

Published on

When you think about it, if you're in the performance business, what you're really in is the empathy business.

When we think about it, we feel for all those poor folks who have to wait for pages or apps to load, especially in less-than-ideal circumstances. We feel for them because we are them. Many of us have gotten off late-night flights and struggled to open a rideshare app while using crappy airport wifi. Many of us have waited and waited (and waited some more) to read articles on media sites. Many of us have accidentally hit the wrong button on our phones because of janky page rendering, and then silently – or not so silently – cursed as we hit the "back" button and waited (and waited some more) for the original page to reload.

But here's the problem: Empathy doesn't scale well.

It's easy to feel bad for individual people. It's hard to feel bad – really bad – for massive groups of people. And that makes it easy to fall into siloed thinking about what we do. Humans are natural compartmentalizers. We like putting ourselves in boxes. So next thing you know, you've labelled yourself: "I'm all about image optimization" or "I'm a custom fonts expert" or "CSS is my life".

But everything we do points back to users.

With that in mind (and because I love few things more than I love making lists), this talk includes some of my favourite research about web performance and user expectations/behaviour. My hope is that these will inspire you when you go about your daily work.

Published in: Internet
  • Hey guys! Who wants to chat with me? More photos with me here 👉 http://www.bit.ly/katekoxx
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

A UX tale: DevOps guide to empathy

  1. 1. A #UX tale: DevOps guide to empathy Tammy Everts Toronto Web Performance Meetup March 2017
  2. 2. @tameverts performancebeacon.com WPOstats.com
  3. 3. soasta.io/timeismoneybook
  4. 4. “Oh… pity the hyper-impatient web generation. Such busy lives with so many important things to do — like post the latest drivel onto their Facebook pages or download the YouTube viral video of the day. Oops, sorry — of the minute.” Reader comment “For Impatient Web Users, an Eye Blink Is Too Long to Wait” The New York Times
  5. 5. Perception vs. reality
  6. 6. The average web user believes they waste two days a year waiting for pages to load.
  7. 7. Source: Stoyan Stefanov, The Psychology of Speed
  8. 8. “Phone rage”: How people react to slow mobile sites Tealeaf/Harris Interactive, 2011
  9. 9. http://www.webperformancetoday.com/2012/01/05/colonoscopies-cold-water-and-pain- how-our-memory-works-and-how-this-relates-to-web-performance/
  10. 10. “The real thing we are after is to create a user experience that people love and they feel is fast… and so we might be front-end engineers, we might be dev, we might be ops, but what we really are is perception brokers.” Steve Souders, SpeedCurve
  11. 11. Why are we so impatient?
  12. 12. Source: Jakob Nielsen
  13. 13. “We want you to be able to flick from one page to another as quickly as you can flick a page on a book. So we’re really aiming very, very high here… at something like 100 milliseconds.” Urs Hölzle Senior Vice President of Technical Infrastructure Google
  14. 14. How do we measure frustration and engagement?
  15. 15. https://www.slideshare.net/nicjansma/measuring-continuity
  16. 16. “Web stress” When apps or sites are slow, we have to concentrate up to 50% harder to stay on task. CA Technologies, 2011
  17. 17. Radware, 2013
  18. 18. Radware, 2013
  19. 19. fast slow Radware, 2013
  20. 20. Are we measuring the right stuff?
  21. 21. https://www.slideshare.net/nicjansma/measuring-continuity
  22. 22. https://www.slideshare.net/nicjansma/measuring-continuity
  23. 23. 26 First Paint is not equal to Start Render! Chrome – “First Paint” True Start Render
  24. 24. 27 User Timing Interface Allows developers to measure performance of their applications through high-precision timestamps Consists of “marks” and “measures”  PerformanceMark: Timestamp  PerformanceMeasure: Duration between two given marks
  25. 25. 28 How long does it take to display the main product image on my site?
  26. 26. 29 Record when an image loads <img src=“image1.gif” onload=“performance.mark(‘image1’)”> For more interesting examples: Measure hero image delay http://www.stevesouders.com/blog/2015/05/12/hero-image-custom-metrics/ Measure aggregate times to get an “above fold time” http://blog.patrickmeenan.com/2013/07/measuring-performance-of-user- experience.html
  27. 27. 30 http://soasta.io/perftimings
  28. 28. Cheating perception
  29. 29. “Time is measured objectively but perceived subjectively, and experiences can be engineered to improve perceived performance.” Ilya Grigorik High Performance Browser Networking
  30. 30. Progress indicators
  31. 31. 34
  32. 32. 35 A progress indicator on a page that loads in <5 seconds will make that page feel slower. Best case: 10+ seconds
  33. 33. 36 Progress bars that offer the illusion of a left-moving ripple can improve perceived wait time by up to 10%.
  34. 34. 37 Progress bars that pulse, and that increase pulsation frequency as the bar progresses, are perceived as being faster.
  35. 35. 38 Progress bars that speed up are considered more satisfying by users.* *Think back to that colonoscopy research
  36. 36. 39 But… use them sparingly
  37. 37. Image rendering
  38. 38. 42
  39. 39. 43 HTTP Archive, February 2017
  40. 40. 44 When do we start to interact with a page? Radware, Progressive JPEGs: Good or Evil?
  41. 41. 45 Radware, Progressive JPEGs: Good or Evil?
  42. 42. 46 “When, as with the Progressive JPEG method, image rendition is a two-stage process in which an initially coarse image snaps into sharp focus, cognitive fluency is inhibited and the brain has to work slightly harder to make sense of what is being displayed.” Dr. David Lewis Chair, Mindlab International
  43. 43. 47
  44. 44. 48 http://www.oreilly.com/pub/e/3425
  45. 45. Make the perceived value of your content worth the wait
  46. 46. http://www.webperformancetoday.com/2012/01/05/colonoscopies-cold-water-and-pain- how-our-memory-works-and-how-this-relates-to-web-performance/
  47. 47. One last thought
  48. 48. 65% of seniors use the internet. Users aged 65 and older are 43% slower at using websites than users aged 21-55. https://www.nngroup.com/articles/usability-for-senior-citizens/
  49. 49. Between the ages of 25 and 60, our ability to use the web declines by 0.8% a year. https://www.nngroup.com/articles/usability-for-senior-citizens/
  50. 50. Vision Dexterity Working memory
  51. 51. Thanks! @tameverts performancebeacon.com WPOstats.com

×