Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Responsive Web Design: De essentie van een snelle User Experience

535 views

Published on

Responsive Web Design is een hot topic tegenwoordig. De een na de andere website wordt in een nieuw responsive jasje gestoken om aan de toenemende eisen van (mobiele) gebruikers te voldoen. Maar... met alleen een nieuw design geschaald voor het mobiele scherm kun je je klant niet binden.

Published in: Mobile
  • Be the first to comment

  • Be the first to like this

Responsive Web Design: De essentie van een snelle User Experience

  1. 1. Fast, Responsive, Experiences @jeroentjepkema m-commerce event 2015
  2. 2. The Skip: http://musicmachinery.com/2014/05/02/the-skip/
  3. 3. “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/
  4. 4. Why is this important?
  5. 5. the WAITING experience Source: Jakob Nielsen
  6. 6. 0 0,5 Visual confirmation Source: Jakob Nielsen the WAITING experience
  7. 7. 0 0,5 1,5 Visual confirmation Understand Navigation Source: Jakob Nielsen the WAITING experience
  8. 8. 0 0,5 1,5 3 Visual confirmation Understand Navigation Relevant Content? Source: Jakob Nielsen the WAITING experience
  9. 9. 0 0,5 1,5 3 10 Visual confirmation Understand Navigation Relevant Content? Bye Bye! Source: Jakob Nielsen the WAITING experience
  10. 10. Offline vs. Online
  11. 11. Mobile moments?
  12. 12. “Both offline and online consumers associate (slow) performance with poor customer service”
  13. 13. Click away slide Performance tolerance
  14. 14. Purpose vs. Context Queuing for iPhone6 launch - London 2014
  15. 15. Online users often lack context for delays...
  16. 16. ...and see no other option than to click away
  17. 17. “Your website is at it’s best when it creates the feeling that you don’t have to work to achieve your goal”
  18. 18. Good Design + Fast Experience = Great User Experience?
  19. 19. The Mobile Conversion gap..
  20. 20. User Experience vs. Conversion
  21. 21. 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
  22. 22. 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
  23. 23. 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
  24. 24. 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
  25. 25. 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%
  26. 26. Social Feedback
  27. 27. 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
  28. 28. 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%
  29. 29. 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
  30. 30. 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))
  31. 31. Faster = fixing the plumbing...
  32. 32. Size matters (more)
  33. 33. Optimize (delivery of) requests
  34. 34. Eliminate unnecessary redirects...
  35. 35. Fundamental changes?
  36. 36. ...fast by design to avoid the mobile ‘skip’
  37. 37. 1. Speed-up your perception
  38. 38. Which is faster? Tested with webpagetest.org (WiFi (10Mbs down/1,5Mbs up), 4G (5Mbps Down, 1Mbps Up) & 3G (2000Kbps Down, 764Kbps Up))
  39. 39. Which is faster? Tested with webpagetest.org (WiFi (10Mbs down/1,5Mbs up), 4G (5Mbps Down, 1Mbps Up) & 3G (2000Kbps Down, 764Kbps Up))
  40. 40. Which is faster? Tested with webpagetest.org (WiFi (10Mbs down/1,5Mbs up), 4G (5Mbps Down, 1Mbps Up) & 3G (2000Kbps Down, 764Kbps Up))
  41. 41. Which is faster? Tested with webpagetest.org (WiFi (10Mbs down/1,5Mbs up), 4G (5Mbps Down, 1Mbps Up) & 3G (2000Kbps Down, 764Kbps Up))
  42. 42. “The faster you can visualize your content, the more engaged your visitors will become”
  43. 43. 2. Defer non-priority content
  44. 44. Which contents loads in which order?
  45. 45. 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/
  46. 46. 83% of all Twinkle100 sites loads menu before content...
  47. 47. “The faster you can paint your priority content, the more engaged your visitors will become”
  48. 48. 3. Sequencing
  49. 49. “Users might overlook things that change too fast and/or often. Changeable screen elements are harder to understand in a limited timeframe”
  50. 50. Homepage Search Product overview Product Detail Basket
  51. 51. Homepage Search Product overview Product Detail Basket
  52. 52. 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.)
  53. 53. Consistent, simple & user generated navigation
  54. 54. Design your Carousel
  55. 55. Item 1 Item 2 Item 3 Item 4 Call to action >< Descriptive labels Buy me? Arrows for navigation direction
  56. 56. 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
  57. 57. 4. Increase perceived value
  58. 58. Homepage Search Product overview Product Detail Payment Tolerated speed
  59. 59. Fast response = Fast Experience?
  60. 60. 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
  61. 61. http://www.fastcodesign.com/1669788/the-3-white-lies-behind-instagrams-lightning-speed
  62. 62. Show effort, provide specific content, build trust
  63. 63. 5. Let the device work...
  64. 64. Make life easy, insert touch events...
  65. 65. Search
  66. 66. Touch gestures
  67. 67. Native gestures
  68. 68. Scrolling
  69. 69. Questions so far?
  70. 70. Paint your #UX canvas
  71. 71. Prioritize content, deliver fast
  72. 72. 3 (fast) design questions to ask...
  73. 73. Above the fold?
  74. 74. Which priority?
  75. 75. Improving which metrics?
  76. 76. Good Design + Fast Experience = Great User Experience
  77. 77. Are you #fast enough? http://webpagetest.org http://benchmark.measureworks.nl
  78. 78. Thanks! More questions? M: jtjepkema@measureworks.nl T: @jeroentjepkema W: www.measureworks.nl View slides: bit.ly/MW-MCE15

×