KEMBAR78
DESIGN THE PRIORITY, PERFORMANCE 
AND UX | PDF
@webinterface
DESIGN THE PRIORITY
PERFORMANCE 

AND UX
U-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 - 10s
Instant 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 KB
86 Resources
1354 KB
108 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
2
SECONDS 

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
COMMUNICATION
SET A GOAL
COMMUNICATE
REPEAT
@webinterface
PROCESS
MESUARE
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

DESIGN THE PRIORITY, PERFORMANCE 
AND UX