Fast, Responsive, Experiences @jeroentjepkema m-commerce event 2015
Responsive Web Design: De essentie van een snelle User Experience
Jul 16, 2015
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Fast, Responsive, Experiences
@jeroentjepkemam-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, Source Magazine
The Skip: http://musicmachinery.com/2014/05/02/the-skip/
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
UnderstandNavigation
Source: Jakob Nielsen
the WAITING experience
0 0,5 1,5 3
Visual confirmation
UnderstandNavigation
Relevant Content?
Source: Jakob Nielsen
the WAITING experience
0 0,5 1,5 3 10
Visual confirmation
UnderstandNavigation
Relevant Content?
ByeBye!
Source: Jakob Nielsen
the WAITING experience
Offline vs. Online
Mobile moments?
“Both offline and online consumers associate (slow) performance with
poor customer service”
Click away slidePerformance 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
Page
view
s (%
)
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
Boun
cera
te (%
)
0
100
0
100
# Mobile Pageviews # Desktop Pageviews Bouncerate Mobile Bouncerate Desktop
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
Page
view
s (%
)
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
Boun
cera
te (%
)
0
100
0
100
# Mobile Pageviews # Desktop Pageviews
LD50: 5.25 sec.
Optimum: 3,15 sec.
Bouncerate Mobile Bouncerate Desktop
Twinkle100 data collected 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 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
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%
Social Feedback
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
Check-inReadinessContactVodafoneData 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%
Downtime
Mobile
Speed
Login
Forms 5%
6%
19%
21%
36%
Top 5 topics
18%
28%
16%26%
12%
Check-inReadinessContactVodafoneData Subscription
Mobile
33%
44%
23%
Empty fieldsMobileRepeating tasks
Forms
Research from MeasureWorks, Social and More & Obi4Wan. Social mentions collected about Twinkle100 webshops only between March 1 - August 31 2014
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))
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, 764Kbps Up))
Which is faster?
Tested with webpagetest.org (WiFi (10Mbs down/1,5Mbs up), 4G (5Mbps Down, 1Mbps Up) & 3G (2000Kbps Down, 764Kbps Up))
Which is faster?
Tested with webpagetest.org (WiFi (10Mbs down/1,5Mbs up), 4G (5Mbps Down, 1Mbps Up) & 3G (2000Kbps Down, 764Kbps Up))
Which is faster?
Tested with webpagetest.org (WiFi (10Mbs down/1,5Mbs up), 4G (5Mbps Down, 1Mbps Up) & 3G (2000Kbps Down, 764Kbps Up))
“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.nngroup.com/articles/website-response-times/
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
limited timeframe”
Homepage Search Productoverview
Product Detail Basket
Homepage Search Productoverview
Product Detail Basket
Homepage Search Productoverview
Product Detail Basket
Understand navigation (1-2 sec.)
Consistentnavigation (0,5-1 sec.)
Renew yourorientation (1-2 sec.)
renewyour navigation
(1-2 sec.)
Consistentnavigation (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 first
Load other items seperately, in the
backgroundLoad only primary
image second
4. Increase perceived value
Homepage Search Productoverview
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 than get it instantly – if, and
it’s an important if, they believe the app is working
for them
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: [email protected]: @jeroentjepkemaW: www.measureworks.nl
View slides: bit.ly/MW-MCE15
Related Documents
