Slides from my session at session at eCommerce Live 2017. What do Walt Disney World, airports and magicians have in common? They all build illusions that make us feel good. The same goes for performance, as your brain decides what is fast and what is not, often ignoring the absolute numbers we measure and rely on. This talk explores the psychology of time, how to measure user timings right and how to use site speed to create more conversions.

1. TIME = MONEY
@jeroentjepkema
eCommerce Live, 31 Mei 2017
Fast. Design. Frictionless

3. Slides: bit.ly/MW-ECL17

4. Formula 1

6. 1950 2013vs.

7. 1950 2013
67 sec. 3 sec.
vs.

8. 1950 2013
67 sec. 3 sec.
$ 57.000 $ 89.000.000
vs.

9. Time = Money

10. Designing (Online) Time

11. Time is variable,
objectively measured,
but subjectively experienced

12. Experience vs. surfing online....

13. Experience vs. surfing online....
Always compared to past experiences

14. Experience vs. surfing online....
Task completion has positive impact
Always compared to past experiences

15. Experience vs. surfing online....
Task completion has positive impact
Slow downs have more impact
Always compared to past experiences

16. Experience vs. surfing online....
Context: Need/Urgency
Task completion has positive impact
Slow downs have more impact
Always compared to past experiences

17. Therefore, key to a fast website is
to engineer the factors that affect this
perception of time

18. External
Variables
Perceived
Usefulness
Perceived
Ease-of-Use
Attitude
towards using
Behavioral
intentions
to use
Actual
Usage
Source: Technology Acceptance Model by Fred Davis

19. Source: First Law of Service: http://davidmaister.com/articles/the-psychology-of-waiting-lines/
Satisfaction: Perceived vs. Expected
Perception
Expectation
Satisfaction (S = P-E)
Fast Slow
Low
High
Low

20. Offline vs. Online perception

21. Uncertain waitsUncertain waits...

22. Unfair waits...

23. http://www.nytimes.com/2012/08/19/opinion/sunday/why-waiting-in-line-is-torture.html?pagewanted=all&_r=0
Unexplained waits...

24. Queuing for iPhone6 launch - London 2014
Purpose vs. Context

25. Online users often lack context for delays...

26. ...and see no other option than to click away

27. “Both offline and online consumers
associate slow performance with
poor customer service”

28. The “Uh-Huh” moment

29. Source: Response Time in Man-Computer Conversational Transactions, R.B. Miller
the RESPONSIVE conversation

30. 0-0,2
Instant
confirmation
the RESPONSIVE conversation
Source: Response Time in Man-Computer Conversational Transactions, R.B. Miller

31. 0-0,2 0,5-1,0
Instant
confirmation
Immediate
acknowledgement
the RESPONSIVE conversation
Source: Response Time in Man-Computer Conversational Transactions, R.B. Miller

32. 0-0,2 0,5-1,0 2,0-5,0
Instant
confirmation
Immediate
acknowledgement
Continuity of
interaction
the RESPONSIVE conversation
Source: Response Time in Man-Computer Conversational Transactions, R.B. Miller

33. 0-0,2 0,5-1,0 2,0-5,0 10
Instant
confirmation
Immediate
acknowledgement
Continuity of
interaction
Abandoment!
the RESPONSIVE conversation
Source: Response Time in Man-Computer Conversational Transactions, R.B. Miller

34. Build for Responsive Conversation

35. Request
(Zero Moment of Truth)

36. Reply
(Instant = 200ms)
https://www.youtube.com/watch?v=0LueoZaifVE

37. Orientation
(Acknowledge = 0.5-1.0 sec)
https://www.youtube.com/watch?v=0LueoZaifVE

38. Decision
(Continuity = 2.0-5.0 sec)
https://www.youtube.com/watch?v=0LueoZaifVE

39. Responsiveness is
relative to the interaction...

40. A: Load carousel first B: Delayed download
20% time spent on priority content 1% time spent on priority content
http://www.nngroup.com/articles/website-response-times/

42. http://www.fastcodesign.com/1669788/the-3-white-lies-behind-instagrams-lightning-speed

44. The kayak effect: http://bit.ly/UgTneD
People prefer to wait for up
to a minute to get what they
want from an app rather
than get it instantly – if, and
it’s an important if, they
believe the app is working
for them

45. Why this works? Occupied time feels
shorter than unoccupied time...

46. http://answers.yahoo.com/question/index?qid=1005081200005

47. nytimes.com/2004/02/27/nyregion/27BUTT.html

49. http://www.livescience.com/39764-mastering-the-psychology-of-standing-in-line.html

50. Flow State
(because your website is more than 1 page...)

51. Flow is a zen-moment where a
person is completely involved in the
activity... Optimal flow comes when
the perceived challenge matches the
persons skills & expectations...

52. Fast delivery,
focus on perceptive experience...

53. ... and provide relevant content to
support task completion.

54. Which is better?
0
1
2
3
4
Home Lister Detail Item Basket
Speed(sec.)
0
1
2
3
4
Home Lister Detail Item Basket
Speed(sec.)
Example A Example B

