From page views, bounce rates and returned visits, behavior and social engagement. We're on an endless journey to understand customer behavior and adapt our websites to being persuasive and conversion ready….But there's a downside to all these improvements. We're turning our customers into prosumers with high expectations about performance and interaction. Adapting to these changes and delivering the right real user experience will become the challenge for the coming years. Based on best practice examples, Jeroen Tjepkema, founder of the performance company MeasureWorks, will deliver insight into why expect things to be fast and how we engage with a website. From design, to performance and analytics, various aspects of user experience will be covered with concrete examples and guidelines.

2. @jeroentjepkema
Performance :: Analytics :: Engagement

3. How to catch a spoiled customer?
the “Human Factor” in performance
Emerce Conversion Event,
12 April 2012

4. So, performance matters....

5. Just a
1-second
delay

6. Just a 7%
1-second loss in
delay conversion

7. Just a 7% 11%
1-second loss in fewer
delay conversion page views

8. Just a 7% 11% 16% decrease
1-second loss in fewer in customer
delay conversion page views satisfaction

9. Performance impacts behavior

10. Less likely to visit site again 49%
Visit competitor? 46%
Brand impact? 28%
Tell others? 21%
Contact Customer Service? 16%
Source: Compuware - Engaging the tablet user; What to expect from web sites?

11. Would you retry?
0x
1x 2x 3x 4x
6% 24% 46% 17% 7%
Source: Compuware, Engaging the tablet user; What to expect from web sites?

12. Performance is a ‘virtue’

13. 5
4
3
2
10
Desktop Tablet Mobile
Source: Compuware: Engaging the tablet user; What to expect from web sites?

14. Performance is about you and me....

15. Your audience is like a
digtal goldfish

16. Only 10 seconds of focus....

17. May I have your attention?

18. 10
0

19. 10
0,3
Instantaneous: I like it!
0

20. 10
1
Interaction: Let’s conversate...
0,3
Instantaneous: I like it!
0

21. 10
3
Mmm, shall I click away?
1
Interaction: Let’s conversate...
0,3
Instantaneous: I like it!
0

22. 10
Only if the task/content is relevant
3
Mmm, shall I click away?
1
Interaction: Let’s conversate...
0,3
Instantaneous: I like it!
0

23. 10
Only if the task/content is relevant
3
Mmm, shall I click away?
1
Do I want to conversate?
Time to first click:
0,3 We need interaction!
Do I like it?
0

24. How we perceive things....

25. Page Load
time

26. Perceived as
15%
slower
Page Load
time

27. Always compared
to past
Perceived as experience
15%
slower
Page Load
time

28. Always compared
to past
Perceived as experience
15%
slower
Task
Page Load completion
time has
positive impact

29. Always compared
to past
Perceived as experience
15%
slower
Task
Page Load completion
time has
positive impact
Slow downs have
more impact

30. Always compared
to past
Perceived as experience
15%
slower
Task
Page Load completion
time has
positive impact
Sensitive for
specific task
per page
Slow downs have
more impact

31. Flow state

32. Flow state

33. “” Flow is an
“optimal experience”
that is
“intrinsically enjoyable”

34. Example: Book a flight
Homepage Select flight Enter details Payment

35. Example: Book a flight
Homepage Select flight Enter details Payment
Enabling the flow state:

36. Example: Book a flight
Homepage Select flight Enter details Payment
Enabling the flow state:
Immediate feedback:
Fast interaction within 0,3-1
sec. Avoid variability in page
load time

37. Example: Book a flight
Homepage Select flight Enter details Payment
Enabling the flow state:
Immediate feedback: Clear goals:
Fast interaction within 0,3-1 Relevant content to support the
sec. Avoid variability in page task of the funnel, simple and
load time easy accessible

39. Get their attention!

40. Telegraaf: Above the fold...

41. Telegraaf: Full page, first view

42. Page size:
1825 Kb
# requests:
273
Time to render:
3,08 sec.
Document complete:
11,62 sec.
Telegraaf: Full page, first view
Source: Webpagetest.org, IE9 5Mb/s up/ 2Mb/s down

43. Source: Webpagetest.org, IE9 5Mb/s up/ 2Mb/s down

44. Time to first click:
3,71 sec.
Source: Webpagetest.org, IE9 5Mb/s up/ 2Mb/s down

