Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
Fast, Responsive, Experiences
@jeroentjepkema
m-commerce event 2015
The Skip: http://musicmachinery.com/2014/05/02/the-skip/
“Hit them with a beat! The decision to continue
listening to a song is often determined in the first 10
seconds” - Dr. Dre,...
Why is this important?
the WAITING experience
Source: Jakob Nielsen
0 0,5
Visual
confirmation
Source: Jakob Nielsen
the WAITING experience
0 0,5 1,5
Visual
confirmation
Understand
Navigation
Source: Jakob Nielsen
the WAITING experience
0 0,5 1,5 3
Visual
confirmation
Understand
Navigation
Relevant
Content?
Source: Jakob Nielsen
the WAITING experience
0 0,5 1,5 3 10
Visual
confirmation
Understand
Navigation
Relevant
Content?
Bye
Bye!
Source: Jakob Nielsen
the WAITING exper...
Offline vs. Online
Mobile moments?
“Both offline and online consumers
associate (slow) performance with
poor customer service”
Click away slide
Performance tolerance
Purpose vs. Context
Queuing for iPhone6 launch - London 2014
Online users often lack context for delays...
...and see no other option than to click away
“Your website is at it’s best when it creates the
feeling that you don’t have to work to achieve
your goal”
Good Design
+
Fast Experience
=
Great User Experience?
The Mobile Conversion gap..
User Experience vs. Conversion
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 Monitori...
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 Monitori...
Twinkle100 data collected with webpagetest.org with Chrome, IE11, Firefox & Safari (10Mbs down/1,5Mbs up)
1,49Mb
average
p...
1,2Mb
average
pagesize
4.27s
via wifi
8.57s
via 3G
41% of
Twinkle100 have
mobile optimized
site
Twinkle100 data collected w...
Data collected with webpagetest.org on Crome, Firefox, IE11, Android & iPhone (WiFi (10Mbs down/1,5Mbs up) & 3G (2000Kbps ...
Social Feedback
6%
21%
41%
32%
Delivery Ordering UX Other
Complaints Top 5 topics
Downtime
Mobile
Speed
Login
Forms 5%
6%
19%
21%
36%
Rese...
Check-in
Readiness
Contact
Vodafone
Data Subscription
Mobile
Research from MeasureWorks, Social and More & Obi4Wan. Social...
Downtime
Mobile
Speed
Login
Forms 5%
6%
19%
21%
36%
Top 5 topics
18%
28%
16%
26%
12%
Check-in
Readiness
Contact
Vodafone
D...
This is responsive web ;-(
WiFi 3G
Tested with webpagetest.org (WiFi (10Mbs down/1,5Mbs up), 4G (5Mbps Down, 1Mbps Up) & 3...
Faster = fixing the plumbing...
Size matters (more)
Optimize (delivery of) requests
Eliminate unnecessary redirects...
Fundamental changes?
...fast by design to avoid the mobile ‘skip’
1. Speed-up your perception
Which is faster?
Tested with webpagetest.org (WiFi (10Mbs down/1,5Mbs up), 4G (5Mbps Down, 1Mbps Up) & 3G (2000Kbps Down, ...
Which is faster?
Tested with webpagetest.org (WiFi (10Mbs down/1,5Mbs up), 4G (5Mbps Down, 1Mbps Up) & 3G (2000Kbps Down, ...
Which is faster?
Tested with webpagetest.org (WiFi (10Mbs down/1,5Mbs up), 4G (5Mbps Down, 1Mbps Up) & 3G (2000Kbps Down, ...
Which is faster?
Tested with webpagetest.org (WiFi (10Mbs down/1,5Mbs up), 4G (5Mbps Down, 1Mbps Up) & 3G (2000Kbps Down, ...
“The faster you can visualize your content,
the more engaged your visitors will become”
2. Defer non-priority content
Which contents loads in which order?
A: Load carousel first B: Delayed download
20% time spent on priority content 1% time spent on priority content
http://www....
83% of all Twinkle100 sites loads menu
before content...
“The faster you can paint your priority content,
the more engaged your visitors will become”
3. Sequencing
“Users might overlook things that change
too fast and/or often. Changeable screen
elements are harder to understand in a
l...
Homepage Search
Product
overview
Product
Detail
Basket
Homepage Search
Product
overview
Product
Detail
Basket
Homepage Search
Product
overview
Product
Detail
Basket
Understand
navigation
(1-2 sec.)
Consistent
navigation
(0,5-1 sec.)...
Consistent, simple & user generated navigation
Design your Carousel
Item 1 Item 2 Item 3 Item 4
Call to action ><
Descriptive labels
Buy me?
Arrows for navigation
direction
Item 1 Item 2 Item 3 Item 4
Call to action ><
Descriptive labels
Buy me?
Arrows for navigation
direction
Call to action fir...
4. Increase perceived value
Homepage Search
Product
overview
Product
Detail
Payment
Tolerated
speed
Fast response = Fast Experience?
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
t...
http://www.fastcodesign.com/1669788/the-3-white-lies-behind-instagrams-lightning-speed
Show effort,
provide specific content,
build trust
5. Let the device work...
Make life easy, insert touch events...
Search
Touch gestures
Native gestures
Scrolling
Questions so far?
Paint your #UX canvas
Prioritize content, deliver fast
3 (fast) design questions to ask...
Above the fold?
Which priority?
Improving which metrics?
Good Design
+
Fast Experience
=
Great User Experience
Are you #fast enough?
http://webpagetest.org
http://benchmark.measureworks.nl
Thanks! More questions?
M: jtjepkema@measureworks.nl
T: @jeroentjepkema
W: www.measureworks.nl
View slides: bit.ly/MW-MCE15
MeasureWorks - Fast Experiences for Responsive Websites
MeasureWorks - Fast Experiences for Responsive Websites
MeasureWorks - Fast Experiences for Responsive Websites
MeasureWorks - Fast Experiences for Responsive Websites
MeasureWorks - Fast Experiences for Responsive Websites
MeasureWorks - Fast Experiences for Responsive Websites
MeasureWorks - Fast Experiences for Responsive Websites
MeasureWorks - Fast Experiences for Responsive Websites
MeasureWorks - Fast Experiences for Responsive Websites
MeasureWorks - Fast Experiences for Responsive Websites
MeasureWorks - Fast Experiences for Responsive Websites
MeasureWorks - Fast Experiences for Responsive Websites
MeasureWorks - Fast Experiences for Responsive Websites
MeasureWorks - Fast Experiences for Responsive Websites
MeasureWorks - Fast Experiences for Responsive Websites
MeasureWorks - Fast Experiences for Responsive Websites
MeasureWorks - Fast Experiences for Responsive Websites
Prochain SlideShare
Chargement dans…5
×

MeasureWorks - Fast Experiences for Responsive Websites

1 322 vues

Publié le

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

Publié dans : Technologie
  • Soyez le premier à commenter

MeasureWorks - Fast Experiences for Responsive Websites

  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

×