MeasureWorks - 5 best practices for a Fast User Experience

23,757 views

Published on

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

Published in: Technology, Internet, Design
3 Comments
175 Likes
Statistics
Notes
No Downloads
Views
Total views
23,757
On SlideShare
0
From Embeds
0
Number of Embeds
1,416
Actions
Shares
0
Downloads
0
Comments
3
Likes
175
Embeds 0
No embeds

No notes for slide

MeasureWorks - 5 best practices for a Fast User Experience

  1. 5 best practices for a fast user experience @jeroentjepkema Multi Channel Conference 2014
  2. Waiting = Engagement
  3. Just another day...
  4. “Both offline and online consumers associate long wait times with poor customer service, however online consumers often lack context for delays”
  5. Purpose vs. Context
  6. Good Design + Fast Delivery = Great User Experience
  7. 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
  8. 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
  9. Design vs. Speed?
  10. 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
  11. So... why doesn’t everybody have a fast website?
  12. Trouble is stickyness? Gum/Shoe The problem lies in stickyness...
  13. 1. Design for user fit
  14. Source: Jakob Nielsen 99% of time online is spent on other sites than yours...
  15. Experience vs. surfing online....
  16. Always compared to past experiences Experience vs. surfing online....
  17. Task completion has positive impact Always compared to past experiences Experience vs. surfing online....
  18. Task completion has positive impact Slow downs have more impact Always compared to past experiences Experience vs. surfing online....
  19. 15-20% worse than reality Task completion has positive impact Slow downs have more impact Always compared to past experiences Experience vs. surfing online....
  20. Consumers visit 18-23 travel websites before they finally convert Source: TNS/Nipo
  21. Search/Orientation phase Perception of experience 1 Performance influence cycle http://twinkle100.measureworks.nl
  22. 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
  23. Impact of Mobile?
  24. Your BRAND Impact of Mobile?
  25. every day Flipboard e-mail Twitter Fitbit Foursquare Human.co facebook twitter linkedin NBA.com News apps Your BRAND Impact of Mobile?
  26. 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
  27. 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?
  28. ? 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?
  29. The waiting experience
  30. 2. Design for priority delivery
  31. What’s your time to first tweet? https://blog.twitter.com/2012/improving-performance-on-twittercom
  32. 3 (performance) design questions to ask...
  33. Above the fold?
  34. Which priority?
  35. Improving which metrics?
  36. Why do we need that Carousel?
  37. Priority 1
  38. Priority 1 Priority 2
  39. Priority 1 Priority 2 Priority 3
  40. Priority? Tested on iPhone with webpagetest.org (3G traffic shaping, 2000Kbps Down, 764Kbps Up, 150ms latency)
  41. 90% of all mobile optimized Twinkle100 sites loads menu before actual content
  42. The bottom line...
  43. 3. Design for fast perception
  44. http://www.nytimes.com/2012/08/19/opinion/sunday/why-waiting-in-line-is-torture.html?pagewanted=all&_r=0
  45. http://answers.yahoo.com/question/index?qid=1005081200005
  46. nytimes.com/2004/02/27/nyregion/27BUTT.html
  47. Perception = Fast Experience
  48. http://www.fastcodesign.com/1669788/the-3-white-lies-behind-instagrams-lightning-speed
  49. “Speed is at it’s best when it creates the feeling that you don’t have to work to achieve your goal”
  50. @jeroentjepkema, MeasureWorks How fast should I be?
  51. 0,3 0 Source: Jakob Nielsen Instantaneous: I like it!
  52. 1 0,3 0 Source: Jakob Nielsen Instantaneous: I like it! Interaction: Let’s conversate...
  53. 1 0,3 0 Source: Jakob Nielsen Instantaneous: I like it! Interaction: Let’s conversate...
  54. 1 3 0,3 0 Source: Jakob Nielsen Instantaneous: I like it! Interaction: Let’s conversate... Mmm, shall I click away?
  55. 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
  56. Don’t stop with one page: Flow state
  57. Provide relevant content to support task completion...
  58. ...deliver it fast, focus on perception!
  59. Targets for conversion...
  60. 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.”
  61. 4. Design for mobile, mobile, mobile
  62. Mobile Web vs. Mobile App
  63. Research by Google: http://ssl.gstatic.com/think/docs/the-new-multi-screen-world-study_research-studies.pdf
  64. 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?
  65. #mobile(web)first
  66. Smartphone or Tablet?
  67. 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
  68. 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
  69. Designing mobile web into the customer journey?
  70. Desktop Smartphonevs.
  71. More Lessvs.
  72. More Lessvs. Rich content Fast connections Large screen sizes Couch Commerce Small real estate Touch enabled Slow/Fast connections On the move
  73. #Fast(er)Delivery
  74. 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
  75. 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))
  76. 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))
  77. Change your viewpoint when designing for mobile
  78. #TouchEnabled
  79. 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%
  80. 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
  81. - + One touch?
  82. Mobile Search!!
  83. vs.
  84. 5. Design to be measured
  85. Defining Service Levels
  86. A practical (and easy DIY) example:
  87. 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
  88. Repeatable, End-User focused & Quantifiable
  89. 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
  90. 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
  91. “Every release should be better or equal to previous version”
  92. Measuring the right data
  93. 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
  94. 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
  95. Measuring performance?
  96. Measuring performance? Always outside- in, from the browser perspective...
  97. 2 ways of measuring performance...
  98. Synthetic Monitoring
  99. Periodic, simulated, measurement of performance
  100. Go check your site @ Webpagetest.org (For settings: Akamai State of the Internet)
  101. Ultimately, synthetic monitoring shows you if your site’s working or not... (best used for operations and service reports)
  102. Real User Monitoring
  103. The problem with synthetic...
  104. Synthetic heartbeat Real Users ..it’s ‘a’ user, not your end user
  105. Relies on navigation timing API, custom variables can be added Turn on “Site Speed” in your GA account! http://bit.ly/1ivGWTt
  106. Or try Soasta mPulse http://bit.ly/I5ngs8
  107. Ultimately, Real User Monitoring shows you how many users are affected by bad performance... (best used for capacity management and conversion optimization)
  108. One truth to rule them all...
  109. Questions so far?
  110. Expert review...
  111. 5 best practices for a fast user experience
  112. 5 best practices for a fast user experience 1. Understand your customer
  113. 5 best practices for a fast user experience 1. Understand your customer 2. Prioritize content
  114. 5 best practices for a fast user experience 1. Understand your customer 2. Prioritize content 3. Deliver fast
  115. 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
  116. 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
  117. Thanks! More questions? M: jtjepkema@measureworks.nl T: @jeroentjepkema W: www.measureworks.nl View slides: bit.ly/MW-MCC14

×