45. Keep their attention!

46. Source: Strangeloopnetworks.com: Velocity Europe 2011

47. Source: Strangeloopnetworks.com: Velocity Europe 2011

48. Source: Strangeloopnetworks.com: Velocity Europe 2011

49. Slow is where it hurts....

50. 5
4
3
2
1
0
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
Daily Average Min Max

51. 5
4
3
2
1
0
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
Daily Average Min Max

52. 5
4
3
2
1
0
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
Daily Average Min Max

53. Revenue risked
5
4
3
2
1
0
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
Daily Average Min Max

54. Recipe for success....

55. Reduce Weight

56. Vrijuit.nl

57. Page size:
1660 Kb
# requests:
89
Time to render:
1,29 sec.
Document complete:
3,68 sec.
Not Optimized

58. Page size: Page size:
1660 Kb 498 Kb
# requests: # requests:
89 48
Time to render: Time to render:
1,29 sec. 1,10 sec.
Document complete: Document complete:
3,68 sec. 1,54 sec.
Not Optimized Optimized

59. Page size: Page size:
1660 Kb 498 Kb
# requests: # requests:
89 48
Time to render: Time to render:
1,29 sec. Time to first click:
1,10 sec.
1,10 sec. vs 1,90 sec.
Document complete: Document complete:
3,68 sec. 1,54 sec.
Not Optimized Optimized

60. Keep it simple

61. Mobile First

62. Desktop
Tablet
Mobile
Phone
User touchpoints

63. Desktop
Tablet
Pr
ior
itiz
eB
us
ine Mobile
ss Phone
Go
a ls
User touchpoints

64. Desktop
De
liv
Tablet er
co
Pr nte
ior nt
itiz ac
eB co
us rd
ine ing Mobile
ss ly
Phone
Go
a ls
User touchpoints

65. Measure Context

66. Context?

67. Is it fast?
Context?

68. Is it fast?
Did everything work OK?
Context?

69. Did they like it?
Is it fast?
Did everything work OK?
Context?

70. Accounting:
Web Analytics =
What did they do?

71. Accounting:
Web Analytics =
What did they do?
Context:
Performance =
Could they do it?

72. Accounting:
Web Analytics =
What did they do?
Context:
Performance =
Could they do it?
Context:
Satisfaction = What are they
saying about me?

73. Mix & Match your data...

74. 0,00%
2,00%
4,00%
6,00%
8,00%
01
-1
1-
11
02
-1
1-
11
03
-1
1-
11
04
-1
1-
11
05
-1
1-
11
06
-1
1-
11
07
-1
1-
11
08
-1
1-
11
09
-1
1-
11
10
-1
1-
11
11
-1
1-
11
12
-1
1-
11
13
-1
1-
11
14
-1
1-
11
15
-1
1-
11
16
-1
Conversion rate
1-
11
17
-1
1-
11
18
-1
1-
11
Availability
19
-1
1-
11
20
-1
1-
11
21
-1
1-
11
Conversion rate vs. Availability
22
-1
1-
11
23
-1
1-
11
24
-1
1-
11
25
-1
1-
11
26
-1
1-
11
27
-1
1-
11
28
-1
1-
11
29
-1
1-
11
30
-1
1-
11
90,0%
92,0%
94,0%
96,0%
98,0%
100,0%

75. 0,00%
2,00%
4,00%
6,00%
8,00%
0,00%
0,50%
1,00%
1,50%
01 01
-0 -1
1- 1-
12 11
02 02
-0 -1
1- 1-
12 11
03 03
-0 -1
1- 1-
12 11
04 04
-0 -1
1- 1-
12 11
05 05
-0 -1
1- 1-
12 11
06
-0 06
1- -1
12 1-
11
07
-0 07
1- -1
12 1-
11
08
-0 08
1- -1
12 1-
11
09
-0 09
1- -1
12 1-
11
10
-0 10
1- -1
12 1-
11
11
- 01 11
-1 -1
2 1-
11
12
-0 12
1- -1
12 1-
11
13
-0 13
1- -1
12 1-
11
14
-0 14
1- -1
12 1-
11
15
-0 15
1-
12 -1
1-
11
16
Conversion rate
-0 16
1-
-1
Conversion rate
12
1-
11
17
-0
1- 17
12 -1
1-
11
18
-0
1- 18
12 -1
1-
11
19
-0
Availability
1- 19
12 -1
loadtime (in sec)
1-
11
20
-0
1- 20
12 -1
1-
11
21
-0
1- 21
12 -1
1-
11
22
Conversion rate vs. Availability
-0
Conversion rate vs. Performance
1- 22
12 -1
1-
11
23
-0
1- 23
12
-1
1-
11
24
-0
1- 24
12
-1
1-
25 11
-0
1-
12 25
-1
1-
26 11
-0
1-
12 26
-1
1-
27 11
-0
1-
12 27
-1
1-
28 11
-0
1-
12 28
-1
1-
29 11
-0
1-
12 29
-1
1-
30 11
-0
1-
12 30
-1
1-
31 11
-0
1-
12
90,0%
92,0%
94,0%
96,0%
98,0%
0,0
1,0
2,0
3,0
4,0
5,0
6,0
100,0%

