Your SlideShare is downloading. ×
MeasureWorks - 5 best practices for a Fast User Experience
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

MeasureWorks - 5 best practices for a Fast User Experience

10,370
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

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
176 Likes
Statistics
Notes
No Downloads
Views
Total Views
10,370
On Slideshare
0
From Embeds
0
Number of Embeds
28
Actions
Shares
0
Downloads
0
Comments
3
Likes
176
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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

×