55. Comparing time
Duration JND
Comparing time = Objective Time + Just Noticeable Difference
Source: Response Time in Man-Computer Conversational Transactions, R.B. Miller

56. The just noticeable difference is the
minimum increase or decrease in
magnitude of a property of a
stimulus
“
”
- Weber-Fechner Law

57. Guessing time: the 20% rule
5 sec.4 sec. 6 sec.
Faster Slower
+20%-20%

58. Which is better?
0
1
2
3
4
Home Lister Detail Item Basket
Speed(sec.)
0
1
2
3
4
Home Lister Detail Item Basket
Speed(sec.)
Example A Example B

59. Performance should not be an after-thought....
Designing lasts longer than fixing technique!

60. Building your
Business Case for Performance

61. a.k.a. How Fast do I need to be?

62. It depends...

63. Data
Context
Content
Speed vs. System?

64. Data
Context
Content
Reality
Distortion
Growth
opportunities
Local
Maximum
Your
(eco)
system
Speed vs. System?

65. High
Low
Low Low
Training
requirement
Usability priority
Intranet/
IT tools
Specialized
applications
Prototypes/
mock-ups
Consumer
software
Speed vs. System?

66. Measuring context

67. Source: Jakob Nielsen
99% of time online is spent on other sites
than yours...

68. Search/Orientation phase
Perception of experience
1
Experience influence cycle

69. Search/Orientation phase
Perception of experience
1
Stimulate content/
conversion
Experience influence cycle
Your website
3
5
2
4
Delivered
Experience

70. Competitive Benchmark
Your direct
competitors
Your users’
favorites
Your HIPPO’s
favorites

71. Performance Analytics

72. How fast am I? (average)
3.5 sec.
load time (sec.)

73. load time (sec.)
Sessions(#) How fast am I? (in reality)
3.5 sec.

74. Anatomy of a
web page
Building a Performance Budget?

75. What’s your time to first tweet?
https://blog.twitter.com/2012/improving-performance-on-twittercom

76. 3 (performance) design questions to ask...

77. Above the fold?

78. What’s the priority?

79. Improving which metrics?

80. Performance Metric That Matters

81. Sessions(#) Performance Metric That Matters?
load time (sec.)

82. Sessions(#) Performance Metric That Matters?
PMTM?
‣Bounce Rate
‣Time on site
‣Pages visited
‣Scroll event
‣Orders
load time (sec.)

83. load time (sec.)
Sessions(#) Performance Metric That Matters?
PMTM?
‣Bounce Rate
‣Time on site
‣Pages visited
‣Scroll event
‣Orders
1.5 sec.
3.5 sec.
True Intent
Conversion Rate

84. Sessions(#) Performance Metric That Matters?
PMTM?
‣Bounce Rate
‣Time on site
‣Pages visited
‣Scroll event
‣Orders
1.5 sec.
3.5 sec.
load time (sec.)
True Intent
Conversion Rate

85. What if...

86. What if... Performance was 10% faster?

87. What if... Performance was 30% faster?

88. Prioritizing optimization

89. 0
3
6
9
12
15
Step 1 Homepage PDP Step 2 Step 3 Step 4
0
75000
150000
225000
300000
Conversion/Activity impact score
Pageloadtime(sec.)
Pageviews(#)
Priority for
optimization

90. Remember, responsiveness is
relative to the interaction...

91. Operational
management
Perception
management
Tolerance
management
Responsive
Issue?
Operational
resource
Can issue be
“disguised”?
No/Limited
Yes Yes
No

93. Reframing the audience's perception...

94. Time = Money

95. (your website) (great design) (fast delivery) (money in the bank)
Time = Money

96. Something to install...

97. Page Load Time: https://chrome.google.com/webstore/detail/page-load-time/fploionmjgeclbkemipmkogoaohcdbig
Webpagetest: https://chrome.google.com/webstore/detail/webpagetest/jhbepelanbbipbinkkjcadbjjinjmiec
Page Analytics: https://chrome.google.com/webstore/detail/page-analytics-by-google/fnbdnhhicmebfgdgglcdacdapkcihcoh
Resources: https://github.com/micmro/performance-bookmarklet
Ghostery: https://chrome.google.com/webstore/detail/ghostery/mlomiejdfkolichcflejclcbmpeaniij
Build With: https://chrome.google.com/webstore/detail/builtwith-technology-prof/dapjbgnjinbpoindlpdmhochffioedbn
Responsive Design: https://chrome.google.com/webstore/detail/responsive-web-design-tes/objclahbaimlfnbjdeobicmmlnbhamkg
Clear Cache: https://chrome.google.com/webstore/detail/clear-cache/cppjkneekbjaeellbfkmgnhonkkjfpdn
SPOF: https://chrome.google.com/webstore/detail/spof-o-matic/plikhggfbplemddobondkeogomgoodeg
Browser Plugins:

98. Thanks! More questions?
M: jtjepkema@measureworks.nl
T: @jeroentjepkema
W: www.measureworks.nl
View slides: bit.ly/MW-OT17