Slides from my talk at Multi Channel Conference 14. Talk is about 5 best practices to align content and speed to create a fast user experience, and continue to keep it aligned for every release

1. 5 best practices for a fast user experience
@jeroentjepkema
Multi Channel Conference 2014

2. Waiting = Engagement

9. Just another day...

17. “Both offline and online consumers associate long
wait times with poor customer service, however
online consumers often lack context for delays”

18. Purpose vs. Context

19. Good Design
+
Fast Delivery
=
Great User Experience

20. NS Hispeed: Site optimization
0
12,5
25
37,5
50
62,5
75
87,5
100
0-0,5 0,5-1 1-1,5 1,5-2 2-2,5 2,5-3 3-3,5 3,5-4 4-5 5-6 6-7 7-8 8-9 9-10 >10
Non-Bouncerate(%)
Categorienaam
Pageviews(#)
Bouncerate # Pageviews
Bol.com: Speed vs. Engagement per month
Data presented by MeasureWorks at Velocity Conference London 2013: http://bit.ly/MW-VEUrum

21. Load time
Availability
Homepage
Transaction time
Availability
Ticket ordering funnel (7 steps)
Before After
11,5s
95,61%
3,8s
99,52%
Before After
43,2s
88,72%
35,7s
97,65%
30% higher
site success
rate
NS Hispeed: Site optimization

22. Design vs. Speed?

23. 0
25
50
75
100
1 2 3 4 5
Slow Average Fast
%ofrespondentsthatratedtheactualwebsitespeed
Design score (1=bad - 5=beautiful)
Over 60% of people that experienced a slow website ranked
design 2 points lower compared to a fast experience

24. So... why doesn’t everybody have a
fast website?

25. Trouble is stickyness?
Gum/Shoe
The problem lies in stickyness...

26. 1. Design for user fit

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

28. Experience vs. surfing online....

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

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

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

32. 15-20% worse than reality
Task completion has positive impact
Slow downs have more impact
Always compared to past experiences
Experience vs. surfing online....

33. Consumers visit 18-23 travel websites
before they finally convert
Source: TNS/Nipo

34. Search/Orientation phase
Perception of experience
1
Performance influence cycle
http://twinkle100.measureworks.nl

35. Delivered
experience
Your website
3
5
2
Stimulate content/
conversion
4
Performance influence cycle
Search/Orientation phase
Perception of experience
1
http://twinkle100.measureworks.nl

36. Impact of
Mobile?

37. Your
BRAND
Impact of
Mobile?

38. every
day
Flipboard
e-mail
Twitter
Fitbit
Foursquare
Human.co
facebook
twitter
linkedin
NBA.com
News
apps
Your
BRAND
Impact of
Mobile?

39. Impact of
Mobile?
every
week
every
day
Flipboard
e-mail
Netflix
Youtube
Twitter
Dropbox
Parkmobile
Soundcloud
Evernote
Fitbit
Foursquare
Human.co
whatsapp
Facetime
facebook
twitter
linkedin
NBA.com
News
apps
Your
BRAND

40. every
week
every
day
Flipboard
e-mail
Shazam
Google
Hangouts
Netflix
Youtube
Twitter
Dropbox
Parkmobile
Google
Plus
Soundcloud
Evernote
Google
Maps
Appie
Skype
Pathe
Youtube
Meetup
Fitbit
Foursquare
Human.co
whatsapp
Facetime
facebook
twitter
linkedin
NBA.com
News
apps
every
month
Your
BRAND
Impact of
Mobile?

41. ?
every
week
every
day
Flipboard
e-mail
Shazam
Google
Hangouts
Netflix
Youtube
Twitter
Dropbox
Parkmobile
Google
Plus
Soundcloud
Evernote
Google
Maps
appie
Skype
Pathe
Youtube
Meetup
Fitbit
Foursquare
Human.co
whatsapp
Facetime
facebook
twitter
linkedin
NBA.com
every
month
Your
BRAND
Impact of
Mobile?

42. The waiting experience

44. 2. Design for priority delivery

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

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

47. Above the fold?

48. Which priority?

49. Improving which metrics?

50. Why do we need that Carousel?

52. Priority 1

53. Priority 1
Priority 2

54. Priority 1
Priority 2
Priority 3

55. Priority?
Tested on iPhone with webpagetest.org (3G traffic shaping, 2000Kbps Down, 764Kbps Up, 150ms latency)

56. 90% of all mobile optimized Twinkle100
sites loads menu before actual content

57. The bottom line...

58. 3. Design for fast perception

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

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

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

64. Perception = Fast Experience

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

66. “Speed is at it’s best when it creates the feeling
that you don’t have to work to achieve your goal”

67. @jeroentjepkema, MeasureWorks
How fast should I be?

68. 0,3
0 Source: Jakob Nielsen
Instantaneous: I like it!

69. 1
0,3
0 Source: Jakob Nielsen
Instantaneous: I like it!
Interaction: Let’s conversate...

70. 1
0,3
0 Source: Jakob Nielsen
Instantaneous: I like it!
Interaction: Let’s conversate...

71. 1
3
0,3
0 Source: Jakob Nielsen
Instantaneous: I like it!
Interaction: Let’s conversate...
Mmm, shall I click away?

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

73. Don’t stop with one page:
Flow state

74. Provide relevant content to
support task completion...

75. ...deliver it fast, focus on perception!

76. Targets for conversion...

77. Some metrics to target for:*
Perception
Actionable
Flow
Time to first paint 0.5 - 1 sec.
Time to interact: 1-3 sec
Variation < 20% between pages
* For mobile the target is “screen actionable in 1 sec.”

78. 4. Design for mobile, mobile, mobile

79. Mobile Web vs. Mobile App

80. Research by Google: http://ssl.gstatic.com/think/docs/the-new-multi-screen-world-study_research-studies.pdf

81. 51%
36%
12%
Launch Mobile App Ask Google Visit mobile website
N = 1449
Research performed by Bol.com, presented at MIE2014: Bit.ly/MW-MIE13
How to start your mobile journey?

82. #mobile(web)first

83. Smartphone or Tablet?

84. 34% of all consumers use the device that’s
closest to them when looking for information
Research by Google: http://ssl.gstatic.com/think/docs/the-new-multi-screen-world-study_research-studies.pdf

85. 34% of all consumers use the device that’s
closest to them when looking for information
Research by Google: http://ssl.gstatic.com/think/docs/the-new-multi-screen-world-study_research-studies.pdf
Over 79% of users prefer a full version of the
website on tablet

86. Designing mobile web into the
customer journey?

87. Desktop Smartphonevs.

88. More Lessvs.

89. More Lessvs.
Rich content
Fast connections
Large screen sizes
Couch Commerce
Small real estate
Touch enabled
Slow/Fast connections
On the move

90. #Fast(er)Delivery

91. 0
11,25
22,5
33,75
45
56,25
67,5
78,75
90
0-0,5 0,5-1 1-1,5 1,5-2 2-2,5 2,5-3 3-3,5 3,5-4 4-5 5-6 6-7 7-8 8-9 9-10 >10
Non-Bouncerate(%)
Categorienaam
Pageviews(#)
Speed vs. Engagement per month Bol.com
Non-Bounce Desktop # Pageviews
Pageviews(#)
Non-Bounce Mobile
LD50: 4.85 sec.
Baseline: 2,7 sec.
Data presented by MeasureWorks at Velocity Conference London 2013: http://bit.ly/MW-VEUrum

92. WiFi 4G 3G
What happens if I don’t optimize?
Tested with webpagetest.org (WiFi (10Mbs down/1,5Mbs up), 4G (5Mbps Down, 1Mbps Up) & 3G (2000Kbps Down, 764Kbps Up))

93. Responsive Web Design?
WiFi 3G
Tested with webpagetest.org (WiFi (10Mbs down/1,5Mbs up), 4G (5Mbps Down, 1Mbps Up) & 3G (2000Kbps Down, 764Kbps Up))

94. Change your viewpoint when
designing for mobile

95. #TouchEnabled

96. http://www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-
devices.php?goback=.gmp_72842.gde_72842_member_215909354
49%
One thumb device...
36%
22%

97. http://www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-
devices.php?goback=.gmp_72842.gde_72842_member_215909354
The green zone

99. - +
One touch?

100. Mobile
Search!!

101. vs.

102. 5. Design to be measured

103. Defining Service Levels

104. A practical (and easy DIY) example:

105. Purchasing a book,
must be completed (speed),
where every page loads under 3 sec.,
from any location in the Netherlands,
for 90% of all users,
every day between 6am and 12pm,
using IE9 and higher,
Customer journey
Metric: Speed
Target: Sec
User scenario
User locations
Percentile
Service Window
measured with Real User Monitoring. Monitoring type
Read more: Metrics 101, Velocityconf 2010

106. Repeatable, End-User focused & Quantifiable

107. Data presented by MeasureWorks at Velocity Conference London 2013: http://bit.ly/MW-VEUrum
0
12,5
25
37,5
50
62,5
75
87,5
100
0-0,5 0,5-1 1-1,5 1,5-2 2-2,5 2,5-3 3-3,5 3,5-4 4-5 5-6 6-7 7-8 8-9 9-10 >10
Non-Bouncerate(%)
Categorienaam
Pageviews(#)
Bouncerate # Pageviews
Bol.com: Speed vs. Engagement per month

108. 0
12,5
25
37,5
50
62,5
75
87,5
100
0-0,5 0,5-1 1-1,5 1,5-2 2-2,5 2,5-3 3-3,5 3,5-4 4-5 5-6 6-7 7-8 8-9 9-10 >10
Non-Bouncerate(%)
Categorienaam
Pageviews(#)
Bouncerate # Pageviews
Bol.com: Speed vs. Engagement per month
Non-Bounce Mobile
LD50: 4.85 sec.
Baseline: 2,7 sec.
Poverty Line: 10,6 sec.
Data presented by MeasureWorks at Velocity Conference London 2013: http://bit.ly/MW-VEUrum

109. “Every release should be better or
equal to previous version”

110. Measuring the right data

111. Application Delivery Chain
INTERNET CUSTOMERS
Third-party/
Cloud Services
Content
Delivery
Networks
Local
ISP
Mobile
Carriers
Major
ISP
INTERNAL USERS(CLOUD) DATA CENTER
Storage DB Servers Web Servers
App
Servers
Middleware
ServersMainframe
Load
Balancers
Network

112. INTERNET CUSTOMERS
Third-party/
Cloud Services
Content
Delivery
Networks
Local
ISP
Mobile
Carriers
Major
ISP
INTERNAL USERS(CLOUD) DATA CENTER
Storage DB Servers Web Servers
App
Servers
Middleware
ServersMainframe
Load
Balancers
Network
Application Delivery Chain
This is what you control This is what you’re blamed for

113. Measuring performance?

114. Measuring performance? Always outside-
in, from the browser perspective...

115. 2 ways of measuring performance...

116. Synthetic
Monitoring

117. Periodic, simulated, measurement of performance

118. Go check your site @
Webpagetest.org
(For settings: Akamai State of the Internet)

119. Ultimately, synthetic monitoring shows you if your
site’s working or not...
(best used for operations and service reports)

120. Real User
Monitoring

121. The problem with synthetic...

122. Synthetic heartbeat
Real Users
..it’s ‘a’ user, not your end user

123. Relies on navigation timing API, custom variables can be added
Turn on
“Site Speed”
in your GA
account!
http://bit.ly/1ivGWTt

124. Or try
Soasta mPulse
http://bit.ly/I5ngs8

125. Ultimately, Real User Monitoring shows you how many
users are affected by bad performance...
(best used for capacity management and conversion optimization)

126. One truth to rule them all...

127. Questions so far?

128. Expert review...

129. 5 best practices for a fast user experience

130. 5 best practices for a fast user experience
1. Understand your customer

131. 5 best practices for a fast user experience
1. Understand your customer
2. Prioritize content

132. 5 best practices for a fast user experience
1. Understand your customer
2. Prioritize content
3. Deliver fast

133. 5 best practices for a fast user experience
1. Understand your customer
2. Prioritize content
3. Deliver fast
4. When mobile, design from the ground up

134. 5 best practices for a fast user experience
1. Understand your customer
2. Prioritize content
3. Deliver fast
4. When mobile, design from the ground up
5. Design to be measurable

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