76. 0,00%
2,00%
4,00%
6,00%
8,00%
0,00%
0,50%
1,00%
1,50%
0
200.000
400.000
600.000
800.000
1.000.000
1.200.000
1.400.000
01 01
01 -0 -1
-0 1- 1-
6- 12 11
11
02 02
02 -0 -1
-0 1- 1-
6- 12 11
11
03 03
03 -0 -1
1- 1-
-0 12 11
6-
11
04 04
-0 -1
04 1- 1-
-0 12 11
6-
11
05 05
-0 -1
05 1- 1-
-0 12 11
6-
11
06
-0 06
06 1- -1
12 1-
-0 11
6-
11 07
-0 07
1- -1
07 12 1-
-0 11
6-
11 08
-0 08
1- -1
08 12 1-
-0 11
6-
11 09
-0 09
1- -1
09 12 1-
-0 11
6-
11 10
-0 10
1- -1
10 12 1-
-0 11
6-
11 11
- 01 11
-1 -1
11 2 1-
11
- 06
-1 12
1 -0 12
1- -1
12 1-
12 11
-0
6- 13
11 -0
1- 13
12 -1
1-
13 11
-0
6- 14
11 -0 14
1- -1
12 1-
14 11
-0 15
6-
11 -0 15
1-
12 -1
1-
Pageviews
15 11
-0 16
Conversion rate
6- -0
11 1- 16
-1
Conversion rate
12
1-
16 11
-0 17
6- -0
11 1- 17
12 -1
1-
17 11
-0 18
6-
11 -0
1- 18
12 -1
1-
18 11
-0 19
-0
Availability
6-
loadtime (in sec.)
11 1- 19
12 -1
loadtime (in sec)
1-
19 11
-0 20
6- -0
11 1- 20
12 -1
1-
20 11
-0 21
6- -0
1- 21
Pageviews vs. Performance
11 12 -1
1-
11
21 22
Conversion rate vs. Availability
-0 -0
6-
Conversion rate vs. Performance
1- 22
11 12 -1
1-
11
22 23
-0 -0
6- 1- 23
11 12
-1
1-
11
23 24
-0 -0
6- 1- 24
11 12
-1
1-
25 11
24 -0
-0 1-
6- 12 25
11 -1
1-
26 11
25 -0
-0 1-
6- 12 26
11 -1
1-
27 11
26 -0
-0 1-
6- 12 27
11 -1
1-
28 11
27 -0
-0 1-
6- 12 28
11 -1
1-
29 11
28 -0
-0 1-
6- 12 29
11 -1
1-
30 11
29 -0
1-
-0 12 30
6-
11 -1
1-
31 11
-0
30 1-
-0 12
6-
11
90,0%
92,0%
94,0%
96,0%
98,0%
0,0
1,0
2,0
3,0
4,0
5,0
6,0
100,0%
0
1
2
3
4
5

77. Would you recommend me?

78. Performance vs. Sentiment

79. ?

80. Are we causing any
?
slowdowns on our websites

81. Questions?

82. Recommended...

83. Luke Wroblewski:
www.lukew.com
WPO Hub:
http://www.strangeloopnetworks.com/web-performance-optimization-hub
Flow State:
http://www.websiteoptimization.com/speed/2/2opt.pdf
Or visit http://bit.ly/HrKySH
to test your website

84. Thanks! More questions?
M: jtjepkema@measureworks.nl
T: @jeroentjepkema
W: www.measureworks.nl