design the priority, performance and ux

@webinterface

DESIGN THE PRIORITY

PERFORMANCE AND UXU-Conference Usability Insights 2016

@webinterface

PETER ROZEK

@webinterface

@webinterface

@webinterface

WORK @ ecx.io (DIGITAL AGENCY)

@webinterface

UX, USABILITY, ACCESSIBILITY, FRONTEND

@webinterface

@webinterface

WHY BUILD AN FAST EXPERIENCE ?

@webinterface

RESPONSIVE AND FAST IS USER EXPERIENCE.

@webinterface

FAST PAGE LOAD TIME BUILDS TRUST IN YOUR SITE.

@webinterface

BETTER CONVERSION RATE.

@webinterface

WE HAVE SLOW CONNECTION SPEEDS !

@webinterface

DO YOU KNOW YOUR WHY ? DOES YOUR CLIENT KNOW ITS WHY ?

@webinterface

FACTS FROM THE USER !

@webinterface

@webinterface

Website was too slow to load.

73%

@webinterface

Website that crashed, froze, or received an error.

51%

@webinterface

Website wasn’t available.

38%

@webinterface

Consumers expect a web page to load in 2 seconds or less.

47%

@webinterface

People abandon a website that takes more than 3 seconds to load.

40%

@webinterface

1 SECOND DELAY

in page response can result in a

7% REDUCTION IN CONVERSION.

Source: Mobilism: High Performance Mobile

@webinterface

An e-commerce site is making

$100,000 PER DAY 1 SECOND DELAY

could potentially cost you $2.5 million in lost sales every year.

Source: Data Monday: E-commerce Performance

@webinterface Source: why_web_performance_matters.pdf

@webinterface

SPEED IS A KILLER !

Source: http://www.shmee.me

@webinterface

WHAT IS AN FAST EXPERIENCE ?

@webinterface

OBJECTIVE TIME OR CLOCK TIME

Source: http://www.fon.hum.uva.nl

@webinterface

PSYCHOLOGICAL TIME OR BRAIN TIME

@webinterface

TIME TO INTERACT AND

LOAD TIME

USER S PERCEPTION OF TIME

vs.

@webinterface

JACOB NIELSEN: WEBSITE RESPONSE TIMES

Source: https://www.nngroup.com/articles/website-response-times/

0,1 - 0,2s 0,5 - 1s 2 - 5s 5 - 10sInstant Immediate User Flow Keeping the

user s attention

@webinterface

LOADTIME FINGER DOWN ANIMATION FINGER UP

Source: https://docs.google.com/presentation/

max 100ms max 6ms chunks

do idle/cleanup in 50ms chunks in case finger down happens again

@webinterface

PERFORMANCE IS ABOUT PERCEPTION.

@webinterface

@webinterface

ABOVE THE FOLD CRITERION

Source: Radware_SOTU_Report_Spring_2015.pdf@webinterface

@webinterface

HOW TO BUILD AN FLEXIBLE, LIGHTNING-FAST EXPERIENCE ?

@webinterface

CLARITY FOCUS

@webinterface

BUILDSALES CONCEPT/DESIGN ROLL-OUTSTRATEGY

PERFORMANCE

PROJECT TIMELINE

@webinterface

PERFORMANCE IS A ESSENTIAL DESIGN FEATURE.

@webinterface

PERFORMANCE

BUILDSALES CONCEPT/DESIGN ROLL-OUTSTRATEGY

@webinterface

Client understands the benefits.

BUILDSALES CONCEPT/DESIGN ROLL-OUTSTRATEGY

@webinterface

Advocate performance as a priority.

BUILDSALES CONCEPT/DESIGN ROLL-OUTSTRATEGY

@webinterface

Concept and Design is committed within a performance budget.

BUILDSALES CONCEPT/DESIGN ROLL-OUTSTRATEGY

@webinterface

Development is prepared to successfully integrate performance as a priority.

BUILDSALES CONCEPT/DESIGN ROLL-OUTSTRATEGY

@webinterface

SETTING A PERFORMANCE BUDGET

Source: https://timkadlec.com/2013/01/setting-a-performance-budget/

@webinterface

1007 KB86 Resources

1354 KB108 Resources

2013

grown by 26%

Source: Radware_SOTU_Report_Spring_2015.pdf

2015

@webinterface Source: https://developers.google.com/speed/docs/insights....

@webinterface

@webinterface

EGDE

150 KB

220 KB

SOMEWHERE BETWEEN

AND

2SECONDS ON EDGE

@webinterface

3G

SECONDS ON 3G

2 350 KB

400 KB

SOMEWHERE BETWEEN

AND

@webinterface

PERFORMANCE BUDGET

400 KB

100 kb fonts 50 kb css 200 kb images 50 kb javascript

@webinterface

SOLUTION FOR IMAGES: <PICTURE> ELEMENT

@webinterface

@webinterface

RESPONSIVE WILL CONTENT THAT FITS, NOT DESKTOP HAND-ME-DOWNS.

@webinterface

MOBILE FIRST AND CONTENT FIRST: BUILD AN EXPERIENCE MAP.

@webinterface

CARRING OUT THE RESEARCH.

@webinterface

GROUPING THE CORE AND ADDITIONAL EXPERIENCE.

@webinterface

ADDITIONAL CONTENT: PROGRESSIVELY LOAD THE EXTRAS.

@webinterface

CONDITIONAL LOADING

Source: Conditional Loading for RWD , Client-Side Solution

@webinterface

PRIORITIZING THE CORE EXPERIENCE.

Image Source: Build an experience map@webinterface

@webinterface

ORDERING OBJECTIVES

@webinterface

@webinterface

MAPPING THE BUSINESS

@webinterface

@webinterface

MAPPING THE COMPETITION

@webinterface

@webinterface

IDENTIFYING OPPORTUNITIES

@webinterface

@webinterface

CREATING A READMAP OF WORK.

@webinterface

LAST WORDS

@webinterface

COMMUNICATIONSET A GOAL COMMUNICATE REPEAT

@webinterface

PROCESSMESUARE OPTIMISE REPEAT

@webinterface

PERFORMANCE IS ABOUT PERCEPTION MANAGEMENT.

@webinterface

TIME TO INTERACT VS.

LOAD TIME

@webinterface

DELIVER CORE EXPERIENCE FIRST, THEN PROGRESSIVELY ENHANCE THE EXTRAS.

Brad Frost

https://www.youtube.com/watch?v=nE0CRMm59BY@webinterface

„Great minds discus principles.

Average minds discus technologies.

Small minds discus tools.“

THANKS

…dear Ellen

@webinterface

@webinterface peter.rozek@ecx.io