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: jtjepkema@measureworks.nlT: @jeroentjepkemaW: www.measureworks.nl

View slides: bit.ly/MW-MCE15