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

1. Fast, Responsive, Experiences
@jeroentjepkema
m-commerce event 2015

3. The Skip: http://musicmachinery.com/2014/05/02/the-skip/

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

11. Offline vs. Online

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...

43. Size matters (more)

44. Optimize (delivery of) requests

45. Eliminate unnecessary redirects...

46. Fundamental changes?

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”

64. Homepage Search
Product
overview
Product
Detail
Basket

65. Homepage Search
Product
overview
Product
Detail
Basket

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

68. Design your Carousel

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

72. Homepage Search
Product
overview
Product
Detail
Payment
Tolerated
speed

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

75. http://www.fastcodesign.com/1669788/the-3-white-lies-behind-instagrams-lightning-speed

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

86. Questions so far?

87. Paint your #UX canvas

88. Prioritize content, deliver fast

89. 3 (fast) design questions to ask...

90. Above the fold?

91. Which priority?

92. Improving which metrics?

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