design the priority, performance and ux
TRANSCRIPT
@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
