a ux tale: devops guide to empathy

A #UX tale:DevOps guide to empathy

Tammy EvertsToronto Web Performance MeetupMarch 2017

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

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-to-web-performance/






“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

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 aiming

very, very high here… at something like 100

milliseconds.”

Urs HölzleSenior Vice President of Technical

Infrastructure Google

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

fast

slow

Radware, 2013

Are we measuring the right stuff?

26

First Paint is not equal to Start Render!

Chrome – “First Paint”

True Start Render

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

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:

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

http://www.stevesouders.com/blog/2015/05/12/hero-image-custom-metrics/





30

http://soasta.io/perftimings



Cheating perception

“Time is measured objectively but perceived subjectively,

and experiences can be engineered to improve

perceived performance.”

Ilya GrigorikHigh Performance Browser Networking

Progress indicators

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

43HTTP Archive, February 2017

44

When do we start to interact with a page?

Radware, Progressive JPEGs: Good or Evil?

45Radware, 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 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

48

http://www.oreilly.com/pub/e/3425



Make the perceived value of your content worth the wait

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://www.nngroup.com/articles/usability-for-senior-citizens/



Between the ages of 25 and 60, our ability to use the web

declines by 0.8% a year.




VisionDexterityWorking memory

Thanks!@tameverts

performancebeacon.comWPOstats.com

a ux tale: devops guide to empathy

Internet