MeasureWorks - Fast Experiences for Responsive Websites
•
5 likes•1,574 views
My slides from M-commerce Event 2015 (mcommerce-event.nl). About why we need to start designing for performance as your visitors don't like to wait online... For you, as a business owner, a speed(y) way to design & xperiment with at your own website
Recommended
More Related Content
Similar to MeasureWorks - Fast Experiences for Responsive Websites
Similar to MeasureWorks - Fast Experiences for Responsive Websites (20)
More from MeasureWorks
More from MeasureWorks (20)
Recently uploaded
Recently uploaded (20)
MeasureWorks - Fast Experiences for Responsive Websites
- 1. Fast, Responsive, Experiences @jeroentjepkema m-commerce event 2015
- 4. “Hit them with a 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/
- 5. Why is this important?
- 6. the WAITING experience Source: Jakob Nielsen
- 7. 0 0,5 Visual confirmation Source: Jakob Nielsen the WAITING experience
- 8. 0 0,5 1,5 Visual confirmation Understand Navigation Source: Jakob Nielsen the WAITING experience
- 9. 0 0,5 1,5 3 Visual confirmation Understand Navigation Relevant Content? Source: Jakob Nielsen the WAITING experience
- 10. 0 0,5 1,5 3 10 Visual confirmation Understand Navigation Relevant Content? Bye Bye! Source: Jakob Nielsen the WAITING experience
- 16. Mobile moments?
- 22. “Both offline and online consumers associate (slow) performance with poor customer service”
- 23. Click away slide Performance tolerance
- 24. Purpose vs. Context Queuing for iPhone6 launch - London 2014
- 25. Online users often lack context for delays...
- 26. ...and see no other option than to click away
- 27. “Your website is at it’s best when it creates the feeling that you don’t have to work to achieve your goal”
- 28. Good Design + Fast Experience = Great User Experience?
- 29. The Mobile Conversion gap..
- 30. User Experience vs. Conversion
- 31. 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 Pageviews(%) Categorienaam Real User Monitoring: Mobile Speed vs. Engagement Data collected by MeasureWorks at various e-commerce websites using real user monitoring, reference: http://bit.ly/MW-VEUrum Bouncerate(%) 0 100 0 100 # Mobile Pageviews # Desktop Pageviews Bouncerate Mobile Bouncerate Desktop
- 32. 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 Pageviews(%) Categorienaam Real User Monitoring: Mobile Speed vs. Engagement Data collected by MeasureWorks at various e-commerce websites using real user monitoring, reference: http://bit.ly/MW-VEUrum Bouncerate(%) 0 100 0 100 # Mobile Pageviews # Desktop Pageviews LD50: 5.25 sec. Optimum: 3,15 sec. Bouncerate Mobile Bouncerate Desktop
- 34. Twinkle100 data collected with webpagetest.org with Chrome, IE11, Firefox & Safari (10Mbs down/1,5Mbs up) 1,49Mb average pagesize 4.59s average page load time 130 requests on average 86% slower than 3 sec. Desktop Performance
- 35. 1,2Mb average pagesize 4.27s via wifi 8.57s via 3G 41% of Twinkle100 have mobile optimized site Twinkle100 data collected with webpagetest.org on both Android & iPhone (WiFi (10Mbs down/1,5Mbs up) & 3G (2000Kbps Down, 764Kbps Up)) Mobile Performance
- 36. Data collected with webpagetest.org on Crome, Firefox, IE11, Android & iPhone (WiFi (10Mbs down/1,5Mbs up) & 3G (2000Kbps Down, 764Kbps Up)) Year over year performance (baseline = 2011) 2012 2013 2014 -3% 8% 4% 2012 2013 2014 25% 5%3% 2012 2013 2014 30% 17% 10% 0 Avg. Speed Avg. Size Avg. # Request -3%
- 37. Social Feedback
- 38. 6% 21% 41% 32% Delivery Ordering UX Other Complaints Top 5 topics Downtime Mobile Speed Login Forms 5% 6% 19% 21% 36% Research from MeasureWorks, Social and More & Obi4Wan. Social mentions collected about Twinkle100 webshops only between March 1 - August 31 2014
- 39. Check-in Readiness Contact Vodafone Data Subscription Mobile Research from MeasureWorks, Social and More & Obi4Wan. Social mentions collected about Twinkle100 webshops only between March 1 - August 31 2014 Downtime Mobile Speed Login Forms 5% 6% 19% 21% 36% Top 5 topics 18% 28% 16% 26% 12%
- 40. Downtime Mobile Speed Login Forms 5% 6% 19% 21% 36% Top 5 topics 18% 28% 16% 26% 12% Check-in Readiness Contact Vodafone Data Subscription Mobile 33% 44% 23% Empty fields Mobile Repeating tasks Forms Research from MeasureWorks, Social and More & Obi4Wan. Social mentions collected about Twinkle100 webshops only between March 1 - August 31 2014
- 41. This is responsive web ;-( WiFi 3G Tested with webpagetest.org (WiFi (10Mbs down/1,5Mbs up), 4G (5Mbps Down, 1Mbps Up) & 3G (2000Kbps Down, 764Kbps Up))
- 42. Faster = fixing the plumbing...
- 44. Optimize (delivery of) requests
- 47. ...fast by design to avoid the mobile ‘skip’
- 48. 1. Speed-up your perception
- 49. Which is faster? Tested with webpagetest.org (WiFi (10Mbs down/1,5Mbs up), 4G (5Mbps Down, 1Mbps Up) & 3G (2000Kbps Down, 764Kbps Up))
- 50. Which is faster? Tested with webpagetest.org (WiFi (10Mbs down/1,5Mbs up), 4G (5Mbps Down, 1Mbps Up) & 3G (2000Kbps Down, 764Kbps Up))
- 51. Which is faster? Tested with webpagetest.org (WiFi (10Mbs down/1,5Mbs up), 4G (5Mbps Down, 1Mbps Up) & 3G (2000Kbps Down, 764Kbps Up))
- 52. Which is faster? Tested with webpagetest.org (WiFi (10Mbs down/1,5Mbs up), 4G (5Mbps Down, 1Mbps Up) & 3G (2000Kbps Down, 764Kbps Up))
- 53. “The faster you can visualize your content, the more engaged your visitors will become”
- 54. 2. Defer non-priority content
- 55. Which contents loads in which order?
- 56. 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/
- 57. 83% of all Twinkle100 sites loads menu before content...
- 60. “The faster you can paint your priority content, the more engaged your visitors will become”
- 61. 3. Sequencing
- 63. “Users might overlook things that change too fast and/or often. Changeable screen elements are harder to understand in a limited timeframe”
- 66. Homepage Search Product overview Product Detail Basket Understand navigation (1-2 sec.) Consistent navigation (0,5-1 sec.) Renew your orientation (1-2 sec.) renew your navigation (1-2 sec.) Consistent navigation (0,5-1 sec.)
- 67. Consistent, simple & user generated navigation
- 69. Item 1 Item 2 Item 3 Item 4 Call to action >< Descriptive labels Buy me? Arrows for navigation direction
- 70. Item 1 Item 2 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
- 71. 4. Increase perceived value
- 73. Fast response = Fast Experience?
- 74. 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
- 77. Show effort, provide specific content, build trust
- 78. 5. Let the device work...
- 81. Make life easy, insert touch events...
- 82. Search
- 83. Touch gestures
- 84. Native gestures
- 85. Scrolling
- 87. Paint your #UX canvas
- 88. Prioritize content, deliver fast
- 89. 3 (fast) design questions to ask...
- 90. Above the fold?
- 91. Which priority?
- 93. Good Design + Fast Experience = Great User Experience
- 94. Are you #fast enough? http://webpagetest.org http://benchmark.measureworks.nl
- 95. Thanks! More questions? M: jtjepkema@measureworks.nl T: @jeroentjepkema W: www.measureworks.nl View slides: bit.ly/MW-MCE15