5 best practices for a
fast user experience @jeroentjepkema Multi Channel Conference 2014

Waiting = Engagement

Just another day...

“Both offline and online consumers
associate long wait times with poor customer service, however online consumers often lack context for delays”

Purpose vs. Context

Good Design + Fast Delivery
= Great User Experience

NS Hispeed: Site optimization 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-Bouncerate(%) Categorienaam Pageviews(#) Bouncerate # Pageviews Bol.com: Speed vs. Engagement per month Data presented by MeasureWorks at Velocity Conference London 2013: http://bit.ly/MW-VEUrum

Load time Availability Homepage Transaction
time Availability Ticket ordering funnel (7 steps) Before After 11,5s 95,61% 3,8s 99,52% Before After 43,2s 88,72% 35,7s 97,65% 30% higher site success rate NS Hispeed: Site optimization

Design vs. Speed?

0 25 50 75 100
1 2 3 4 5 Slow Average Fast %ofrespondentsthatratedtheactualwebsitespeed Design score (1=bad - 5=beautiful) Over 60% of people that experienced a slow website ranked design 2 points lower compared to a fast experience

So... why doesn’t everybody have
a fast website?

Trouble is stickyness? Gum/Shoe The
problem lies in stickyness...

1. Design for user fit

Source: Jakob Nielsen 99% of
time online is spent on other sites than yours...

Experience vs. surfing online....

Always compared to past experiences
Experience vs. surfing online....

Task completion has positive impact
Always compared to past experiences Experience vs. surfing online....

Task completion has positive impact
Slow downs have more impact Always compared to past experiences Experience vs. surfing online....

15-20% worse than reality Task
completion has positive impact Slow downs have more impact Always compared to past experiences Experience vs. surfing online....

Consumers visit 18-23 travel websites
before they finally convert Source: TNS/Nipo

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

Impact of
Mobile?

Your
BRAND
Impact of
Mobile?

every day Flipboard e-mail Twitter
Fitbit Foursquare Human.co facebook twitter linkedin NBA.com News apps Your BRAND Impact of Mobile?

Impact of Mobile? every week
every day Flipboard e-mail Netflix Youtube Twitter Dropbox Parkmobile Soundcloud Evernote Fitbit Foursquare Human.co whatsapp Facetime facebook twitter linkedin NBA.com News apps Your BRAND

every week every day Flipboard
e-mail Shazam Google Hangouts Netflix Youtube Twitter Dropbox Parkmobile Google Plus Soundcloud Evernote Google Maps Appie Skype Pathe Youtube Meetup Fitbit Foursquare Human.co whatsapp Facetime facebook twitter linkedin NBA.com News apps every month Your BRAND Impact of Mobile?

? every week every day
Flipboard e-mail Shazam Google Hangouts Netflix Youtube Twitter Dropbox Parkmobile Google Plus Soundcloud Evernote Google Maps appie Skype Pathe Youtube Meetup Fitbit Foursquare Human.co whatsapp Facetime facebook twitter linkedin NBA.com every month Your BRAND Impact of Mobile?

The waiting experience

2. Design for priority delivery

What’s your time to first
tweet? https://blog.twitter.com/2012/improving-performance-on-twittercom

3 (performance) design questions to
ask...

Above the fold?

Which priority?

Improving which metrics?

Why do we need that
Carousel?

Priority 1

Priority 1
Priority 2

Priority 1 Priority 2 Priority
3

Priority? Tested on iPhone with
webpagetest.org (3G traffic shaping, 2000Kbps Down, 764Kbps Up, 150ms latency)

90% of all mobile optimized
Twinkle100 sites loads menu before actual content

The bottom line...

3. Design for fast perception

http://www.nytimes.com/2012/08/19/opinion/sunday/why-waiting-in-line-is-torture.html?pagewanted=all&_r=0

http://answers.yahoo.com/question/index?qid=1005081200005

nytimes.com/2004/02/27/nyregion/27BUTT.html

Perception = Fast Experience

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

“Speed is at it’s best
when it creates the feeling that you don’t have to work to achieve your goal”

@jeroentjepkema, MeasureWorks How fast should
I be?

0,3 0 Source: Jakob Nielsen
Instantaneous: I like it!

1 0,3 0 Source: Jakob
Nielsen Instantaneous: I like it! Interaction: Let’s conversate...

1 0,3 0 Source: Jakob
Nielsen Instantaneous: I like it! Interaction: Let’s conversate...

1 3 0,3 0 Source:
Jakob Nielsen Instantaneous: I like it! Interaction: Let’s conversate... Mmm, shall I click away?

10 1 3 0,3 Instantaneous:
I like it! Interaction: Let’s conversate... Mmm, shall I click away? Only if the task/content is relevant 0 Source: Jakob Nielsen

Don’t stop with one page:
Flow state

Provide relevant content to support
task completion...

...deliver it fast, focus on
perception!

Targets for conversion...

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

4. Design for mobile, mobile,
mobile

Mobile Web vs. Mobile App

Research by Google: http://ssl.gstatic.com/think/docs/the-new-multi-screen-world-study_research-studies.pdf

51% 36% 12% Launch Mobile
App Ask Google Visit mobile website N = 1449 Research performed by Bol.com, presented at MIE2014: Bit.ly/MW-MIE13 How to start your mobile journey?

#mobile(web)first

Smartphone or Tablet?

34% of all consumers use
the device that’s closest to them when looking for information Research by Google: http://ssl.gstatic.com/think/docs/the-new-multi-screen-world-study_research-studies.pdf

34% of all consumers use
the device that’s closest to them when looking for information Research by Google: http://ssl.gstatic.com/think/docs/the-new-multi-screen-world-study_research-studies.pdf Over 79% of users prefer a full version of the website on tablet

Designing mobile web into the
customer journey?

Desktop Smartphonevs.

More Lessvs.

More Lessvs. Rich content Fast
connections Large screen sizes Couch Commerce Small real estate Touch enabled Slow/Fast connections On the move

#Fast(er)Delivery

0 11,25 22,5 33,75 45
56,25 67,5 78,75 90 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-Bouncerate(%) Categorienaam Pageviews(#) Speed vs. Engagement per month Bol.com Non-Bounce Desktop # Pageviews Pageviews(#) Non-Bounce Mobile LD50: 4.85 sec. Baseline: 2,7 sec. Data presented by MeasureWorks at Velocity Conference London 2013: http://bit.ly/MW-VEUrum

WiFi 4G 3G What happens
if I don’t optimize? Tested with webpagetest.org (WiFi (10Mbs down/1,5Mbs up), 4G (5Mbps Down, 1Mbps Up) & 3G (2000Kbps Down, 764Kbps Up))

Responsive Web Design? WiFi 3G
Tested with webpagetest.org (WiFi (10Mbs down/1,5Mbs up), 4G (5Mbps Down, 1Mbps Up) & 3G (2000Kbps Down, 764Kbps Up))

Change your viewpoint when designing
for mobile

#TouchEnabled

http://www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile- devices.php?goback=.gmp_72842.gde_72842_member_215909354 49% One thumb
device... 36% 22%

http://www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-
devices.php?goback=.gmp_72842.gde_72842_member_215909354
The green zone

- +
One touch?

Mobile
Search!!

vs.

5. Design to be measured

Defining Service Levels

A practical (and easy DIY)
example:

Purchasing a book, must be
completed (speed), where every page loads under 3 sec., from any location in the Netherlands, for 90% of all users, every day between 6am and 12pm, using IE9 and higher, Customer journey Metric: Speed Target: Sec User scenario User locations Percentile Service Window measured with Real User Monitoring. Monitoring type Read more: Metrics 101, Velocityconf 2010

Repeatable, End-User focused & Quantifiable

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-Bouncerate(%) Categorienaam Pageviews(#) 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-Bouncerate(%) Categorienaam Pageviews(#) 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

“Every release should be better
or equal to previous version”

Measuring the right data

Application Delivery Chain INTERNET CUSTOMERS
Third-party/ Cloud Services Content Delivery Networks Local ISP Mobile Carriers Major ISP INTERNAL USERS(CLOUD) DATA CENTER Storage DB Servers Web Servers App Servers Middleware ServersMainframe Load Balancers Network

INTERNET CUSTOMERS Third-party/ Cloud Services
Content Delivery Networks Local ISP Mobile Carriers Major ISP INTERNAL USERS(CLOUD) DATA CENTER Storage DB Servers Web Servers App Servers Middleware ServersMainframe Load Balancers Network Application Delivery Chain This is what you control This is what you’re blamed for

Measuring performance?

Measuring performance? Always outside- in,
from the browser perspective...

2 ways of measuring performance...

Synthetic
Monitoring

Periodic, simulated, measurement of performance

Go check your site @
Webpagetest.org (For settings: Akamai State of the Internet)

Ultimately, synthetic monitoring shows you
if your site’s working or not... (best used for operations and service reports)

Real User
Monitoring

The problem with synthetic...

Synthetic heartbeat Real Users ..it’s
‘a’ user, not your end user

Relies on navigation timing API,
custom variables can be added Turn on “Site Speed” in your GA account! http://bit.ly/1ivGWTt

Or try
Soasta mPulse
http://bit.ly/I5ngs8

Ultimately, Real User Monitoring shows
you how many users are affected by bad performance... (best used for capacity management and conversion optimization)

One truth to rule them
all...

Questions so far?

Expert review...

5 best practices for a
fast user experience

5 best practices for a
fast user experience 1. Understand your customer

5 best practices for a
fast user experience 1. Understand your customer 2. Prioritize content

5 best practices for a
fast user experience 1. Understand your customer 2. Prioritize content 3. Deliver fast

5 best practices for a
fast user experience 1. Understand your customer 2. Prioritize content 3. Deliver fast 4. When mobile, design from the ground up

5 best practices for a
fast user experience 1. Understand your customer 2. Prioritize content 3. Deliver fast 4. When mobile, design from the ground up 5. Design to be measurable

Thanks! More questions? M: jtjepkema@measureworks.nl
T: @jeroentjepkema W: www.measureworks.nl View slides: bit.ly/MW-MCC14