usability vs. conversie optimalisatie door jeroen tjepkema
DESCRIPTION
Presentation during the event Shopping Today, 23rd of September 2014 in deFabrique in Utrecht The Netherlands.TRANSCRIPT
User Experience vs. Conversion Optimization5 insights for speed(y) experiments
@jeroentjepkemaShoppingtoday 2014
How fast are we?
Tested with webpagetest.org with Chrome, IE11, Firefox & Safari (10Mbs down/1,5Mbs up)
1,49Mbaveragepagesize
4.59saverage
page load time
130requests on
average
86% slower than
3 sec.
Desktop Performance
1,2Mbaveragepagesize
4.27svia wifi
8.57svia 3G
41% of all Twinkle100 have optimized
site
Tested with webpagetest.org on both Android & iPhone (WiFi (10Mbs down/1,5Mbs up) & 3G (2000Kbps Down, 764Kbps Up))
Mobile Performance
Rank Brand Speed
1 Autobandencollectief 1,35
2 Worldticketshop 1,75
3 NRClux 2,29
4 Kinderkleding-tekoop 2,30
5 Toplenzen.nl 2,46
Average 4,694,69
96 Score.nl 7,27
97 Vente Exclusive 7,35
98 Ticketmaster 7,74
99 Jack&Jone 7.97
100 Blokker 8.30
Rank Brand Speed
1 Sunweb 2,31
2 Sunnycars 2,64
3 Elmarreizen 3,49
4 Bizztravel 3,72
5 DeJongintra 3,80
Average 5,495,49
96 D-reizen 7,17
97 Roompot 7,54
98 Centerparcs 7,71
99 Stedentrips,nl 8,24
100 Travelbird 11,35
Retail100 Travel30
Why is this important?
“Both offline and online consumers associate long wait times with
poor customer service”
Click away slidePerformance tolerance
6%
21%
41%
32%
Delivery Ordering UX Other
Complaints Top 5 topics
Downtime
Mobile
Speed
Login
Forms 10%
11%
19%
21%
26%
0
10
20
30
40
0.00 2.00 4.00 6.00 8.00 10.00 12.00 14.00 16.00 18.00 20.00 22.00 24.00Time of day (hours)
# of
twee
ts)
Purpose vs. Context
Online users often lack context for delays...
...and see no other option than to click away
Performance Tolerance
0
10
20
30
40
50
60
70
80
90
100
0 1 2 3 4 5 6 7 8 9 10
Bouncerate per pagetype/session
Boun
cera
te (%
)
Page load time (sec.)
Median Campaign Product search
0
10
20
30
40
50
60
70
80
90
100
0 1 2 3 4 5 6 7 8 9 10
Boun
cera
te (%
)
Page load time (sec.)
Median Campaign Product search
Bouncerate per pagetype/session
Back in a second....
Home Product Detail Basket Details Payment Thank you
Navigate Payment
Home Product Detail Basket Details Payment Thank you
Navigate Payment
Detail
Product
Detail
Detail
Product
Product
Home Product Detail Basket Details Payment Thank you
Navigate Payment
Detail
Product
Detail
Detail
Product
Product
“Make it feel fast enough to stimulate pageviews”
“Speed is at it’s best when it creates the feeling that you don’t have to work to achieve your goal”
The waiting experience
0 0,5 1,5 3 10
Tolerance for waiting online
0 0,5 1,5 3 10
Visual confirmation
Tolerance for waiting online
0 0,5 1,5 3 10
Visual confirmation
UnderstandNavigation
Tolerance for waiting online
0 0,5 1,5 3 10
Visual confirmation
UnderstandNavigation
Relevant Content?
Tolerance for waiting online
0 0,5 1,5 3 10
Visual confirmation
UnderstandNavigation
Relevant Content?
ByeBye!
Tolerance for waiting online
Purpose vs. Context
Speed-up your perception
Which is faster?
Which is faster?
Which is faster?
Which is faster?
Fast response = Fast Experience
http://www.fastcodesign.com/1669788/the-3-white-lies-behind-instagrams-lightning-speed
“The faster you can visualize your content, the more engaged your visitors will become”
Increase perceived value
Home Product Detail Basket Details Payment Thank you
Navigate Payment
Detail
Product
Detail
Detail
Product
Product
Flow
Home Product Detail Basket Details Payment Thank you
Navigate Payment
0
1
2
3
4
Home Product Detail Basket Details Payment Thank you
Start Render Document Complete Tolerance
Spee
d (se
c.)
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
Show effort, build trust, provide specific feedback
0
1
2
3
4
Home Product Detail Basket Details Payment Thank you
Start Render Document Complete Tolerance
Home Detail Basket Details Thank you
Navigate Payment
Product Payment
Product Payment
Spee
d (se
c.)
Do I need that carousel?
83% of all Twinkle100 sites loads menu before content...
Item 1 Item 2 Item 3 Item 4
Call to action ><
Priority 2 Priority 3 Priority 4 Priority 5
Priority 1 ><
Recognizable navigation
Search/Orientation phase
Perception of experience
1
Performance influence cycle
http://twinkle100.measureworks.nl
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
The waiting experience
Let the device work...
Search
Touch gestures
Native gestures
Scrolling
Questions so far?
Good Design +
Fast Delivery =
Great User Experience
Paint your #UX canvas
3 (user experience) design questions to ask...
Above the fold?
Which priority?
Improving which metrics?
Put your website on a diet...
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.”
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-
Boun
ce ra
te (%
)
Categorienaam
Page
view
s (#
)
Bouncerate # Pageviews
Bol.com: Speed vs. Engagement per month
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-
Boun
ce ra
te (%
)
Categorienaam
Page
view
s (#
)
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
But, optimization never ends...
Deliver before it turns green!
Expert review...
Join the movement #fastweb
Thanks! More questions?M: [email protected]: @jeroentjepkemaW: www.measureworks.nl