A UX tale: DevOps guide to empathy
-
Upload
tammy-everts -
Category
Internet
-
view
140 -
download
3
Transcript of A UX tale: DevOps guide to empathy
![Page 1: A UX tale: DevOps guide to empathy](https://reader036.fdocuments.us/reader036/viewer/2022062522/58ce7af21a28abdc578b775d/html5/thumbnails/1.jpg)
A #UX tale:DevOps guide to empathy
Tammy EvertsToronto Web Performance MeetupMarch 2017
![Page 2: A UX tale: DevOps guide to empathy](https://reader036.fdocuments.us/reader036/viewer/2022062522/58ce7af21a28abdc578b775d/html5/thumbnails/2.jpg)
@tamevertsperformancebeacon.com
WPOstats.com
![Page 3: A UX tale: DevOps guide to empathy](https://reader036.fdocuments.us/reader036/viewer/2022062522/58ce7af21a28abdc578b775d/html5/thumbnails/3.jpg)
soasta.io/timeismoneybook
![Page 4: A UX tale: DevOps guide to empathy](https://reader036.fdocuments.us/reader036/viewer/2022062522/58ce7af21a28abdc578b775d/html5/thumbnails/4.jpg)
“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
![Page 5: A UX tale: DevOps guide to empathy](https://reader036.fdocuments.us/reader036/viewer/2022062522/58ce7af21a28abdc578b775d/html5/thumbnails/5.jpg)
Perception vs. reality
![Page 6: A UX tale: DevOps guide to empathy](https://reader036.fdocuments.us/reader036/viewer/2022062522/58ce7af21a28abdc578b775d/html5/thumbnails/6.jpg)
The average web user believes they waste
two days a year waiting for pages to load.
![Page 7: A UX tale: DevOps guide to empathy](https://reader036.fdocuments.us/reader036/viewer/2022062522/58ce7af21a28abdc578b775d/html5/thumbnails/7.jpg)
Source: Stoyan Stefanov, The Psychology of Speed
![Page 8: A UX tale: DevOps guide to empathy](https://reader036.fdocuments.us/reader036/viewer/2022062522/58ce7af21a28abdc578b775d/html5/thumbnails/8.jpg)
“Phone rage”: How people react to slow mobile sites
Tealeaf/Harris Interactive, 2011
![Page 9: A UX tale: DevOps guide to empathy](https://reader036.fdocuments.us/reader036/viewer/2022062522/58ce7af21a28abdc578b775d/html5/thumbnails/9.jpg)
![Page 10: A UX tale: DevOps guide to empathy](https://reader036.fdocuments.us/reader036/viewer/2022062522/58ce7af21a28abdc578b775d/html5/thumbnails/10.jpg)
http://www.webperformancetoday.com/2012/01/05/colonoscopies-cold-water-and-pain-how-our-memory-works-and-how-this-relates-to-web-performance/
![Page 11: A UX tale: DevOps guide to empathy](https://reader036.fdocuments.us/reader036/viewer/2022062522/58ce7af21a28abdc578b775d/html5/thumbnails/11.jpg)
“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
![Page 12: A UX tale: DevOps guide to empathy](https://reader036.fdocuments.us/reader036/viewer/2022062522/58ce7af21a28abdc578b775d/html5/thumbnails/12.jpg)
Why are we so impatient?
![Page 13: A UX tale: DevOps guide to empathy](https://reader036.fdocuments.us/reader036/viewer/2022062522/58ce7af21a28abdc578b775d/html5/thumbnails/13.jpg)
Source: Jakob Nielsen
![Page 14: A UX tale: DevOps guide to empathy](https://reader036.fdocuments.us/reader036/viewer/2022062522/58ce7af21a28abdc578b775d/html5/thumbnails/14.jpg)
![Page 15: A UX tale: DevOps guide to empathy](https://reader036.fdocuments.us/reader036/viewer/2022062522/58ce7af21a28abdc578b775d/html5/thumbnails/15.jpg)
“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ölzleSenior Vice President of Technical
Infrastructure Google
![Page 16: A UX tale: DevOps guide to empathy](https://reader036.fdocuments.us/reader036/viewer/2022062522/58ce7af21a28abdc578b775d/html5/thumbnails/16.jpg)
![Page 17: A UX tale: DevOps guide to empathy](https://reader036.fdocuments.us/reader036/viewer/2022062522/58ce7af21a28abdc578b775d/html5/thumbnails/17.jpg)
How do we measure frustration and engagement?
![Page 18: A UX tale: DevOps guide to empathy](https://reader036.fdocuments.us/reader036/viewer/2022062522/58ce7af21a28abdc578b775d/html5/thumbnails/18.jpg)
https://www.slideshare.net/nicjansma/measuring-continuity
![Page 19: A UX tale: DevOps guide to empathy](https://reader036.fdocuments.us/reader036/viewer/2022062522/58ce7af21a28abdc578b775d/html5/thumbnails/19.jpg)
“Web stress”When apps or sites are slow,
we have to concentrate up to 50% harder to stay on
task.
CA Technologies, 2011
![Page 20: A UX tale: DevOps guide to empathy](https://reader036.fdocuments.us/reader036/viewer/2022062522/58ce7af21a28abdc578b775d/html5/thumbnails/20.jpg)
Radware, 2013
![Page 21: A UX tale: DevOps guide to empathy](https://reader036.fdocuments.us/reader036/viewer/2022062522/58ce7af21a28abdc578b775d/html5/thumbnails/21.jpg)
Radware, 2013
![Page 22: A UX tale: DevOps guide to empathy](https://reader036.fdocuments.us/reader036/viewer/2022062522/58ce7af21a28abdc578b775d/html5/thumbnails/22.jpg)
fast
slow
Radware, 2013
![Page 23: A UX tale: DevOps guide to empathy](https://reader036.fdocuments.us/reader036/viewer/2022062522/58ce7af21a28abdc578b775d/html5/thumbnails/23.jpg)
Are we measuring the right stuff?
![Page 24: A UX tale: DevOps guide to empathy](https://reader036.fdocuments.us/reader036/viewer/2022062522/58ce7af21a28abdc578b775d/html5/thumbnails/24.jpg)
https://www.slideshare.net/nicjansma/measuring-continuity
![Page 25: A UX tale: DevOps guide to empathy](https://reader036.fdocuments.us/reader036/viewer/2022062522/58ce7af21a28abdc578b775d/html5/thumbnails/25.jpg)
https://www.slideshare.net/nicjansma/measuring-continuity
![Page 26: A UX tale: DevOps guide to empathy](https://reader036.fdocuments.us/reader036/viewer/2022062522/58ce7af21a28abdc578b775d/html5/thumbnails/26.jpg)
26
First Paint is not equal to Start Render!
Chrome – “First Paint”
True Start Render
![Page 27: A UX tale: DevOps guide to empathy](https://reader036.fdocuments.us/reader036/viewer/2022062522/58ce7af21a28abdc578b775d/html5/thumbnails/27.jpg)
27
User Timing InterfaceAllows developers to measure performance of their applications through high-precision timestamps
Consists of “marks” and “measures” PerformanceMark: Timestamp PerformanceMeasure: Duration between
two given marks
![Page 28: A UX tale: DevOps guide to empathy](https://reader036.fdocuments.us/reader036/viewer/2022062522/58ce7af21a28abdc578b775d/html5/thumbnails/28.jpg)
28
How long does it take to display
the main product image on my
site?
![Page 29: A UX tale: DevOps guide to empathy](https://reader036.fdocuments.us/reader036/viewer/2022062522/58ce7af21a28abdc578b775d/html5/thumbnails/29.jpg)
29
Record when an image loads<img src=“image1.gif” onload=“performance.mark(‘image1’)”>
For more interesting examples:
Measure hero image delayhttp
://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
![Page 31: A UX tale: DevOps guide to empathy](https://reader036.fdocuments.us/reader036/viewer/2022062522/58ce7af21a28abdc578b775d/html5/thumbnails/31.jpg)
Cheating perception
![Page 32: A UX tale: DevOps guide to empathy](https://reader036.fdocuments.us/reader036/viewer/2022062522/58ce7af21a28abdc578b775d/html5/thumbnails/32.jpg)
“Time is measured objectively but perceived subjectively,
and experiences can be engineered to improve
perceived performance.”
Ilya GrigorikHigh Performance Browser Networking
![Page 33: A UX tale: DevOps guide to empathy](https://reader036.fdocuments.us/reader036/viewer/2022062522/58ce7af21a28abdc578b775d/html5/thumbnails/33.jpg)
Progress indicators
![Page 34: A UX tale: DevOps guide to empathy](https://reader036.fdocuments.us/reader036/viewer/2022062522/58ce7af21a28abdc578b775d/html5/thumbnails/34.jpg)
34
![Page 35: A UX tale: DevOps guide to empathy](https://reader036.fdocuments.us/reader036/viewer/2022062522/58ce7af21a28abdc578b775d/html5/thumbnails/35.jpg)
35
A progress indicator on a page that loads in <5 seconds will make that
page feel slower.
Best case: 10+ seconds
![Page 36: A UX tale: DevOps guide to empathy](https://reader036.fdocuments.us/reader036/viewer/2022062522/58ce7af21a28abdc578b775d/html5/thumbnails/36.jpg)
36
Progress bars that offer the illusion of a left-moving ripple can improve
perceived wait time by up to 10%.
![Page 37: A UX tale: DevOps guide to empathy](https://reader036.fdocuments.us/reader036/viewer/2022062522/58ce7af21a28abdc578b775d/html5/thumbnails/37.jpg)
37
Progress bars that pulse, and that increase pulsation frequency
as the bar progresses, are perceived as being faster.
![Page 38: A UX tale: DevOps guide to empathy](https://reader036.fdocuments.us/reader036/viewer/2022062522/58ce7af21a28abdc578b775d/html5/thumbnails/38.jpg)
38
Progress bars that speed up are considered more satisfying by
users.*
*Think back to that colonoscopy research
![Page 39: A UX tale: DevOps guide to empathy](https://reader036.fdocuments.us/reader036/viewer/2022062522/58ce7af21a28abdc578b775d/html5/thumbnails/39.jpg)
39
But…use them sparingly
![Page 40: A UX tale: DevOps guide to empathy](https://reader036.fdocuments.us/reader036/viewer/2022062522/58ce7af21a28abdc578b775d/html5/thumbnails/40.jpg)
Image rendering
![Page 41: A UX tale: DevOps guide to empathy](https://reader036.fdocuments.us/reader036/viewer/2022062522/58ce7af21a28abdc578b775d/html5/thumbnails/41.jpg)
![Page 42: A UX tale: DevOps guide to empathy](https://reader036.fdocuments.us/reader036/viewer/2022062522/58ce7af21a28abdc578b775d/html5/thumbnails/42.jpg)
42
![Page 43: A UX tale: DevOps guide to empathy](https://reader036.fdocuments.us/reader036/viewer/2022062522/58ce7af21a28abdc578b775d/html5/thumbnails/43.jpg)
43HTTP Archive, February 2017
![Page 44: A UX tale: DevOps guide to empathy](https://reader036.fdocuments.us/reader036/viewer/2022062522/58ce7af21a28abdc578b775d/html5/thumbnails/44.jpg)
44
When do we start to interact with a page?
Radware, Progressive JPEGs: Good or Evil?
![Page 45: A UX tale: DevOps guide to empathy](https://reader036.fdocuments.us/reader036/viewer/2022062522/58ce7af21a28abdc578b775d/html5/thumbnails/45.jpg)
45Radware, Progressive JPEGs: Good or Evil?
![Page 46: A UX tale: DevOps guide to empathy](https://reader036.fdocuments.us/reader036/viewer/2022062522/58ce7af21a28abdc578b775d/html5/thumbnails/46.jpg)
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 LewisChair, Mindlab International
![Page 47: A UX tale: DevOps guide to empathy](https://reader036.fdocuments.us/reader036/viewer/2022062522/58ce7af21a28abdc578b775d/html5/thumbnails/47.jpg)
47
![Page 48: A UX tale: DevOps guide to empathy](https://reader036.fdocuments.us/reader036/viewer/2022062522/58ce7af21a28abdc578b775d/html5/thumbnails/48.jpg)
48
http://www.oreilly.com/pub/e/3425
![Page 49: A UX tale: DevOps guide to empathy](https://reader036.fdocuments.us/reader036/viewer/2022062522/58ce7af21a28abdc578b775d/html5/thumbnails/49.jpg)
Make the perceived value of your content worth the wait
![Page 50: A UX tale: DevOps guide to empathy](https://reader036.fdocuments.us/reader036/viewer/2022062522/58ce7af21a28abdc578b775d/html5/thumbnails/50.jpg)
http://www.webperformancetoday.com/2012/01/05/colonoscopies-cold-water-and-pain-how-our-memory-works-and-how-this-relates-to-web-performance/
![Page 51: A UX tale: DevOps guide to empathy](https://reader036.fdocuments.us/reader036/viewer/2022062522/58ce7af21a28abdc578b775d/html5/thumbnails/51.jpg)
One last thought
![Page 52: A UX tale: DevOps guide to empathy](https://reader036.fdocuments.us/reader036/viewer/2022062522/58ce7af21a28abdc578b775d/html5/thumbnails/52.jpg)
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/
![Page 53: A UX tale: DevOps guide to empathy](https://reader036.fdocuments.us/reader036/viewer/2022062522/58ce7af21a28abdc578b775d/html5/thumbnails/53.jpg)
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/
![Page 54: A UX tale: DevOps guide to empathy](https://reader036.fdocuments.us/reader036/viewer/2022062522/58ce7af21a28abdc578b775d/html5/thumbnails/54.jpg)
VisionDexterityWorking memory
![Page 55: A UX tale: DevOps guide to empathy](https://reader036.fdocuments.us/reader036/viewer/2022062522/58ce7af21a28abdc578b775d/html5/thumbnails/55.jpg)
Thanks!@tameverts
performancebeacon.comWPOstats.com