Uploaded byMeasureWorks
MeasureWorks - Design for Fast Experiences (Startup session).key
The document discusses the critical importance of fast, responsive design in e-commerce and its impact on conversion rates. It provides data from real user monitoring that emphasizes the link between site speed and user engagement, noting that faster pages lead to higher conversion rates and customer satisfaction. It also outlines strategies for optimizing web performance to improve user experience and achieve business goals.
More Related Content
Similar to MeasureWorks - Design for Fast Experiences (Startup session).key
MeasureWorks - Design for Fast Experiences (Startup session).key
- 1.
- 2. a.k.a. Design forFirst Impressions...
- 4. Part 1: Whyshould we care?
- 5.
- 8.
- 9.
- 10. 0-0,5 0,5-1 1-1,51,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 Conversionrate(%) Categorienaam Real User Monitoring: True Conversion Ratio Data collected by MeasureWorks at various e-commerce websites using real user monitoring, reference: http://bit.ly/MW-VEUrum 0% 10% Competitive Custom B2B
- 11. Real User Monitoring:True Conversion Ratio Data collected by MeasureWorks at various e-commerce websites using real user monitoring, reference: http://bit.ly/MW-VEUrum 0% 10% Optimal Conversion: 1,8s 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 Conversionrate(%) Categorienaam Competitive Custom B2B
- 12. Real User Monitoring:True Conversion Ratio Data collected by MeasureWorks at various e-commerce websites using real user monitoring, reference: http://bit.ly/MW-VEUrum 0% 10% Optimal Conversion: 1,8s LD50: 4,3s 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 Conversionrate(%) Categorienaam Competitive Custom B2B
- 13. Real User Monitoring:True Conversion Ratio Data collected by MeasureWorks at various e-commerce websites using real user monitoring, reference: http://bit.ly/MW-VEUrum 0% 10% Optimal Conversion: 1,8s LD50: 4,3s Poverty Line: 7,6s 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 Conversionrate(%) Categorienaam Competitive Custom B2B
- 14. On average afast experience leads to a 4% higher true intent conversion rate...
- 15.
- 16. 0 25 50 75 100 1 2 34 5 Slow Average Fast %ofrespondentsthatratedtheactualwebsitespeed Design score (1=bad - 5=beautiful)
- 17. 60% of peopleranked design lower when they experienced a slow website
- 18. Why should wecare?
- 19. the WAITING experience Source:Jakob Nielsen
- 20. 0 0,5 Visual confirmation Source: JakobNielsen the WAITING experience
- 21. 0 0,5 1,5 Visual confirmation Understand Navigation Source:Jakob Nielsen the WAITING experience
- 22. 0 0,5 1,53 Visual confirmation Understand Navigation Relevant Content? Source: Jakob Nielsen the WAITING experience
- 23. 0 0,5 1,53 10 Visual confirmation Understand Navigation Relevant Content? Bye Bye! Source: Jakob Nielsen the WAITING experience
- 24.
- 25.
- 30.
- 36. “Both offline andonline consumers associate (slow) performance with poor customer service”
- 37. Click away slidePerformancetolerance?
- 38. 0 10 20 30 40 50 60 70 80 90 100 0 1 23 4 5 6 7 8 9 10 Bouncerate per pagetype/session Bouncerate(%) Page load time (sec.) Median Campaign Product search
- 39. 0 10 20 30 40 50 60 70 80 90 100 0 1 23 4 5 6 7 8 9 10 Bouncerate(%) Page load time (sec.) Median Campaign Product search Bouncerate per pagetype/session
- 40. Queuing for iPhone6launch - London 2014 Purpose vs. Context
- 41. Online users oftenlack context for delays...
- 42. ...and see noother option than to click away
- 43. “Your website isat it’s best when it creates the feeling that you don’t have to work to achieve your goal”
- 44. Part 2: Designfor fast experience
- 45.
- 46. “Hit them witha beat! The decision to continue listening to a song is often determined in the first 10 seconds” - Dr. Dre, Source Magazine The Skip: http://musicmachinery.com/2014/05/02/the-skip/
- 47. Current state ofresponsive web ;-(
- 48. WiFi 3G Tested withwebpagetest.org (WiFi (10Mbs down/1,5Mbs up), 4G (5Mbps Down, 1Mbps Up) & 3G (2000Kbps Down, 764Kbps Up))
- 49.
- 50. Responsive & Fitson every screen
- 51.
- 52.
- 53.
- 54.
- 55. Search/Orientation phase Perception ofexperience 1 Performance influence cycle http://twinkle100.measureworks.nl
- 56. Delivered experience Your website 3 5 2 Stimulate content/ conversion 4 Performanceinfluence cycle Search/Orientation phase Perception of experience 1 http://twinkle100.measureworks.nl
- 57.
- 58.
- 59.
- 60.
- 61.
- 62.
- 63. Which order? Product, Price,User Experience
- 64. 5 fast design‘hacks’ to avoid the (mobile) ‘skip’
- 65. 1. Speed-up yourperception
- 66.
- 67.
- 68.
- 70. Which is faster? Testedwith webpagetest.org (WiFi (10Mbs down/1,5Mbs up), 4G (5Mbps Down, 1Mbps Up) & 3G (2000Kbps Down, 764Kbps Up))
- 71. Which is faster? Testedwith webpagetest.org (WiFi (10Mbs down/1,5Mbs up), 4G (5Mbps Down, 1Mbps Up) & 3G (2000Kbps Down, 764Kbps Up))
- 72. Which is faster? Testedwith webpagetest.org (WiFi (10Mbs down/1,5Mbs up), 4G (5Mbps Down, 1Mbps Up) & 3G (2000Kbps Down, 764Kbps Up))
- 73. Which is faster? Testedwith webpagetest.org (WiFi (10Mbs down/1,5Mbs up), 4G (5Mbps Down, 1Mbps Up) & 3G (2000Kbps Down, 764Kbps Up))
- 74. “The faster youcan visualize your content, the more engaged your visitors will become”
- 75. 2. Defer non-prioritycontent
- 76. Which contents loadsin which order?
- 77. A: Load carouselfirst B: Delayed download 20% time spent on priority content 1% time spent on priority content http://www.nngroup.com/articles/website-response-times/
- 78. 83% of allTwinkle100 sites loads menu before content...
- 81. “The faster youcan paint your priority content, the more engaged your visitors will become”
- 82.
- 84. “Users might overlookthings that change too fast and/or often. Changeable screen elements are harder to understand in a limited timeframe”
- 85.
- 86.
- 87. Homepage Search Product overview Product Detail Basket Understand navigation (1-2 sec.) Consistent navigation (0,5-1sec.) Renew your orientation (1-2 sec.) renew your navigation (1-2 sec.) Consistent navigation (0,5-1 sec.)
- 88. Consistent, simple &user generated navigation
- 89.
- 90. Item 1 Item2 Item 3 Item 4 Call to action >< Descriptive labels Buy me? Arrows for navigation direction
- 91. Item 1 Item2 Item 3 Item 4 Call to action >< Descriptive labels Buy me? Arrows for navigation direction Call to action first Load other items seperately, in the background Load only primary image second
- 92.
- 93.
- 94. Fast response =Fast Experience?
- 95. 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
- 96.
- 98.
- 99. Show effort, provide specificcontent, build trust
- 100. 5. Let thedevice work...
- 103. Make life easy,insert touch events...
- 104.
- 105.
- 106.
- 107.
- 108.
- 109. Part 3: Findout what works
- 110. Frictionless = Happyusers
- 111. Frictionless = ReducingComplexity
- 112. Frictionless = Recognizablenavigation
- 113. Frictionless = Fastdelivery
- 114. Trouble is stickyness? Gum/Shoe Reachingstickeyness..
- 115. With modern daytechnologies it’s no longer IF we can build, but if anyone will CARE...
- 116. That’s why wehave to learn & adapt fast...
- 117. One Metric ThatMatters
- 118. Every website hasgoals
- 119. Your Analytics measuresthe movement towards these goals
- 120. Importance of correlationvs. causation
- 121. 1 100 10000 Jan Feb MarApr May Jun Jul Aug Sept Oct Nov Dec Relation between Ice cream and drownings? Ice cream consumption Drownings
- 122. http://www.flickr.com/photos/25159787@N07/3766111564 1 100 10000 Jan Feb MarApr May Jun Jul Aug Sept Oct Nov Dec Relation between Ice cream and drownings? Ice cream consumption Drownings
- 123. http://www.flickr.com/photos/25159787@N07/3766111564 1 100 10000 Jan Feb MarApr May Jun Jul Aug Sept Oct Nov Dec True causality Ice cream consumption Drownings Temperature
- 124.
- 125. A leading, causal,connection is the analytics superpower...
- 126. That’s why weneed to pick one at at time...
- 127. Landing page designA/B testing Cohort analysis General analytics URL shortening Funnel analytics Influencer Marketing Publisher analytics SaaS analytics Gaming analytics User interaction Customer satisfaction KPI dashboardsUser segmentation User analytics Spying on users
- 128.
- 129. Challenge: Can wepredict downtime?
- 130. 0 15 30 45 60 0 5 1015 20 25 30 35 40 45 50 55 60 #pageviews Example downtime pattern Min/Hour
- 131. 0 15 30 45 60 0 5 1015 20 25 30 35 40 45 50 55 60 Regular operations #pageviews Example downtime pattern Min/Hour
- 132. 0 15 30 45 60 0 5 1015 20 25 30 35 40 45 50 55 60 Regular operations News papers #pageviews Example downtime pattern Min/Hour
- 133. 0 15 30 45 60 0 5 1015 20 25 30 35 40 45 50 55 60 Regular operations News papers Alerts? #pageviews Example downtime pattern Min/Hour
- 134. 0 15 30 45 60 0 5 1015 20 25 30 35 40 45 50 55 60 Regular operations News papers Alerts? Downtime #pageviews Example downtime pattern Min/Hour
- 135. Min/Hour #pageviews 0 15 30 45 60 0 5 1015 20 25 30 35 40 45 50 55 60 Regular operations News papers Alerts? Downtime Example downtime pattern This is where we need to be!
- 136. Min/Hour #pageviews 0 15 30 45 60 0 5 1015 20 25 30 35 40 45 50 55 60 Regular operations News papers Alerts? Downtime 2. Social Media This is where we need to be! 1. Click Behavior Example downtime pattern Min/Hour
- 137. Step 1: Patternsin Client Behavior?
- 139.
- 140.
- 141. How fast doI need to be?
- 142. Step 3: Falsepositives?
- 143. + = Predictingdowntime? Sentiment Profile Behavior 0 15 30 45 60 0 5 10 15 20 25 30 35 40 45 50 55 60
- 144. Test results (Data derivedfrom incident analysis of 3 websites, across a period of 4 months. Data points matched (manually) over time period, per incident)
- 145. Time period inwhich we can detect a persistent change in pattern per type of monitoring 0 15 30 45 60 0 5 10 15 20 25 30 35 40 45 50 55 60 Social Alerting Change in click behavior Performance alerting Example downtime pattern
- 146. Your mileage mayvary... for now, type of incident determines predictive nature
- 148. 3 types ofdata: Which pages are clicked on? How fast is it on every device? Which elements do they click on?
- 149.
- 150. Go check yoursite @ Webpagetest.org (For settings: Akamai State of the Internet)
- 151.
- 152. 1 Insert tag (.jsfile) into (mobile) web pages Pages are requested from browser/device As pages execute, tag collects performance metrics After onload tag send detailed report for further analysis tag.js tag.js tag.js tag.js 2 3 4
- 153. Top 5 DESKTOPTop5 DESKTOPTop 5 DESKTOP Top Browser type Bouncerate avg. Back-End Time avg. Front-End time Total avg. load time 1 Chrome30 49% 0.26 1.31 1.61 2 IE10 51% 0.27 0.81 1.18 3 Firefox25 48% 0.35 1.42 1.88 4 IE9 51% 0.27 1.26 1.61 5 Mobile Safari7 48% 0.52 1.86 2.79 Top 5 MOBILETop 5 MOBILETop 5 MOBILE Browser type Bouncerate Backend Time FrontEnd time Loadtime 1 Android 4 72% 0.27 2.38 2.64 2 Mobile Safari 7 53% 0.93 1.04 2.58 3 Chrome Mobile 30 75% 0.40 1.19 1.99 4 Chrome Mobile 18 82% 0.41 1.53 2.25 5 Android 2 59% 0.72 1.88 3.05 Browsers, usage, performance...
- 155.
- 156. Where do youclick to book a hotel?
- 157. As designed HomepageLast Minute Product type Destination Preferences Departure Search? Free search?
- 158.
- 159. Are you #fastenough? http://webpagetest.org http://benchmark.measureworks.nl
- 160. Quick links Measure Performance: GoogleAnalytics Site speed: http://bit.ly/1ivGWTt Soast mPulse: http://bit.ly/I5ngs8 Webpagetest: www.webpagetest.org Optimize performance: Yslow: yslow.org GTmetrix: gtmetrix.com Google Pagespeed tools: https://developers.google.com/speed/pagespeed/
- 162. What’s your timeto first tweet? https://blog.twitter.com/2012/improving-performance-on-twittercom
- 163.
- 164. First, establish abaseline:
- 165. A pre-defined setof metrics First, establish a baseline:
- 166. A pre-defined setof metrics that describes normal behavior First, establish a baseline:
- 167. A pre-defined setof metrics that describes normal behavior in order to detect variancies First, establish a baseline:
- 168. and to becomparable within historic context A pre-defined set of metrics that describes normal behavior in order to detect variancies First, establish a baseline:
- 169. A practical (andeasy DIY) example:
- 170. Service Window Purchasing abed, must be completed (speed), where every page loads under 3 sec., from any location in the Netherlands, for 95% of all users, every 5 minutes between 6am and 12pm, using IE9 and higher, Customer journey Metric: Speed Target: Sec User scenario User locations Percentile measured with Synthetic Monitoring. Monitoring type Business Performance
- 171. Repeatable, End-User focused& Quantifiable
- 172. Performance SLA forBol.com
- 173. Data presented byMeasureWorks 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
- 174. 0 12,5 25 37,5 50 62,5 75 87,5 100 0-0,5 0,5-1 1-1,51,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
- 175. ...experiment till youfind what moves the needle
- 176.
- 177. Blink Relevance AvailabilityScalability Sum
- 178. Blink Relevance AvailabilityScalability Sum 5-second rule Gut feeling Instinct score Don’t overthink it
- 179. Blink Relevance AvailabilityScalability Sum 5-second rule Gut feeling Instinct score Don’t overthink it Do we have the available resources? Do we have the skills? Do we have the tools? Is it expensive?
- 180. Blink Relevance AvailabilityScalability Sum 5-second rule Gut feeling Instinct score Don’t overthink it Is this Channel relevant to your product/service? Does your audience hang out on this channel? Can you target them effectively? Do we have the available resources? Do we have the skills? Do we have the tools? Is it expensive?
- 181. Blink Relevance AvailabilityScalability Sum 5-second rule Gut feeling Instinct score Don’t overthink it Is this Channel relevant to your product/service? Does your audience hang out on this channel? Can you target them effectively? Do we have the available resources? Do we have the skills? Do we have the tools? Is it expensive? How scalable is this channel? Can we easily increase it? Law of diminishing returns
- 182. Blink Relevance AvailabilityScalability Sum 5-second rule Gut feeling Instinct score Don’t overthink it Is this Channel relevant to your product/service? Does your audience hang out on this channel? Can you target them effectively? Do we have the available resources? Do we have the skills? Do we have the tools? Is it expensive? How scalable is this channel? Can we easily increase it? Law of diminishing returns 1-5 1-5 1-5 1-5 BRASS score
- 184.
- 185.
- 186. Thanks! More questions? M:[email protected] T: @jeroentjepkema W: www.measureworks.nl View slides: bit.ly/MW-SCL15